在前一篇文章中，我们介绍了如何创建自定义元素。不过，在实际应用中，我们经常需要隔离自定义元素的样式和内部元素，为此，Web Components 提供了 Shadow DOM 的机制。
什么是 Shadow DOM？
Shadow DOM 是一种构建组件的技术，它可以让开发者把 DOM 的结构、样式和行为封装在一起，形成一个独立的作用域，避免全局 CSS 样式和 JS 变量的污染。
Shadow DOM 与普通 DOM 的区别在于：
- Shadow DOM 有一个独立的 DOM 树，它不会被外部 CSS 或 JS 的影响。
- Shadow DOM 可以封装内部样式和行为，而不会对外部环境造成影响。
- Shadow DOM 可以被嵌套使用，形成复杂的组件。
如何使用 Shadow DOM？
我们可以使用 attachShadow API 来创建 Shadow DOM。这个 API 可以在自定义元素的构造函数中使用：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
-- ------ ---- ---- ------ --- -
----- - - ----------------------------
----------- - ------- ------ ------
----------------------
-
-
-- -------
----------------------------------- -----------attachShadow 方法的第一个参数是一个对象，有以下两个属性：
mode：指定 Shadow DOM 的模式，可以取值为'open'或'closed'。'open'模式表示可以从外部访问 Shadow DOM，而'closed'模式则表示无法从外部访问。delegatesFocus：指定是否要将焦点委托给 Shadow DOM 的内部元素。默认值为false。
通过以上代码，我们可以将 <p> 元素封装到 Shadow DOM 中。使用方式和普通 DOM 元素相同，但是样式和属性会被 Shadow DOM 封装起来。
如何使用样式和 CSS 变量？
Shadow DOM 中的样式可以使用普通的 CSS 语法，但是作用域只限于 Shadow DOM 内部。
CSS 变量是一项非常强大的特性，可以在一个组件内定义一系列变量，并且可以在 CSS 样式中使用。在 Shadow DOM 中定义 CSS 变量的方式如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
-- ----
----- ----- - --------------------------------
----------------- - -
----- -
-------- ----
-
- -
------ -------------
-
--
--------------------------
-- -- ---- --
----- - - ----------------------------
----------- - ------- ------ ------
----------------------
-
-
----------------------------------- -----------在上面的代码中，我们为自定义元素定义了一个 CSS 变量 --color，然后在 <p> 元素的样式中引用了该变量。这样的好处是，我们可以在组件的外部定义 --color 的值，从而控制 Shadow DOM 中元素的样式。
总结
在本篇文章中，我们介绍了如何使用 Shadow DOM 来创建自定义元素。Shadow DOM 可以封装样式和行为，避免全局污染，同时还可以使用 CSS 变量来控制样式。
当然，Shadow DOM 在使用时也有一些注意点，比如样式的继承、事件传递等问题。不过，掌握了这些基础知识，我们就能构建出更加高效、可维护的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64952a7148841e989426e6a0