概述
Web Components 是一组可以使开发者更加轻松地开发自定义 HTML 元素的技术标准，其由 Shadow DOM、Custom Elements 和 HTML Templates 组成。在传统 Web 应用中，HTML 元素的样式和行为是由浏览器或库提供的，而 Web Components 允许开发者自定义元素的样式和行为。
本文将详细介绍 Web Components 的三个技术标准，并通过实例演示如何使用它们。这篇文章适合于有一定前端开发经验的开发者，希望了解如何通过 Web Components 创建自定义 HTML 元素。
Shadow DOM
Shadow DOM 是将 HTML 元素的样式和行为封装到 Shadow DOM 树中，使其不会受到外部 CSS 影响的技术标准。我们可以通过附加 Shadow DOM 树，来创建一组自定义的 HTML 元素和相应的样式和行为。
创建 Shadow DOM
在创建 Shadow DOM 树之前，我们需要先创建一个 Host 元素，Host 元素就是 WebComponents 的根元素，作为其他 Shadow DOM 元素的父容器。
const hostElement = document.createElement('div');
document.body.appendChild(hostElement);现在，我们可以使用 attachShadow 方法，将 Shadow DOM 树附加到 Host 元素上。
const shadowRoot = hostElement.attachShadow({mode: 'open'});在 attachShadow 方法中传递的 mode 参数，可以使 Shadow DOM 开放，即可以在外部访问。
现在，我们可以在 Shadow DOM 树中创建自己的 DOM 元素。
const paragraphElement = document.createElement('p');
paragraphElement.textContent = 'Hello, World!';
shadowRoot.appendChild(paragraphElement);样式隔离
Shadow DOM 可以隔离与 DOM 树无关的样式，并提供一组可预测和封装的样式。
例如，在 Shadow DOM 中使用样式表，只会影响 Shadow DOM 中的元素。
-- -------------------- ---- ------- ------- - - ------ ---- - -------- ----------- -------- ----- ----------- - ------------------------------ ----- ---------- - ------------------------------- --------- ----- ------------ - -------------------------------- ------------------------ - -- - ------ ----- --- ------------------------------------- ----- ---------------- - ---------------------------- ---------------------------- - ------- -------- ----------------------------------------- ---------
在此示例中，Shadow DOM 中的段落元素（<p>）将是蓝色的，而页面中其他段落元素仍将保持为红色。
Custom Elements
Custom Elements 是一种 Web Components 技术，它允许开发者自定义 HTML 元素。Custom Elements 可以像传统 HTML 元素一样被使用，并与标准的 DOM API 集成。
创建 Custom Element
在创建 Custom Element 之前，我们需要定义 HTMLElement 子类，该子类继承 HTMLElement，并定义其行为。构造函数被用来定义元素的初始状态。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ---------------- - ----------------------------
---------------------------- - ------- --------
-----------------------------------------
-
-现在我们可以使用 customElements.define 方法，将 MyParagraph 元素定义为自定义元素。
customElements.define('my-paragraph', MyParagraph);此时，我们就可以像使用传统 HTML 元素一样，使用自定义的元素了。
<my-paragraph></my-paragraph>
属性和方法
Custom Elements 除了定义元素的初始状态之外，还可以定义元素的属性和方法。
Properties
首先，我们定义一个 name 属性，当该属性被设置时，会被反映到 Shadow DOM 中的段落元素上。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ---------------- - ----------------------------
---------------------------- - ------- --------
-----------------------------------------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
----- ---------------- - -----------------------------------
---------------------------- - ------- -----------
-
-现在我们可以使用 my-paragraph 元素的 name 属性设置元素的名称。
<my-paragraph name="Web Components"></my-paragraph>
Methods
除了属性之外，我们还可以定义元素的方法。在下面的示例中，我们将添加一个 logName 方法，该方法将会记录元素的名称。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ---------------- - ----------------------------
---------------------------- - ------- --------
-----------------------------------------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
----- ---------------- - -----------------------------------
---------------------------- - ------- -----------
-
--------- -
-----------------------
-
-现在我们可以使用 my-paragraph 元素的 logName 方法，记录其名称。
const element = document.querySelector('my-paragraph');
element.logName();总结
在本文中，我们已经深入了解了 Web Components 及其由 Shadow DOM、Custom Elements 和 HTML Templates 组成的三项技术标准。我们创建了自定义的 HTML 元素，并在其中定义了属性和方法。总之，Web Components 通过创建具有高度可复用性和定制性的自定义 HTML 元素，为前端开发者带来了更大的灵活性。
示例代码
创建 Shadow DOM
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --- ---------------
-------
------
-----------
--------
----- ----------- - ------------------------------
----- ---------- - ------------------------------- ---------
----- ------------ - --------------------------------
------------------------ - -- - ------ ----- ---
-------------------------------------
----- ---------------- - ----------------------------
---------------------------- - ------- --------
-----------------------------------------
---------
-------
-------创建 Custom Element
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
------------- --------- ---------------------------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ---------------- - ----------------------------
---------------------------- - ------- --------
-----------------------------------------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
----- ---------------- - -----------------------------------
---------------------------- - ------- -----------
-
--------- -
-----------------------
-
-
------------------------------------- -------------
----- ------- - ---------------------------------------
------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb52545ad90b6d041fe239