随着 Web 技术的发展和普及，Web 组件成为了大家越来越重要的一部分。而 Web Components 作为一种标准化的组件开发方式，其得到了广泛的认可和使用。其中，Shadow DOM 是 Web Components 中的一个重要部分。它可以将组件的样式和逻辑封装在内部，并且不会被外部的样式和元素干扰。本文将详细介绍如何使用 Shadow DOM。
Shadow DOM 的基本概念
Shadow DOM 是浏览器提供的一种 DOM 封装技术，它可以将一个 DOM 子树封装到一个独立的命名空间中，从而实现样式和逻辑的隔离。这个独立的命名空间被称为 Shadow DOM。在一个组件内部，可以通过使用 Shadow DOM 来封装组件的样式和逻辑，以避免与外部样式和元素产生干扰。
如何使用 Shadow DOM
在 Web Components 中使用 Shadow DOM，需要使用到两个 API：ShadowRoot 和 Element.attachShadow()。
ShadowRoot
ShadowRoot 是一个独立的 DOM 树，它位于组件的内部，并且可以包含任意数量的子元素。其中的样式和节点都不会影响到外部的 DOM 树。在创建组件时，可以使用 Element.attachShadow() 方法来创建一个 ShadowRoot。
attachShadow()
Element.attachShadow() 方法是用于创建一个 ShadowRoot 的 API。该方法接收一个配置对象作为参数，配置对象中可以指定 ShadowRoot 的模式以及一些其他的属性。配置对象中的 mode 可以为 open 或者 closed。其中，open 模式下的 ShadowRoot 可以通过 JavaScript 访问到，而 closed 模式下的 ShadowRoot 不允许通过 JavaScript 访问到。
示例代码
我们来看一个简单的示例代码，来演示如何使用 Shadow DOM：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
------- --- ----- ------
-------- -----
-
------ -
------ ----
-
--------
-------
------
---- ------------------
------ --------
---- ------------------------
------
--------
----- ----------- - ----------------------------------------
----- ---------- - -------------------------- ----- ------ ---
----- -------- - ------------------------------
--------------------------------
------------------ - ------- ------ -----
---------------------------------
---------
-------
-------在上面的代码中，我们创建了一个 id 为 my-component 的 div 元素，然后通过调用 Element.attachShadow() 方法来创建一个 ShadowRoot。代码中配置对象的 mode 指定为 open。然后，我们创建了一个 innerDiv 的 div 元素，并且给它添加了一个 inner 类，然后将它添加到了 ShadowRoot 中。
运行代码，可以看到在页面的 my-component div 元素中，显示了一段红色的文字 Hello, Shadow DOM。这就是 Shadow DOM 的效果。
Shadow DOM 中的样式
在 Shadow DOM 中，样式是一个非常重要的部分。Shadow DOM 中的样式不会影响到外部样式，而外部样式也不会影响到 Shadow DOM 中的样式。这使得在一个组件内部定义样式变得非常简单。
我们在上面的示例中已经添加了一些样式，现在我们来看一下如何在 Shadow DOM 中添加样式：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
------- --- ----- ------
-------- -----
-
------------- -
------ ------
-
--------
-------
------
---- ------------------
------ --------
---- ------------------------
------
--------
----- ----------- - ----------------------------------------
----- ---------- - -------------------------- ----- ------ ---
----- -------- - ------------------------------
--------------------------------
------------------ - ------- ------ -----
--- ----- - --------------------------------
----------------- - -
------ -
------ ----
-
--
------------------------------
---------------------------------
---------
-------
-------在上述代码中，我们在 Shadow DOM 中添加了一个样式。在 style 标签中，我们定义了一个 .inner 类，其中的颜色为 red。这样在添加 innerDiv 元素的时候，就会应用该样式。
同时，我们还在外部样式中定义了一个 #my-component 的样式，其中的颜色为 green。这样就可以看到外部样式和 Shadow DOM 样式不会互相影响。
Shadow DOM 的学习意义
使用 Shadow DOM 可以更加灵活地开发 Web 组件。通过将组件的样式和逻辑封装在 Shadow DOM 内部，可以避免与外部 DOM 发生干扰。这样就可以轻松地实现 Web 组件的复用和管理，从而加快开发效率。
使用 Shadow DOM 还可以让 Web 组件具有更好的可维护性和可读性。通过封装组件的样式和逻辑，组件的实现细节被隐藏在了组件内部，外部只需关注组件的调用和使用即可。
结论
Shadow DOM 是 Web Components 中的一个重要特性，它可以将组件的样式和逻辑封装在内部，并且不会被外部的样式和元素干扰。通过学习 Shadow DOM，可以更加灵活地开发 Web 组件，并且实现更好的可维护性和可读性。如果您正在开发 Web 组件，那么 Shadow DOM 就是一个必须掌握的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c1c7a66ef9cf37fae4c1d