Web Components 是一种可以创建自定义 HTML 元素和组件的技术，由三个主要技术构成：Custom Elements、Shadow DOM 和 HTML Templates。
在本文中，我们将重点介绍 Custom Elements 和 Shadow DOM 两个技术的使用方法和指导意义。
Custom Elements
Custom Elements 允许开发者定义自己的 HTML 元素，这些元素在 HTML 中和原生 HTML 元素一样被解析并展示。
定义 Custom Elements
定义 Custom Elements 很简单，只需要使用 window.customElements.define 方法即可。
下面是一个定义一个自定义元素的例子：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------- - ------- --------
-
-
------------------------------------------ -----------这个例子中，我们定义了一个 MyElement 类，它继承自 HTMLElement。我们实现了它的 connectedCallback 方法，在元素被插入到文档中时自动调用，将其内部的 textContent 设置为 'Hello, World!'。
最后，我们调用了 window.customElements.define('my-element', MyElement) 方法，将这个自定义元素注册到浏览器中。
使用 Custom Elements
使用 Custom Elements 就像使用普通的 HTML 元素一样，我们只需要在 HTML 中用自定义元素的名字替换掉原生元素的名字即可。
例如，使用上面定义的 my-element：
<my-element></my-element>
这样，就会在页面中展示出我们定义的自定义元素了。
拓展 Custom Elements
我们也可以通过继承自其他 Custom Elements 来拓展自己的元素。
class MyElement extends OtherElement {
// ...
}这样，我们就可以使用原有的 Custom Elements 的功能，并拓展出自己的功能。
Shadow DOM
Shadow DOM 允许我们创建一组私有的 DOM 节点和样式信息，这些节点和样式不会影响到外部的 DOM 节点和样式。这对创建自定义组件非常有用，因为它可以避免组件和外部环境发生样式和节点冲突。
创建 Shadow DOM
我们可以在 Custom Element 的构造函数中创建一个 Shadow DOM。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- - - ----------------------------
------------- - ----- -- - ------ -----
--------------------------
-
-
------------------------------------------ -----------在 constructor 中，我们使用 this.attachShadow({ mode: 'open' }) 创建一个开放式的 Shadow DOM，并将它赋值给 shadowRoot。然后，我们通过 document.createElement('p') 创建了一个 <p> 元素，并将它添加到 Shadow DOM 中。
使用 Shadow DOM
使用 Shadow DOM 的元素和普通的 HTML 元素一样使用：
<my-element></my-element>
当元素被插入到文档中时，它会自动展示出 Shadow DOM 中的内容。
封装样式和行为
使用 Shadow DOM，我们可以封装自定义元素的样式和行为。
例如：
-- -------------------- ---- -------
--------- ----------------
-------
- -
------ ----
-
--------
----- -----------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - --------------------------------------
----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------
---------------------------------
-
-
------------------------------------------ -----------
---------在上述例子中，我们在 <template> 标签中定义了样式和 HTML 内容，并将其保存在 template 变量中。然后，我们在元素的 constructor 中创建了 Shadow DOM，并将 template 中的内容添加到其中。
这样，我们就可以封装我们自定义元素的样式和行为，避免和其他元素发生样式冲突。
总结
Web Components 是一种非常有用的技术，它允许我们定义自己的 HTML 元素和组件，同时利用 Shadow DOM 封装这些元素和组件的样式和行为。这样，我们可以避免样式和节点冲突，提高组件的可维护性。
在实践中，我们需要注意 Custom Elements 和 Shadow DOM 的使用方法，并设计好自定义元素的样式和行为。我们希望本文可以帮助读者更好地使用 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fac0e7f6b2d6eab31911eb