如何使用 Shadow DOM 和 Custom Elements 构建高质量的应用组件

前言

在现代 Web 应用程序中，组件化已经成为了一种流行的开发模式。Shadow DOM 和 Custom Elements 是两个 Web 标准，它们提供了一种简单而强大的方式来创建可重用的、高质量的 Web 组件。本文将介绍如何使用这两个标准来构建高质量的应用组件。

Shadow DOM

Shadow DOM 是一种 Web 标准，它允许将一个 DOM 子树封装在一个组件的内部，从而隔离组件的样式和行为，使组件更加可靠和可重用。Shadow DOM 中的 DOM 元素是私有的，外部无法访问，只能通过组件公开的 API 来控制组件的行为。

创建 Shadow DOM

要创建 Shadow DOM，首先需要创建一个 Shadow Root。Shadow Root 是一个 DOM 元素，它包含了被封装的子树。下面是一个简单的例子：

<div id="my-component"></div>

<script>
  const myComponent = document.querySelector('#my-component');
  const shadowRoot = myComponent.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = '<h1>Hello, World!</h1>';
</script>

在这个例子中，我们创建了一个 div 元素，并将它赋值给 myComponent 变量。然后，我们使用 attachShadow 方法创建了一个 Shadow Root，并将它赋值给 shadowRoot 变量。最后，我们使用 innerHTML 属性向 Shadow Root 中添加了一个 h1 元素。

样式隔离

Shadow DOM 的一个重要特性是样式隔离。Shadow DOM 中的样式只会影响 Shadow DOM 内部的元素，不会影响外部的元素。这使得组件更加可靠和可重用，因为它们不会受到外部样式的影响。

要在 Shadow DOM 中定义样式，可以使用 style 标签或 link 标签。下面是一个例子：

// www.javascriptcn.com code example
<div id="my-component"></div>

<script>
  const myComponent = document.querySelector('#my-component');
  const shadowRoot = myComponent.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>
      h1 {
        color: red;
      }
    </style>
    <h1>Hello, World!</h1>
  `;
</script>

在这个例子中，我们使用 style 标签定义了一个样式，它只会影响 Shadow DOM 内部的 h1 元素。

插槽

插槽是 Shadow DOM 的另一个重要特性，它允许将父组件中的内容插入到子组件中。插槽可以让组件更加灵活和可重用。

要使用插槽，需要在 Shadow DOM 中定义一个 slot 元素。下面是一个例子：

// www.javascriptcn.com code example
<!-- 父组件 -->
<my-component>
  <p slot="content">Hello, World!</p>
</my-component>

<!-- 子组件 -->
<div id="my-component"></div>

<script>
  const myComponent = document.querySelector('#my-component');
  const shadowRoot = myComponent.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <div>
      <h1>My Component</h1>
      <slot name="content"></slot>
    </div>
  `;
</script>

在这个例子中，我们创建了一个父组件和一个子组件。父组件中包含了一个插槽，它的名字是 content。子组件中定义了一个 slot 元素，它的名字也是 content。当父组件被渲染时，插槽中的内容会被插入到子组件中的 slot 元素中。

Custom Elements

Custom Elements 是另一个 Web 标准，它允许开发人员创建自定义的 HTML 元素。自定义元素可以像普通 HTML 元素一样使用，并且可以拥有自己的行为和样式。

创建 Custom Elements

要创建 Custom Elements，需要使用 CustomElementRegistry.define 方法。这个方法接受两个参数：元素名称和元素类。下面是一个例子：

// www.javascriptcn.com code example
<div is="my-component"></div>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = '<h1>Hello, World!</h1>';
    }
  }
  customElements.define('my-component', MyComponent);
</script>

在这个例子中，我们创建了一个名为 my-component 的自定义元素，并将它赋值给一个 div 元素的 is 属性。然后，我们定义了一个 MyComponent 类，它继承自 HTMLElement 类。在 MyComponent 类的构造函数中，我们创建了一个 Shadow Root，并将它赋值给 shadowRoot 变量。最后，我们使用 customElements.define 方法将 MyComponent 类注册为 my-component 元素。

生命周期方法

Custom Elements 有一些生命周期方法，可以让开发人员在元素的不同生命周期阶段执行一些操作。下面是一些常用的生命周期方法：

• connectedCallback：当元素被插入到文档中时调用。
• disconnectedCallback：当元素从文档中移除时调用。
• adoptedCallback：当元素被移动到一个新的文档时调用。
• attributeChangedCallback：当元素的一个属性被添加、移除或更改时调用。

下面是一个例子：

// www.javascriptcn.com code example
<div is="my-component" title="Hello"></div>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = '<h1>Hello, World!</h1>';
    }

    connectedCallback() {
      console.log('Connected');
    }

    disconnectedCallback() {
      console.log('Disconnected');
    }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log(`Attribute changed: ${name}=${newValue}`);
    }

    static get observedAttributes() {
      return ['title'];
    }
  }
  customElements.define('my-component', MyComponent);
</script>

在这个例子中，我们定义了一个 MyComponent 类，并实现了 connectedCallback、disconnectedCallback、attributeChangedCallback 和 observedAttributes 方法。当元素被插入到文档中时，connectedCallback 方法会被调用，并输出 Connected。当元素从文档中移除时，disconnectedCallback 方法会被调用，并输出 Disconnected。当元素的 title 属性被更改时，attributeChangedCallback 方法会被调用，并输出 Attribute changed: title=xxx。observedAttributes 方法返回了一个数组，其中包含了要观察的属性名称。

构建高质量的应用组件

使用 Shadow DOM 和 Custom Elements 可以构建高质量的应用组件，以下是一些最佳实践：

• 将样式和行为封装在 Shadow DOM 中，以提高组件的可靠性和可重用性。
• 使用插槽来实现组件的灵活性和可重用性。
• 实现生命周期方法来处理元素的不同生命周期阶段。
• 使用 Web 组件库来加速开发过程，例如 Polymer、LitElement、Stencil 等。

示例代码

下面是一个完整的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <my-component title="Hello"></my-component>

    <script>
      class MyComponent extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.innerHTML = `
            <style>
              h1 {
                color: red;
              }
            </style>
            <div>
              <h1>My Component</h1>
              <slot name="content"></slot>
            </div>
          `;
        }

        connectedCallback() {
          console.log('Connected');
        }

        disconnectedCallback() {
          console.log('Disconnected');
        }

        attributeChangedCallback(name, oldValue, newValue) {
          console.log(`Attribute changed: ${name}=${newValue}`);
        }

        static get observedAttributes() {
          return ['title'];
        }
      }
      customElements.define('my-component', MyComponent);
    </script>
  </body>
</html>

在这个示例中，我们创建了一个 MyComponent 类，它继承自 HTMLElement 类。在 MyComponent 类的构造函数中，我们创建了一个 Shadow Root，并将样式和内容添加到其中。我们还实现了 connectedCallback、disconnectedCallback、attributeChangedCallback 和 observedAttributes 方法，以处理元素的不同生命周期阶段。最后，我们使用 customElements.define 方法将 MyComponent 类注册为 my-component 元素，并在 HTML 中使用它。

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