Custom Elements 与 Shadow DOM：开发自我封装组件的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，封装组件已经成为了一个不可或缺的部分。这样做可以提高代码的可重用性和可维护性，同时也可以提升开发效率。Custom Elements 和 Shadow DOM 是两种 Web 标准，它们可以帮助我们更好地封装组件。本文将介绍 Custom Elements 和 Shadow DOM 的基本概念和用法，并提供一些最佳实践和示例代码。

Custom Elements

Custom Elements 是 Web 标准的一部分，它可以让开发者创建自定义的 HTML 元素。这些元素可以像普通的 HTML 元素一样使用，并且可以包含自己的行为和样式。Custom Elements 的 API 由两个部分组成：CustomElementRegistry 和 HTMLElement。

CustomElementRegistry

CustomElementRegistry 是一个全局的对象，它用于注册和管理自定义元素。它提供了以下方法：

define(name, constructor, options)：定义一个自定义元素。
- name：自定义元素的名称。
- constructor：自定义元素的构造函数。
- options：可选参数，用于指定自定义元素的继承关系等。
get(name)：获取指定名称的自定义元素。
whenDefined(name)：返回一个 Promise，该 Promise 在指定名称的自定义元素被定义时解析。

HTMLElement

HTMLElement 是一个原型对象，它用于定义自定义元素的行为和样式。开发者可以通过继承 HTMLElement 来创建自己的自定义元素。例如：

// www.javascriptcn.com code example
class MyElement extends HTMLElement {
  constructor() {
    super();

    // 在构造函数中可以初始化元素的状态
    this.state = { count: 0 };

    // 在构造函数中可以绑定元素的方法
    this.handleClick = this.handleClick.bind(this);
  }

  connectedCallback() {
    // 当元素被插入到文档中时会调用该方法
    this.render();
    this.addEventListener('click', this.handleClick);
  }

  disconnectedCallback() {
    // 当元素从文档中移除时会调用该方法
    this.removeEventListener('click', this.handleClick);
  }

  handleClick() {
    // 处理元素的交互行为
    this.state.count++;
    this.render();
  }

  render() {
    // 渲染元素的内容和样式
    this.innerHTML = `
      <div>Count: ${this.state.count}</div>
    `;
  }
}

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

在上面的示例中，我们定义了一个名为 my-element 的自定义元素，它继承自 HTMLElement。在构造函数中，我们初始化了元素的状态和绑定了元素的方法。在 connectedCallback 方法中，我们渲染了元素的内容和样式，并绑定了元素的交互行为。在 disconnectedCallback 方法中，我们解绑了元素的交互行为。

Shadow DOM

Shadow DOM 是 Web 标准的另一部分，它可以让开发者创建独立的 DOM 树，并将其附加到文档中的元素上。这样做可以避免全局 CSS 样式的污染，并且可以更好地封装组件。Shadow DOM 的 API 由两个部分组成：Element 和 ShadowRoot。

Element

Element 是一个原型对象，它用于定义具有 Shadow DOM 的元素。开发者可以通过继承 Element 来创建自己的具有 Shadow DOM 的元素。例如：

// www.javascriptcn.com code example
class MyElement extends Element {
  constructor() {
    super();

    // 在构造函数中可以初始化元素的状态
    this.state = { count: 0 };

    // 在构造函数中可以绑定元素的方法
    this.handleClick = this.handleClick.bind(this);

    // 在构造函数中创建 Shadow DOM
    const shadowRoot = this.attachShadow({ mode: 'open' });

    // 在 Shadow DOM 中创建元素的内容和样式
    const container = document.createElement('div');
    container.innerHTML = `
      <style>
        div {
          color: red;
        }
      </style>
      <div>Count: ${this.state.count}</div>
    `;

    // 将 Shadow DOM 附加到元素上
    shadowRoot.appendChild(container);
  }

  connectedCallback() {
    // 当元素被插入到文档中时会调用该方法
    this.addEventListener('click', this.handleClick);
  }

  disconnectedCallback() {
    // 当元素从文档中移除时会调用该方法
    this.removeEventListener('click', this.handleClick);
  }

  handleClick() {
    // 处理元素的交互行为
    this.state.count++;
    this.render();
  }

  render() {
    // 更新 Shadow DOM 中元素的内容和样式
    const container = this.shadowRoot.querySelector('div');
    container.innerHTML = `
      Count: ${this.state.count}
    `;
  }
}

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

在上面的示例中，我们定义了一个名为 my-element 的具有 Shadow DOM 的元素，它继承自 Element。在构造函数中，我们初始化了元素的状态和绑定了元素的方法，并创建了 Shadow DOM。在 Shadow DOM 中，我们创建了元素的内容和样式，并将其附加到 Shadow DOM 上。在 connectedCallback 方法中，我们绑定了元素的交互行为。在 disconnectedCallback 方法中，我们解绑了元素的交互行为。在 render 方法中，我们更新了 Shadow DOM 中元素的内容和样式。

最佳实践

在使用 Custom Elements 和 Shadow DOM 开发自我封装组件时，我们需要遵循一些最佳实践：

尽量使用 ES6 的类来定义自定义元素，这样可以使代码更加清晰和易于维护。
在构造函数中初始化元素的状态和绑定元素的方法。
在 connectedCallback 方法中渲染元素的内容和样式，并绑定元素的交互行为。
在 disconnectedCallback 方法中解绑元素的交互行为。
尽量使用 Shadow DOM 来封装组件的样式，避免全局 CSS 样式的污染。
在 Shadow DOM 中使用 CSS 变量来定义样式，这样可以方便地修改样式。
在 Shadow DOM 中使用 slot 来插入内容，这样可以使组件更加灵活。

示例代码

下面是一个使用 Custom Elements 和 Shadow DOM 开发自我封装组件的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Custom Elements 和 Shadow DOM 示例</title>
</head>
<body>
  <my-element></my-element>

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

        this.state = { count: 0 };
        this.handleClick = this.handleClick.bind(this);

        const shadowRoot = this.attachShadow({ mode: 'open' });

        const container = document.createElement('div');
        container.innerHTML = `
          <style>
            div {
              color: var(--text-color, red);
            }
          </style>
          <div>Count: ${this.state.count}</div>
          <slot></slot>
        `;

        shadowRoot.appendChild(container);
      }

      connectedCallback() {
        this.render();
        this.addEventListener('click', this.handleClick);
      }

      disconnectedCallback() {
        this.removeEventListener('click', this.handleClick);
      }

      handleClick() {
        this.state.count++;
        this.render();
      }

      render() {
        const container = this.shadowRoot.querySelector('div');
        container.innerHTML = `
          Count: ${this.state.count}
          <slot></slot>
        `;
      }
    }

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

在上面的示例中，我们定义了一个名为 my-element 的自定义元素，并使用 Shadow DOM 来封装组件的样式。在元素的 Shadow DOM 中，我们使用 CSS 变量来定义样式，并使用 slot 来插入内容。在元素的 JavaScript 代码中，我们初始化了元素的状态和绑定了元素的方法，并在 connectedCallback 方法中渲染了元素的内容和样式，并绑定了元素的交互行为。在 disconnectedCallback 方法中解绑了元素的交互行为。在 handleClick 方法中处理了元素的交互行为。在 render 方法中更新了 Shadow DOM 中元素的内容和样式。

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

Custom Elements 与 Shadow DOM：开发自我封装组件的最佳实践