Web Components 是一种用于构建可重用的定制元素的技术。它使得开发人员可以创建自己的 HTML 标签，并且可以使用它们在网页中来进行组装。
Web Components 有三个主要的技术组成部分：Custom Elements、Shadow DOM 和 HTML Templates。
Custom Elements
Custom Elements 允许开发人员定义自己的 HTML 标签，并且可以定义该标签的行为和样式。通常情况下，开发人员可以通过扩展HTMLElement类来定义一个自定义元素。
下面是一个基本的自定义元素示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ---------- ------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们定义了一个名为 MyElement 的类，并且继承了 HTMLElement 类。在构造器函数中，我们将该元素的内容设置为“Hello, World!”，然后通过 customElements API 来定义它的自定义元素。
Shadow DOM
Shadow DOM 允许开发人员将一个元素的样式和行为封装在一个独立的文档之中，以防止其与外部环境发生冲突。
下面是一个 Shadow DOM 示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -----------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ----------
--
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们在构造函数中使用了 attachShadow 方法来创建一个 Shadow DOM，并指定其打开模式。然后，我们在 Shadow DOM 中定义了一个样式和一个 p 标签。
HTML Templates
HTML 模板允许开发人员预定义一个可重用的 HTML 片段，并将其插入到文档中。这样，开发人员可以节省时间并且减少重复代码。
下面是一个 HTML 模板示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -----------------
-------
------
--------- -----------------
--------- ----------
-----------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -----------------------------------------------
-------------------------------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们定义了一个 HTML 模板，并且将其存储在了一个名为 my-template 的 ID 中。然后，我们在自定义元素的构造函数中，通过 querySelector 方法获取该模板的内容，并将其克隆到 Shadow DOM 中。
总结
Web Components 是一种非常有用的技术，它可以使开发人员更加轻松地创建和调用可重用的自定义元素。使用 Custom Elements、Shadow DOM 和 HTML Templates，开发人员可以大大提高他们的效率，并且减少重复代码的使用。
希望这篇文章能够帮助你更好地理解 Web Components 的基础知识和使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad2f6e48841e9894958834