0


Web Components(web组件)

文章目录

Web Component即web组件,允许创建可重用的定制元素(它们的功能封装在你的代码之外)。就是

组件

的功能。

web Components的概念和使用

web Components 可以创建封装了指定功能的定制元素,创建完成之后你可以在任何你喜欢的地方重用。
webComponents的三大组成部分:

  • 自定义元素:定义元素及其行为
  • 影子Dom:将封装的“影子”DOM 树附加到元素并控制其关联的功能。使用这种方式保持元素的功能私有,不用担心与文档的其他部分发生冲突。
  • html 模板:<template><slot> 元素可以作为标记模板

使用自定义元素

自定义元素即由 Web 开发人员自行定义 HTML 元素,扩展浏览器中可用的元素集。

自定义元素类型

有两种类型:

  • 自定义内置元素:继承自标准的 HTML 元素:例如 HTMLImageElement 或 HTMLParagraphElement。它们的实现定义了标准元素的行为。无需从头开始实现行为。
  • 独立自定义元素:继承自 HTML 元素基类 HTMLElement。必须从头开始实现它们的行为。

实现自定义元素

自定义元素作为一个

来实现。

在类的构造函数中:
可以设置初始状态和默认值,注册事件监听器,创建一个影子根(shadow root);
不应检查元素的属性或子元素,也不应添加新的属性或子元素

  • 自定义内置元素实现格式
classWordCountextendsHTMLParagraphElement{constructor(){super();}// 此处编写元素功能}
  • 独立自定义元素实现格式
classPopupInfoextendsHTMLElement{constructor(){super();}// 此处编写元素功能}

注册自定义元素

Window.customElements.define(name,constructor,options)

方法。

  • name:自定义元素名称
  • constructor:自定义元素类
  • options:仅对于自定义内置元素,这是一个包含单个属性 extends 的对象,该属性表示要扩展的内置元素。
customElements.define("word-count", WordCount,{extends:"p"});
customElements.define("popup-info", PopupInfo);

自定义元素的回调函数

自定义元素生命周期回调包括:

  • connectedCallback():每当元素添加到文档中时调用。规范建议开发人员尽可能在此回调中实现自定义元素的设定,而不是在构造函数中实现。
  • disconnectedCallback():每当元素从文档中移除时调用。
  • adoptedCallback():每当元素被移动到新文档中时调用。
  • attributeChangedCallback():在属性更改、添加、移除或替换时调用。

配置方式,和构造函数同级:

// 为这个元素创建类classMyCustomElementextendsHTMLElement{static observedAttributes =["color","size"];constructor(){// 必须首先调用 super 方法super();}connectedCallback(){
    console.log("自定义元素添加至页面。");}}// 注册自定义元素
customElements.define("my-custom-element", MyCustomElement);

使用自定义元素

  • 自定义内置元素的使用 要使用自定义内置元素,请使用内置元素,但将自定义名称作为 is 属性的值:
<pis="word-count"></p>
  • 独立自定义元素的使用 使用独立自定义元素,就像使用内置的 HTML 元素一样,使用自定义名称即可:
<popup-info><!-- 元素的内容 --></popup-info>

添加自定义元素的属性变化

元素的属性修改之后元素也应该响应相应的变化,所以我们需要实现自定义元素的属性变化。
实现自定义元素的属性变化需要在自定义类中添加如下两个内容:

  • 添加一个名为observedAttributes的静态属性,它是一个数组,里面包含的是标签需要变更通知的所有的属性名称。
  • 添加attributeChangedCallback() 生命周期回调函数,实现属性变更的相关操作。 回调接受三个参数:发生变化的属性的名称、属性的旧值、属性的新值. attributeChangedCallback() 在元素的首次声明解析时也会被调用。

eg:

// 为这个元素创建类classMyCustomElementextendsHTMLElement{static observedAttributes =["size"];constructor(){super();}attributeChangedCallback(name, oldValue, newValue){
    console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}。`);}}

customElements.define("my-custom-element", MyCustomElement);

自定义元素示例

  • 定义独立自定义元素

定义元素js代码

// 为当这个元素创建一个类classPopupInfoextendsHTMLElement{constructor(){// 必须首先调用 super 方法super();}connectedCallback(){// 创建影子根const shadow =this.attachShadow({mode:"open"});// 创建几个 spanconst wrapper = document.createElement("span");
    wrapper.setAttribute("class","wrapper");const icon = document.createElement("span");
    icon.setAttribute("class","icon");
    icon.setAttribute("tabindex",0);const info = document.createElement("span");
    info.setAttribute("class","info");// 获取属性内容然后将其放入 info 这个 span 内const text =this.getAttribute("data-text");
    info.textContent = text;// 插入图标let imgUrl;if(this.hasAttribute("img")){
      imgUrl =this.getAttribute("img");}else{
      imgUrl ="img/default.png";}const img = document.createElement("img");
    img.src = imgUrl;
    icon.appendChild(img);// 创建一些 CSS 应用于影子 DOMconst style = document.createElement("style");
    console.log(style.isConnected);

    style.textContent =`
      .wrapper {
        position: relative;
      }

      .info {
        font-size: 0.8rem;
        width: 200px;
        display: inline-block;
        border: 1px solid black;
        padding: 10px;
        background: white;
        border-radius: 10px;
        opacity: 0;
        transition: 0.6s all;
        position: absolute;
        top: 20px;
        left: 10px;
        z-index: 3;
      }

      img {
        width: 1.2rem;
      }

      .icon:hover + .info, .icon:focus + .info {
        opacity: 1;
      }
    `;// 将创建好的元素附加到影子 DOM 上
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);}}// 注册自定义元素
customElements.define("popup-info", PopupInfo);

在html中使用

<popup-infoimg="图片icon地址"data-text="悬浮显示的文字内容"></popup-info>

效果:
在这里插入图片描述

  • 定义自定义内置元素 目标:扩展内置的 <ul> 元素,以支持展开和折叠列表项。 定义js代码:
// 为这个元素创建类classExpandingListextendsHTMLUListElement{constructor(){// 必须首先调用 super 方法// super() 的返回值是对当前元素的引用
    self =super();}connectedCallback(){// 获取当前自定义 ul 元素的 ul 和 li 子元素// 包含 ul 的 li 元素可以成为容器const uls = Array.from(self.querySelectorAll("ul"));const lis = Array.from(self.querySelectorAll("li"));// 隐藏所有子 ul// 当用户点击更高级别的容器时,这些列表就会显示出来
    uls.forEach((ul)=>{
      ul.style.display ="none";});// 仔细观察每个在 ul 中的 li 元素
    lis.forEach((li)=>{// 如果这个 li 有一个 ul 作为子元素,则对其进行装饰并添加一个点击处理程序if(li.querySelectorAll("ul").length >0){// 添加一个属性,以便通过样式使用// 来显示打开或关闭的图标
        li.setAttribute("class","closed");// 将 li 元素的文本包裹在一个新的 span 元素中// 这样我们就可以将样式和事件处理程序分配给 spanconst childText = li.childNodes[0];const newSpan = document.createElement("span");// 从 li 复制文本到 span,设置光标样式
        newSpan.textContent = childText.textContent;
        newSpan.style.cursor ="pointer";// 为这个 span 添加事件处理程序
        newSpan.addEventListener("click",(e)=>{// span 的下一个兄弟元素应该是 ulconst nextul = e.target.nextElementSibling;// 切换可见状态并更新 ul 的 class 属性if(nextul.style.display =="block"){
            nextul.style.display ="none";
            nextul.parentNode.setAttribute("class","closed");}else{
            nextul.style.display ="block";
            nextul.parentNode.setAttribute("class","open");}});// 添加 span 并从 li 中移除纯文本节点
        childText.parentNode.insertBefore(newSpan, childText);
        childText.parentNode.removeChild(childText);}});}}//注册元素
customElements.define("expanding-list", ExpandingList,{extends:"ul"});

html使用:

<ul is="expanding-list"><li>
        列表1<ul is="expanding-list"><li>
            列表1的第一级子列表1-1<ul is="expanding-list"><li>
                列表1的第二级子列表1-1-1<ul is="expanding-list"><li>列表1的第三级子列表1-1-1-1</li><li>列表1的第三级子列表1-1-1-2</li></ul></li><li>列表1的第二级子列表1-1-2</li></ul></li><li>
            列表1的第一级子列表1-2<ul is="expanding-list"><li>列表1的第二级子列表1-2-1</li><li>列表1的第二级子列表1-2-2</li></ul></li></ul></li><li>列表2</li></ul>

效果:
在这里插入图片描述

使用影子Dom

影子DOM的作用:保护我们的自定义元素,防止因为在页面的js代码中修改自定义元素的实现而意外地破坏我们的自定义元素。
不设置影子Dom的时候我们自定义的元素就是赤裸裸的放在页面的Dom节点中,谁想修改就可以直接获取元素进行修改,这样很可能破坏我们的自定义元素。而使用影子Dom就可以将我们的自定义元素在页面的Dom中”隐藏“,从而达到保护的效果

影子Dom的原理示意图

影子 DOM 允许将

隐藏的 DOM 树

附加到

常规 DOM 树中的元素

上——这个影子 DOM 始于一个影子根,在其之下你可以用与普通 DOM 相同的方式附加任何元素。

在这里插入图片描述
其中隐藏的dom树是不能通过

document.querySelectorAll

获取的,需要使用

shadowRoot.querySelectorAll

获取,同时我们可以设置开关来控制是否能够通过

shadowRoot.querySelectorAll

获取到元素(mode参数的设置),从而外界无法随意获取改变元素的效果。
如果我们将自定义的元素放置在隐藏的dom树中就可以实现保护的效果。我们需要通过

影子Dom

将自定义的元素放置在隐藏的dom树。

几个概念

  • 影子宿主(Shadow host): 影子 DOM 附加到的常规 DOM 节点。
  • 影子树(Shadow tree): 影子 DOM 内部的 DOM 树。
  • 影子边界(Shadow boundary): 影子 DOM 终止,常规 DOM 开始的地方。
  • 影子根(Shadow root): 影子树的根节点。

创建一个影子Dom

我们先不讨论自定义元素的情况,先理解普通元素在隐藏dom树的情况。
创建影子Dom的语法:

影子宿主.attachShadow({ mode: "open" })

mode参数的作用:
当 mode 设置为

"open"

时,页面中的 JavaScript 可以通过影子宿主的

shadowRoot

属性访问影子 DOM 的内部。
当 mode 设置为

"closed"

时,页面中的 JavaScript 不能访问影子 DOM 的内部。

  • 下例中将id为host的元素设置为影子宿主创建影子Dom:
<body><divid="host"></div><span>I'm not in the shadow DOM</span></body><script>const host = document.querySelector("#host");const shadow = host.attachShadow({mode:"open"});const span = document.createElement("span");
    span.textContent ="I'm in the shadow DOM";//添加为影子dom节点
    shadow.appendChild(span);</script>

在这里插入图片描述

js隔离

影子Dom和标准Dom使用js获取节点的方式是不一样的,即js获取隔离。

  • 使用document获取元素是不会获取到影子dom上的节点的。 添加如下js代码
const spans = Array.from(document.querySelectorAll("span"));for(const span of spans){
    span.textContent = span.textContent.toUpperCase();}

效果是只有标准Dom中的span元素变成大写:
在这里插入图片描述

  • 使用shadowRoot可以获取到影子Dom上的节点 语法:影子宿主.shadowRoot.获取元素节点的方法() 添加如下js代码
const spans = Array.from(host.shadowRoot.querySelectorAll("span"));for(const span of spans){
   span.textContent = span.textContent.toUpperCase();}

效果是只有影子Dom中的span元素变成大写:
在这里插入图片描述

  • 阻止js获取影子Dom上的节点 创建影子Dom的时候只需要设置{mode: "closed"}就可以,此时shadowRoot返回null。

css隔离

页面中的style样式对影子Dom中的节点是不起作用的。

  • 页面中设置如下样式:
<style>span{color:rgb(173, 77, 77);border: 1px solid black;border-radius: 10px;background: black;padding: 2px 5px;}</style>

效果:
在这里插入图片描述

  • 可以使用编程式或声明式的方法为影子Dom添加样式- 编程式:通过构建一个 CSSStyleSheet 对象并将其附加到影子根。 创建一个空的 CSSStyleSheet 对象 使用 CSSStyleSheet.replace()CSSStyleSheet.replaceSync()设置其内容 通过将其赋给 ShadowRoot.adoptedStyleSheets来添加到影子根const sheet =newCSSStyleSheet();sheet.replaceSync("span { color: red; border: 2px dotted black;}");shadow.adoptedStyleSheets =[sheet];- 声明式 将一个影子Dom的 <style> 样式包含在 <template> 元素中添加到页面上。 然后将该 <template> 元素添加到影子Dom上。<body><templateid="my-element"><style>span{color: red;border: 2px dotted black;}</style></template></body><script>const template = document.getElementById("my-element"); shadow.appendChild(template.content);</script>

效果:
在这里插入图片描述

就像页面样式就像不会影响影子 DOM 中的元素一样,影子 DOM 样式也不会影响页面中其它元素的样式。

影子Dom和自定义元素

自定义元素结合使用影子Dom的优点:

  • 保护自定义元素不被破坏
  • 为自定义元素提供自己的样式空间

通常自定义元素本身是一个影子宿主,该元素在其根节点下创建多个元素以供元素的内部实现。

案例:创建一个绘制圆形的元素

<body><filled-circlecolor="#d46b6b"></filled-circle></body><script>classFilledCircleextendsHTMLElement{constructor(){super();}connectedCallback(){// 创建一个影子根// 自定义元素自身是影子宿主const shadow =this.attachShadow({mode:"open"});// 创建内部实现const svg = document.createElementNS("http://www.w3.org/2000/svg","svg");const circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
      circle.setAttribute("cx","50");
      circle.setAttribute("cy","50");
      circle.setAttribute("r","50");
      circle.setAttribute("fill",this.getAttribute("color"));
      svg.appendChild(circle);

      shadow.appendChild(svg);}}
  customElements.define("filled-circle", FilledCircle);</script>

在这里插入图片描述

补充: 影子根ShadowRoot的相关属性和方法

ShadowRoot的携带很多属性和方法,可以参见https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot

  • host: ShadowRoot.host,只读属性,返回对 ShadowRoot 所附加到的 DOM 元素的引用
  • mode: ShadowRoot.mode,只读属性,返回其模式打开或关闭。
  • activeElement : Shadow.activeElement 只读属性,返回影子树中具有焦点的元素

等。

使用html模板

之前我们定义自定义元素的时候都是在js中编写对应的元素标签,这样写无疑是比较麻烦的,我们希望可以直接在html模板中编写对应的标签和样式,然后自定义组件直接用html模板中的标签定义自己的元素。
常见的使用方法有

 <template>

<slot> 

元素

template标签实现自定义元素

利用template标签不在页面中展示的效果实现自定义元素。

<templateid="my-paragraph"><p>My paragraph</p></template>

上面的代码不会展示在你的页面中,除非使用 JavaScript 获取它,然后添加到 DOM 中,如下面的代码:

let template = document.getElementById("my-paragraph");let templateContent = template.content;
document.body.appendChild(templateContent);

因为template标签中的内容不会展示,自定义元素的时候就可以直接获取template标签中的内容使用,使用js将template标签的内容作为元素展示,并且不会影响其他内容的展示。

<body><templateid="my-paragraph"><style>p{color: white;background-color: #666;padding: 5px;}</style><p>My paragraph</p></template><my-paragraph></my-paragraph></body><script>
    customElements.define("my-paragraph",classextends HTMLElement {constructor(){super();//   编写元素内容,这里采取将元素内容编写在html总然后直接获取插入的方法let template = document.getElementById("my-paragraph");let templateContent = template.content;// 创建一个影子根const shadowRoot =this.attachShadow({mode:"open"});// 使用 Node.cloneNode() 方法添加了模板的拷贝到阴影的根结点上
          shadowRoot.appendChild(templateContent.cloneNode(true));}},);</script>

关键点是使用

Node.cloneNode()

方法添加了模板的拷贝到阴影的根结点上。
效果:
在这里插入图片描述

slots插槽实现自定义元素

slots插槽由其

name

属性标识,并且允许你在模板中定义

占位符

,当在标记中使用该元素时,该占位符可以填充所需的任何 HTML 标记片段。

  • 占位:
<p><slotname="my-text">My default text</slot></p>
  • 在标记中使用该元素
<my-paragraph><spanslot="my-text">Let's have some different text!</span></my-paragraph>
Let's have some different text!

会替换

My default text

显示。

  • 自定义标签使用slot插槽: 定义标签的时候slots插槽也需要依赖template标签实现,在template标签中使用slot插槽:
<body><templateid="my-paragraph"><style>p{color: white;background-color: #666;padding: 5px;}</style><p><slotname="my-text">My default text</slot></p></template><my-paragraph></my-paragraph><my-paragraph><spanslot="my-text">Let's have some different text!</span></my-paragraph><my-paragraph><ulslot="my-text"><li>Let's have some different text!</li><li>In a list!</li></ul></my-paragraph></body><script>
    customElements.define("my-paragraph",classextends HTMLElement {constructor(){super();//   编写元素内容,这里采取将元素内容编写在html总然后直接获取插入的方法let template = document.getElementById("my-paragraph");let templateContent = template.content;// 创建一个影子根const shadowRoot =this.attachShadow({mode:"open"});// 添加自定义元素到影子根
          shadowRoot.appendChild(templateContent.cloneNode(true));}});</script>

效果:
在这里插入图片描述

补充:插槽slot身上的属性和方法

详细参见: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement
属性:

  • name:插槽的名字

方法:

  • assign():将插槽的手动分配节点设置为一组有序的插槽表。
  • assignedElements():返回分配给该槽(而不是其他节点)的元素序列。

本文转载自: https://blog.csdn.net/mantou_riji/article/details/136216552
版权归原作者 _洋 所有, 如有侵权,请联系我们删除。

“Web Components(web组件)”的评论:

还没有评论