初学者教程：Web Components 和 Shadow DOM

Web Components 是一种为网页开发提供可重用、可扩展的组件的技术。在 Web 开发中，使用 Web Components 可以达到组件化、模块化、代码重用等目标，大幅提升开发效率和可维护性。本篇文章将介绍 Web Components 和其中的一个重要概念 - Shadow DOM。

Web Components 的组成部分

Web Components 标准包含四个主要的技术：

1. 定义自定义元素的 Custom Elements；
2. 实现模板功能的 HTML Templates；
3. 提供不与全局样式冲突的局部样式机制 Shadow DOM；
4. 将组件的功能和外观封装进 JavaScript 模块。

在本篇文章中，我们将重点介绍 Shadow DOM。

Shadow DOM

Shadow DOM 是 Web Components 的一个重要概念，是通过将一个元素的子树、样式和行为隐藏在一个封闭的、隔离的原生 Web Component 中，使其不受外部 CSS 和 JavaScript 的影响，可以自行维护和渲染，从而实现样式隔离、DOM 封装等功能。

Shadow DOM 分为两类：

1. open：可以通过 JavaScript 获取并操作其中的节点和样式；
2. closed：不允许外部的 JavaScript 访问。

创建 Shadow DOM

使用 Web Components，可以通过 JavaScript 创建 Shadow DOM，并将其挂载到自定义元素上。

<div>
  <h2>外部 DOM</h2>
  <my-custom-element></my-custom-element>
</div>

// javascriptcn.com 代码示例
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    
    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });
    
    // 创建一个包含样式和内容的 div
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <style>
        h2 {
          color: red;
        }
      </style>
      <h2>Shadow DOM 中的标题</h2>
      <p>Shadow DOM 中的段落</p>
    `;
    
    // 将 div 添加到 Shadow DOM 中
    shadow.appendChild(wrapper);
  }
}

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

如上代码所示，我们创建了 MyCustomElement 类并继承 HTMLElement，然后在 constructor 方法中调用 attachShadow 方法创建了一个 mode 为 open 的 Shadow DOM，接着创建了一个内部 div，并给这个 div 添加样式和内容，最后将该 div 的节点添加到 Shadow DOM 中。此时 MyCustomElement 就是一个带有 Shadow DOM 的自定义元素了。

样式隔离

在 Web Components 中，每个组件的样式和行为都是相互独立的，可以避免 CSS 选择器的冲突和命名空间的混乱问题。由于 Shadow DOM 的封闭特性，组件的样式不会影响外部样式，而外部样式也无法影响到组件的样式。

DOM 封装

使用 Shadow DOM 可以将组件的子元素封装在一个局部的、私有的 DOM 中，避免外部对组件的 DOM 结构进行操作。因此，使用 Web Components 可以使开发者更加安全地扩展和修改元素，而不会对应用程序中的其余部分造成不良影响。

总结

Shadow DOM 是 Web Components 的一个重要概念，用于实现样式隔离和 DOM 封装等功能，以便于组件化、模块化和代码重用等目标的实现。初学者可以利用 Web Components 和 Shadow DOM 增加自己的技能和能力，促进 Web 开发的进一步发展和创新。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b533b7d4982a6eb5364f8