Web Components 是一个用于创建可重用组件的规范。它由 Custom Elements、Shadow DOM 和 HTML Templates 三部分组成。其中 Custom Elements 和 Shadow DOM 是 Web Components 中最常用的两个部分。它们可以帮助我们更好地封装和隔离组件的样式和行为，并提高组件的可重用性和可维护性。但是 Custom Elements 和 Shadow DOM 有些不同，本文将详细介绍它们的区别以及如何正确使用它们。
Custom Elements
Custom Elements 允许我们创建自定义的 HTML 元素。这些元素可以拥有自己的属性、方法和事件，就像普通的 HTML 元素一样。我们可以将它们用作组件，并在页面上使用。以下是 Custom Elements 的基本语法：
class MyButton extends HTMLElement {
constructor() {
super();
this.textContent = 'My Button';
}
}
customElements.define('my-button', MyButton);上面的代码定义了一个名为 my-button 的自定义元素，并将其实现为一个继承自 HTMLElement 的类。在 constructor 中我们可以设置元素的默认文本内容。最后一行代码使用 customElements.define 方法将自定义元素注册到文档中。
使用自定义元素时，我们可以在 HTML 中直接使用它们：
<my-button></my-button>
Shadow DOM
Shadow DOM 允许我们创建一个独立的 DOM 树，它与页面的主 DOM 树相互独立，不会彼此影响。这意味着我们可以在 Shadow DOM 中对样式和行为进行封装，不用担心影响到页面中的其他元素。Shadow DOM 的基本语法如下：
const shadowRoot = this.attachShadow({ mode: 'open' });上面的代码创建了一个名为 shadowRoot 的 Shadow DOM，它与当前元素相关联，并设置了 mode 参数为 open，表示可以从外部访问 Shadow DOM。
我们可以在 Shadow DOM 中通过 innerHTML 或 appendChild 等方法添加子元素和内容：
const shadowRoot = this.attachShadow({ mode: 'open' });
const div = document.createElement('div');
div.textContent = 'Hello, Shadow DOM!';
shadowRoot.appendChild(div);在页面结构中使用 Shadow DOM 元素的方法与普通元素类似：
<my-button> <p slot="content">Hello, World!</p> </my-button>
上面的代码为自定义元素 my-button 添加了一个子元素，并使用 slot 属性命名了这个位置。
Custom Elements 和 Shadow DOM 的结合使用
Custom Elements 和 Shadow DOM 可以很好地结合使用，使我们能够实现更高级的组件。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- -------------
-------- --- -----
---------- -----
-------------- ----
------ -----
----------------- --------
-
--------
----- ----------------------
--
-
-
---------------------------------- ----------上面的代码定义了一个自定义元素 my-button，它拥有一个 shadowRoot，并在 shadowRoot 中定义了一个 CSS 样式和一个 slot 区域。这个 slot 区域是用来放置 my-button 内部的内容的。我们可以在使用 my-button 的时候，向 slot 区域中插入内容：
<my-button> <p slot="content">Hello, World!</p> </my-button>
通过这种方式，我们可以将样式和行为封装在 my-button 内部，而不会影响到页面上其他元素，从而实现更加高效和可重用的组件。
总结
Custom Elements 和 Shadow DOM 是 Web Components 中最常用的两个部分，它们可以帮助我们更好地封装和隔离组件的样式和行为，并提高组件的可重用性和可维护性。在实际使用中，我们应该合理地选择它们的结合方式，以达到最好的组件效果。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -------- --- ------ -----------
-------
------
-----------
-- --------------------- ----------
------------
--------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- -------------
-------- --- -----
---------- -----
-------------- ----
------ -----
----------------- --------
-
--------
----- ----------------------
--
-
-
---------------------------------- ----------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1f73848841e9894e3bf4b