在 Web 开发中，我们经常需要使用一些复杂的组件来实现一些特定的功能，比如导航栏、轮播图、评论区等等。传统的做法是通过 HTML + CSS + JavaScript 实现这些组件的样式和行为，但是这样会存在一些问题，比如代码冗余、难以维护、易错等等。为了解决这些问题，Web Components 的概念应运而生。
Web Components 是一种新的 Web 技术，它包含了四个主要的特性，分别是 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。本文将着重介绍前两个特性，Custom Elements 和 Shadow DOM。
自定义标签
自定义标签是 Web Components 最基础也是最核心的一个特性。自定义标签允许你自定义一些在 HTML 中原本没有的标签，比如 <x-modal>、<x-menu> 等等。自定义标签的格式很简单，我们只需要在 HTML 中定义一个新的标签名即可，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------------
-------
------
-------------------
-----------------
-------
-------上述代码中，我们定义了两个自定义标签 <x-modal> 和 <x-menu>，但是这两个标签现在还什么也不做，我们需要添加一些行为和样式到这个标签中才能让它们有用。
为了添加行为和样式到这两个标签中，我们需要使用自定义元素的 JavaScript API。这些 API 让你能够拦截页面加载、元素创建、元素删除等事件，并在这些事件发生时执行一些自定义的逻辑。接下来，我们将使用自定义元素的 JavaScript API 来添加一些行为和样式到我们的自定义标签中。
Shadow DOM
Shadow DOM 是另一个 Web Components 的核心技术。Shadow DOM 允许你创建一个独立的文档树，这个文档树与主文档树是分离的，互不干扰。这使得你能够在自定义标签中使用 CSS 样式和 JavaScript 行为，而不用担心这些样式和行为会影响到页面中的其他元素。
为了创建一个 Shadow DOM，我们首先需要在自定义元素的构造函数中调用 element.attachShadow() 方法，如下所示：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
--------
-- ---- ------ ----
----- ------ - ------------------- ----- ------ ---
-- ----
----- ------- - ------------------------------
---------------------------------
----- ------- - ------------------------------
---------------------------------
------------------- - ---------------------------- -- ------ -------
-- ------ ------ ---- -
-----------------------------
----------------------------
-- ----
----- ----- - --------------------------------
----------------- - -
-------- -
--------- ------
---- --
----- --
------ --
------- --
----------- ------- -- -- -----
-------- -----
------------ -------
---------------- -------
-
-------- -
----------- ------
-------- -----
---------- ------
----------- ------
--------- -----
-
--
--------------------------
-
-
-------------------------------- --------上述代码中，我们定义了一个名为 <x-modal> 的自定义标签，并在它的构造函数中创建了一个 Shadow Root。在 Shadow Root 中，我们创建了一个 div 元素作为外层容器，一个 div 元素作为内容容器，并将内容添加到内容容器中。
同时，我们还添加了一些样式到 Shadow Root 中，这些样式只会影响到当前自定义元素。这些样式不会影响到页面中的其他元素。
最后，我们将自定义元素注册到 customElements 中，如下所示：
customElements.define('x-modal', XModal);现在，我们来使用一下我们刚刚创建的自定义标签 <x-modal>，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------------
-------
------
------- -------------------------- --------------
-------- ---------- -------------- -----------------
--------
-------- ----------- -
----- ----- - ---------------------------------
------------------- - --------
-
---------
-------
-------上述代码中，我们在页面中添加了一个普通的按钮，并在按钮的点击事件中显示了我们刚刚创建的自定义标签 <x-modal>。
运行代码后，你会看到一个黑色的半透明背景出现在页面中，并且在这个背景上显示了一个白色的小窗口，窗口中显示了 "Hello World" 的文字。
总结
Custom Elements 和 Shadow DOM 是 Web Components 中最核心的两个技术。使用它们，你可以创建一些真正意义上的独立组件，并将它们添加到你的页面中，无需担心行为和样式的冲突。同时，它们也能让你的代码更加简洁、易读和易维护。
希望本文对你有所帮助，下一篇文章中我们将继续探讨 Web Components 中的其他特性。如果你对此有任何疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd878b95b1f8cacdce12ca