在 Web 开发中，我们通常使用 HTML、CSS 和 JavaScript 来构建网站或应用程序。但是，使用这些技术时可能会出现问题。例如，当我们在不同的页面或组件中使用相同的 CSS 类时，可能会发生 CSS 冲突或样式重复问题。此时，Web Components 的 Shadow DOM 功能就可以进入场景，解决这些问题并提供更多优势。
什么是 Shadow DOM？
Shadow DOM 是 Web Components 的一部分，它允许开发者将 DOM 树的一部分隔离出来，使其与外部 DOM 树完全分离。在 Shadow DOM 中，内部 DOM 树和外部 DOM 树可以使用相同的标签和类，并且彼此不会干扰。
Shadow DOM 的主要功能包括：
- 封装和隔离：防止外部 CSS 或 JavaScript 干扰内部 DOM 树。
- 继承和重载：允许外部样式与 Shadow DOM 样式重叠，但同时提供了一种更高优先级的样式，使其可以覆盖 Shadow DOM 样式。
- 模板化：定义一次组件，多次使用。
如何使用 Shadow DOM？
Shadow DOM 的使用非常简单，只需要创建一个 Shadow DOM 节点并添加到文档中即可。
-- -------------------- ---- -------
----- ----------------
------ --- ------
---- ----------------------------
--------
----- --------------- - --------------------------------------------
----- ---------- - ------------------------------ ----- ------ ---
-------------------- - -
-------
-- ------ --- -- --
-- -
------ ----
-
-------- -
----------------- -------
-
--------
---- -- --- - ---
---------- --- ------
---- ------------------- ------ --- ---------
--
---------在这个例子中，我们创建了一个 Shadow DOM 节点，并将其添加到一个 div 标签中。我们使用 attachShadow 方法创建 Shadow DOM，并将 mode 属性设置为 open，以便在外部 DOM 树中提供对 Shadow DOM 树的访问。我们还设置了一些 Shadow DOM 的样式和内容。
在上面的代码中，外部 DOM 树中的 h1 标记与 Shadow DOM 树中的 h1 标记具有相同的标记名称。但是，它们的样式不同。外部 DOM 树中 h1 标记的颜色是默认颜色，而 Shadow DOM 树中的 h1 标记的颜色为红色。
此外，我们还定义了一个样式类 .content 来应用于 Shadow DOM 树中的元素。
Shadow DOM 的应用
使用 Shadow DOM 可以解决许多常见的 Web 开发问题。例如，当我们要创建自定义 HTML 元素时，可以使用 Shadow DOM 来定义这个元素的样式和行为，并且可以在多个页面上使用它。
下面是创建一个自定义按钮的示例代码：
-- -------------------- ---- -------
---- --------- ---
------- ------------------------ ------------
--------
-- ----
----- ------------ ------- ----------- -
------------- -
--------
-- -- ------ --- --
----- ------ - ------------------- ----- ------ ---
-- -- ------ --- --
----- -------- - -
-------
------ -
----------------- --------
------ ------
-------- ---- -----
------- -----
-------------- ----
------- --------
-
------------ -
----------------- --------
-
--------
------------------------------
--
-- ------ ------ --- --
---------------- - ---------
-
-
-- -------
-------------------------------------- --------------
---------在这个示例中，我们创建了一个自定义按钮 custom-button，并将它添加到文档中。然后，我们定义了一个 CustomButton 类，它继承了 HTMLElement 类，并创建了一个 Shadow DOM 节点。我们还定义了 Shadow DOM 的样式和 HTML 模板。
在 Shadow DOM 模板中，我们使用了 <slot> 标记，这允许使用者在按钮中添加自己的文本或元素。在下面的示例中，我们将 Click me! 插入到 <slot> 标记中。
<custom-button> Click me again! </custom-button>
最终效果是按钮的样式和行为保持一致，因为 Shadow DOM 将内部样式和行为与外部样式和行为完全隔离开来。
总结
Shadow DOM 是 Web Components 的一项重要功能，它提供了封装、隔离、继承和模板化功能，为开发者提供了一种建立模块化、可重用和易于维护的 Web 应用程序的新方法。
本文通过简单的示例代码展示了如何创建和使用 Shadow DOM，并提供了一些示例应用程序。希望这篇文章对您理解和实现 Web 组件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c18d1a83d39b48815d26a2