Web Components 是一种基于 Web 标准的技术，它可以将可重用的 UI 组件进行封装，从而使开发者可以更方便的复用这些组件。其中，Shadow DOM 是 Web Components 中的一个重要组成部分，它可以使组件的样式、结构和行为都被封装起来，避免与其他元素产生冲突。
Shadow DOM 的概述
Shadow DOM 是指未被渲染到页面上的 DOM 结构，可以理解为一个组件内部的私有 DOM。在 Web Components 中，每个组件的 Shadow DOM 是独立的，即每个组件都有一个自己的 Shadow DOM，它们之间互不影响，也不能被外部的 JavaScript 访问到。
Shadow DOM 的一个重要作用是将组件的样式和行为封装起来，避免与外部的样式和行为产生冲突。在 Shadow DOM 中，组件的样式只会影响到 Shadow DOM 内部的元素，不会对外部的元素产生影响。
Shadow DOM 的应用
创建 Shadow DOM
在 Web Components 中，可以通过以下代码创建 Shadow DOM：
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
-- -- ------ -----
-
-需要注意的是，创建 Shadow DOM 时需要指定 mode 参数。mode 的取值有两种，分别是 open 和 closed，其含义如下：
open：可以从外部访问 Shadow DOM。closed：无法从外部访问 Shadow DOM。
在 Shadow DOM 中引用样式
在 Web Components 中，组件的样式是被封装在 Shadow DOM 中的。要在 Shadow DOM 中引用样式，可以使用CSS 的 @import 属性来将样式表导入到 Shadow DOM 中，或者使用 link 标签将外部 CSS 的样式表引入 Shadow DOM 中。
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
------- ---------------------------
- - ---------- ----- -
--
--------------------------
----- - - ----------------------------
------------- - ------ --------
----------------------
-
-在 Shadow DOM 中引用 JavaScript
在 Web Components 中，组件的行为也是被封装在 Shadow DOM 中的。要在 Shadow DOM 中引用 JavaScript，可以使用 script 标签将 JavaScript 代码引入 Shadow DOM 中。
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ------ - ---------------------------------
---------- - ---------------------
---------------------------
----- ------ - ---------------------------------
------------------ - ------ ----
---------------------------
-
-在 Shadow DOM 中使用插槽
插槽（slot）是一种在 Shadow DOM 中的元素，可以将父元素中的内容插入到插槽中。需要注意的是，在 Web Components 中，插槽的命名是很重要的。
----- ----------- ------- ----------- -
------------------- -
----- ------ - ------------------------ ---------
---------------- - -
-------
------------ - ---------- ----- -
--------
-------------
--
-
-在这个例子中，::slotted 是表示在插槽中引用父元素的样式。例如，在父元素的样式表中，可以这样定义 p 元素的样式：
------------ - - ---------- ----- -
在使用这个组件的时候，可以为 <my-component> 添加子元素，例如：
-------------- -------- ---------- ---------------
这样，::slotted(p) 的样式就会被应用到 Hello World! 这个文本节点，从而使它的字体大小为 20px。
Shadow DOM 的开发技巧
使用 DevTools 查看 Shadow DOM
在开发过程中，有时需要查看 Shadow DOM 内部的结构和样式。这时可以使用浏览器的 DevTools，在 Elements 面板中找到 Shadow DOM 模块，就可以看到 Shadow DOM 内部的 DOM 结构和样式。
在 DevTools 中修改 Shadow DOM 中的样式或 DOM 结构，可以进行快速的调试和定位问题。
将公共样式写在组件外部
在 Web Components 中，为了防止样式冲突，组件的样式必须被封装在 Shadow DOM 中。但是，一些公共的样式可能不需要被封装在 Shadow DOM 中，可以在组件的外部定义，从而实现更好的复用性。
-- ---- -- ------------- - - ---------- ----- ------ ----- - -- ---- -- ------------- - -- --- -- - ------------- -- - -- --- -- - ------------- - - -- --- -- -
这样，公共的样式可以被多个组件复用，而组件的样式仍然被封装在 Shadow DOM 中。
使用 CSS 变量
在 Web Components 中，使用 CSS 变量可以实现更加灵活和可配置的组件。通过定义一些 CSS 变量，用户可以更方便地自定义组件的样式和行为。
----- ----------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----- ------ - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
- -
---------- ----------------------------- ------
------ ------------------------- -------
-
--
--------------------------
----- - - ----------------------------
------------- - ------ --------
----------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- - - -----------------------------------
------------- - ---------
-
-
-在这个例子中，--my-component-font-size 和 --my-component-color 是两个 CSS 变量，可以在组件的样式中使用。组件的用户可以通过设置组件的 color 属性来改变组件中所有 p 元素的字体颜色。
------------- ---------------------------
总结
Shadow DOM 是 Web Components 的一个重要组成部分，它可以将组件的样式、结构和行为封装起来，避免与其他元素产生冲突。在开发 Web Components 时，使用 Shadow DOM 可以使组件更加灵活和可配置，从而实现更好的复用性。在开发过程中，使用 DevTools 可以方便地查看 Shadow DOM 内部的结构和样式，从而进行调试和优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ad79348841e989491614d