Custom Elements 与 Shadow DOM 的联系和区别

在前端开发中，Custom Elements 和 Shadow DOM 是两个常用的概念，它们可以帮助我们更好地组织和管理页面中的元素。然而，它们之间的联系和区别却是让人头疼的问题。本文将详细介绍它们之间的关系，并给出一些实用的示例代码。

Custom Elements

Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素。通过定义自己的元素，我们可以将复杂的页面结构拆分成更小的组件，以便更好地重用和维护。Custom Elements 的定义方式如下：

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

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

上面的代码定义了一个名为 my-element 的自定义元素。我们可以在页面中使用它，就像使用普通的 HTML 元素一样：

<my-element></my-element>

Custom Elements 可以通过继承 HTMLElement 类来实现，它具有所有 HTML 元素的特性。我们可以通过在 constructor 方法中添加属性和方法来扩展它们。例如，我们可以添加一个 name 属性：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.name = 'World';
  }
}

在页面中使用时，我们可以设置这个属性：

<my-element name="Alice"></my-element>

Shadow DOM

Shadow DOM 是另一个 Web Components 的核心概念，它允许开发者创建独立的 DOM 树，以便更好地封装和隔离元素。通过使用 Shadow DOM，我们可以避免样式和 JavaScript 的冲突，从而提高代码的可维护性和扩展性。Shadow DOM 的创建方式如下：

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

上面的代码创建了一个 Shadow DOM，它包含一个 h1 标签。我们可以在页面中使用这个元素：

<my-element></my-element>

在页面中，这个元素看起来像这样：

<my-element>
  #shadow-root
    <h1>Hello, world!</h1>
</my-element>

注意到 #shadow-root 这个标记了 Shadow DOM 的位置。我们可以在 Shadow DOM 中添加任意的 HTML 元素和样式，它们不会影响到页面中的其他元素。

Custom Elements 和 Shadow DOM 的联系

Custom Elements 和 Shadow DOM 有很多联系，它们之间的关系可以用下面这张图来表示：

// www.javascriptcn.com code example
+------------------+                 +------------------+
| Custom Elements  | --------------> | Shadow DOM       |
+------------------+                 +------------------+
|                  |                 |                  |
| +--------------+ |    +--------+   | +--------------+ |
| | HTMLElement  | |    | DOM    |   | | CSS          | |
| +--------------+ |    | Tree   |   | | Encapsulation| |
| | Properties   | |    |        |   | | and Scoping  | |
| | Methods      | |    |        |   | |              | |
| | Events       | |    |        |   | |              | |
| +--------------+ |    +--------+   | +--------------+ |
|                  |                 |                  |
+------------------+                 +------------------+

Custom Elements 继承自 HTMLElement，它们可以通过 Shadow DOM 来实现样式和行为的封装和隔离。Shadow DOM 充当了 Custom Elements 的内部实现，它们之间的通信和交互可以通过 Custom Elements 的属性和方法来实现。

Custom Elements 和 Shadow DOM 的区别

尽管 Custom Elements 和 Shadow DOM 有很多联系，但它们之间也有一些区别。下面是它们之间的主要区别：

1. Custom Elements 允许开发者自定义 HTML 元素，而 Shadow DOM 则允许开发者创建独立的 DOM 树。
2. Custom Elements 可以通过继承 HTMLElement 类来实现，它们可以具有所有 HTML 元素的特性。Shadow DOM 则需要使用 attachShadow 方法来创建，它们允许开发者在内部实现中使用自定义的 HTML 元素和样式。
3. Custom Elements 和 Shadow DOM 通常一起使用，它们可以形成一个完整的 Web Components。Custom Elements 提供了对外的接口，Shadow DOM 则提供了对内的实现。

示例代码

下面是一个使用 Custom Elements 和 Shadow DOM 的示例代码：

// www.javascriptcn.com code example
class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    const button = document.createElement('button');
    button.innerText = this.getAttribute('label') || 'Click me!';
    button.addEventListener('click', this.onClick.bind(this));
    shadowRoot.appendChild(button);
  }

  onClick() {
    const event = new CustomEvent('my-click', { bubbles: true });
    this.dispatchEvent(event);
  }
}

customElements.define('my-button', MyButton);

上面的代码定义了一个名为 my-button 的自定义元素，它包含一个按钮和一个 my-click 事件。我们可以在页面中使用这个元素：

<my-button label="Hello, world!"></my-button>

在页面中，这个元素看起来像这样：

<my-button>
  #shadow-root
    <button>Hello, world!</button>
</my-button>

我们也可以监听 my-click 事件：

const button = document.querySelector('my-button');
button.addEventListener('my-click', () => {
  console.log('Button clicked!');
});

上面的代码将在按钮被点击时输出 Button clicked!。这个示例演示了 Custom Elements 和 Shadow DOM 的使用方法，它可以帮助我们更好地组织和管理页面中的元素。

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