Web Components 是一项用于构建可重用、可组合的 Web 应用程序的技术，它由三个主要的技术组成：Shadow DOM、Custom Elements 和 HTML Templates。
本文主要介绍其中两个基础技术：Shadow DOM 和 Custom Elements。
Shadow DOM
Shadow DOM 是 Web Components 技术的核心之一，它可以使我们创建自己的 DOM 子树，并将其与主 DOM 树分离开来，从而实现一些有趣的特性，例如封装性、作用域和样式隔离等。
封装性
使用 Shadow DOM 可以将 Web 组件的内部实现细节封装起来，只暴露出需要对外使用的接口，从而避免了组件的内部实现被外部直接访问和修改的风险。
作用域
Shadow DOM 中的元素具有独立的作用域，从而避免了全局 CSS 样式和 JavaScript 变量的冲突，使得组件的样式和行为更加可预测和可控。
样式隔离
Shadow DOM 中的样式不会影响到主 DOM 树中的其他元素，同时也不会被主 DOM 树中的样式所影响，从而实现了样式的隔离。
下面是一个使用 Shadow DOM 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --- ------------
-------
------
---------- --- ---------
---- ---------------------
--------
----- --------- - -------------------------------------
----- ---------- - ------------------------ ----- ------ ---
-------------------- - -
-------
- -
---------- -----
------ ----
-
--------
--------- ------ --------
--
---------
-------
-------在上面的代码中，我们创建了一个 Shadow DOM，然后在其中添加了一个红色的 <p> 元素，最后将这个 Shadow DOM 添加到了页面中的一个 <div> 元素中。
Custom Elements
Custom Elements 是 Web Components 技术的另一个核心，它可以让我们创建自定义的 HTML 元素，并在其中添加自己的行为和属性。
创建自定义元素
要创建一个自定义元素，我们需要使用 customElements.define() 方法来注册这个元素，然后在其中定义这个元素的行为和属性。
下面是一个创建自定义元素的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
-------
------
---------- -------- ---------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
--------- ------ -------------
--
-
-
----------------------------------- -----------
---------
-------
-------在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并在其中创建了一个 Shadow DOM，然后在其中添加了一个 <p> 元素，最后将这个自定义元素注册到了 customElements 中。
添加自定义属性
要添加自定义属性，我们只需要在自定义元素的构造函数中使用 this.setAttribute() 方法来添加属性，然后在其中添加对应的 getter 和 setter 方法即可。
下面是一个添加自定义属性的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
-------
------
---------- -------- ---------
----------- --------------- ------ ------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
----------------------
--
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
------------ - ---------
-
-
--- --------- -
------ -----------------------------
-
--- -------------- -
---------------------------- -------
-
-
----------------------------------- -----------
---------
-------
-------在上面的代码中，我们添加了一个名为 message 的自定义属性，并在其中使用了 getter 和 setter 方法来实现属性的访问和修改，同时也实现了属性的响应式更新。
总结
本文介绍了 Web Components 技术中的两个基础技术：Shadow DOM 和 Custom Elements，其中 Shadow DOM 可以实现组件的封装性、作用域和样式隔离，而 Custom Elements 可以让我们创建自定义的 HTML 元素，并在其中添加自己的行为和属性。
通过学习这些基础技术，我们可以更加轻松地构建可重用、可组合的 Web 应用程序，并提高应用程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656486bdd2f5e1655ddf894d