Web Components 自定义元素和 shadow DOM 使用详解-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一种可以创建自定义 HTML 元素和组件的技术，由三个主要技术构成：Custom Elements、Shadow DOM 和 HTML Templates。

在本文中，我们将重点介绍 Custom Elements 和 Shadow DOM 两个技术的使用方法和指导意义。

Custom Elements

Custom Elements 允许开发者定义自己的 HTML 元素，这些元素在 HTML 中和原生 HTML 元素一样被解析并展示。

定义 Custom Elements

定义 Custom Elements 很简单，只需要使用 window.customElements.define 方法即可。

下面是一个定义一个自定义元素的例子：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }
}

window.customElements.define('my-element', MyElement);

这个例子中，我们定义了一个 MyElement 类，它继承自 HTMLElement。我们实现了它的 connectedCallback 方法，在元素被插入到文档中时自动调用，将其内部的 textContent 设置为 'Hello, World!'。

最后，我们调用了 window.customElements.define('my-element', MyElement) 方法，将这个自定义元素注册到浏览器中。

使用 Custom Elements

使用 Custom Elements 就像使用普通的 HTML 元素一样，我们只需要在 HTML 中用自定义元素的名字替换掉原生元素的名字即可。

例如，使用上面定义的 my-element：

<my-element></my-element>

这样，就会在页面中展示出我们定义的自定义元素了。

拓展 Custom Elements

我们也可以通过继承自其他 Custom Elements 来拓展自己的元素。

class MyElement extends OtherElement {
  // ...
}

这样，我们就可以使用原有的 Custom Elements 的功能，并拓展出自己的功能。

Shadow DOM

Shadow DOM 允许我们创建一组私有的 DOM 节点和样式信息，这些节点和样式不会影响到外部的 DOM 节点和样式。这对创建自定义组件非常有用，因为它可以避免组件和外部环境发生样式和节点冲突。

创建 Shadow DOM

我们可以在 Custom Element 的构造函数中创建一个 Shadow DOM。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });
    const p = document.createElement('p');
    p.textContent = 'This is a shadow DOM';
    shadowRoot.appendChild(p);
  }
}

window.customElements.define('my-element', MyElement);

在 constructor 中，我们使用 this.attachShadow({ mode: 'open' }) 创建一个开放式的 Shadow DOM，并将它赋值给 shadowRoot。然后，我们通过 document.createElement('p') 创建了一个 <p> 元素，并将它添加到 Shadow DOM 中。

使用 Shadow DOM

使用 Shadow DOM 的元素和普通的 HTML 元素一样使用：

<my-element></my-element>

当元素被插入到文档中时，它会自动展示出 Shadow DOM 中的内容。

封装样式和行为

使用 Shadow DOM，我们可以封装自定义元素的样式和行为。

例如：

// javascriptcn.com 代码示例
<template id="my-element">
  <style>
    p {
      color: red;
    }
  </style>
  <p>My element</p>
</template>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      const template = document.querySelector('#my-element');
      const shadowRoot = this.attachShadow({ mode: 'open' });
      const instance = template.content.cloneNode(true);
      shadowRoot.appendChild(instance);
    }
  }

  window.customElements.define('my-element', MyElement);
</script>

在上述例子中，我们在 <template> 标签中定义了样式和 HTML 内容，并将其保存在 template 变量中。然后，我们在元素的 constructor 中创建了 Shadow DOM，并将 template 中的内容添加到其中。

这样，我们就可以封装我们自定义元素的样式和行为，避免和其他元素发生样式冲突。

总结

Web Components 是一种非常有用的技术，它允许我们定义自己的 HTML 元素和组件，同时利用 Shadow DOM 封装这些元素和组件的样式和行为。这样，我们可以避免样式和节点冲突，提高组件的可维护性。

在实践中，我们需要注意 Custom Elements 和 Shadow DOM 的使用方法，并设计好自定义元素的样式和行为。我们希望本文可以帮助读者更好地使用 Web Components。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fac0e7f6b2d6eab31911eb