前言
Custom Elements 是 Web Components 标准的一部分，它允许开发者创建自定义元素，并把这些自定义元素组织成可重用的组件。Shadow DOM 是 Custom Elements 的一项关键特性，可以帮助开发者更好地封装组件内部的样式和结构，从而增强组件的可复用性和可维护性。
本文将介绍 Custom Elements 中如何使用 Shadow DOM，包括 Shadow DOM 的基础知识、使用 Shadow DOM 实现样式隔离和组件封装的方法，以及一些常用的 Shadow DOM 技巧和实践经验。
Shadow DOM 基础知识
Shadow DOM 是一种特殊的 DOM，它可以让开发者封装组件私有的样式和结构，避免组件内部的 DOM 节点被外部修改，从而增强组件的可复用性和可维护性。
在 Custom Elements 中，Shadow DOM 通常由两个部分组成：
- Shadow Host：宿主元素，即 Custom Elements 实例自身；
- Shadow Tree：Shadow DOM 树，也称为 Shadow Root，是组件的内部 DOM 树，包括自身的各种子元素和样式。
下面是一个通过 Shadow DOM 实现的简单 Custom Element，它包含了一个按钮和一个包含文字的容器：
-- -------------------- ---- -------
---- -- ------ ------- - -------- ---
----- -------- ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -- --- ------
----- --------- - ------------------------------
------------------- - ------------
------------------- - ------ -----
----- ----- - --------------------------------
----------------- - -
---------- -
-------- -----
----------------- --------
------- --- ----- -----
-------------- ----
------- --------
-
--
-- - --- ------ ------ --- ---- -
------------------------------
----------------------------------
-- --------
----------------------------------- -----------------------------
-
-- --------
------------- -
------------- ------ -------
-
-
-- -- ------ -------
---------------------------------- ----------通过 Shadow DOM，我们可以在自定义元素的内部定义私有的 DOM 结构和样式，从而避免组件内部的样式影响到全局，同时也可以防止外部组件直接访问和修改内部 DOM 结构。
Shadow DOM 样式隔离
Shadow DOM 的一个主要优势就是它能够为 Custom Elements 提供样式隔离的能力，这对于组件化开发来说非常有用。下面是一个示例代码，通过 Shadow DOM 实现了一个样式隔离的搜索框组件：
-- -------------------- ---- -------
---- -- ------ ------- - -------- ---
----- -------- ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -- --- ------
----- --------- - ------------------------------
------------------- - ------------
----- ----- - --------------------------------
--------------- - --------
----------------- - ------------
----- ------ - ---------------------------------
---------------- - ---------
---------------- - -----
----- ----- - --------------------------------
----------------- - -
---------- -
-------- -----
------------ -------
------ -----
---------- ------
-------- -----
----------------- --------
------- --- ----- -----
-------------- ----
-
------ -
----- --
------- -----
-------- -----
---------- -----
-
------- -
-------- --- -----
----------------- --------
------ -----
------- -----
-------------- ----
------- --------
-
--
-- - --- ------ ------ --- ---- -
-----------------------------
------------------------------
------------------------------
----------------------------------
-- --------
-------------------------------- -----------------------------
-
-- ----------
------------- -
----- ------- - ----------------------------------------------
---------------- ---- -------------
-
-
-- -- ------ -------
---------------------------------- ----------上面的代码中，我们为搜索框组件定义了一个单独的 Shadow DOM Tree，内部包含了输入框和搜索按钮两个子元素，以及相应的样式。由于 Shadow DOM Tree 是独立于 Document 的私有 DOM 结构，所以搜索框的样式不会影响到外部的 CSS，同时也可以有效避免外部样式对组件的影响。
Shadow DOM 组件封装
除了样式隔离，Shadow DOM 还可以帮助开发者更好地进行组件封装。通过 Shadow DOM，我们可以在 Custom Element 内部封装一些 DOM 结构和逻辑，以便后续维护和复用。
下面是一个示例代码，通过 Shadow DOM 实现了一个组件化的日期选择器：
-- -------------------- ---- -------
---- -- ------ ------- - ------------ ---
----- ------------ ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -- --- ------
----- --------- - ------------------------------
------------------- - ------------
----- ----- - --------------------------------
--------------- - --------
----------------- - ------- - ------
----- ------ - ---------------------------------
---------------- - ---------
---------------- - -----
----- ------ - ------------------------------
---------------- - ---------
----- ----- - --------------------------------
----------------- - -
---------- -
-------- -----
------------ -------
------ -----
---------- ------
-------- -----
----------------- --------
------- --- ----- -----
-------------- ----
-
------ -
----- --
------- -----
-------- -----
---------- -----
-
------- -
-------- ----
---------- -----
----------------- ------------
------- -----
------- --------
-
------- -
--------- ---------
---- -----
----- --
------ -----
---------- ------
-------- -----
----------------- -----
------- --- ----- -----
----------- - --- --- ------- -- -- ----
-------------- ----
-------- -----
-------- ----
-
------------ -
-------- ------
-
--
-- - --- ------ ------ --- ---- -
-----------------------------
------------------------------
----------------------------------------
------------------------------
----------------------------------
-------------------------------
-- --------
------------------------------- ----------------------------------
-------------------------------- -----------------------------------
-
-- ----------
-------------- -
----- --------- - ------------------------------
------------------- - --------------
----- ----- - ------------------------------
--------------- - --------
--------------- - ------- ------ - ------
----- -------- - ------------------------------
------------------ - -----------
-- -------------
-----------------------------
--------------------------------
------ ----------
-
-- ---------
------------------ -
---------------------------------------------------------------
-
-- ----------
------------------- -
------------------------------------------------------------------
-
-
-- -- ------ -------
--------------------------------------- --------------上面的代码中，我们通过 Shadow DOM 封装了一个日期选择器组件，内部包含了一个输入框和一个日历按钮，以及一个日期选择器面板。输入框的聚焦事件会显示日期选择器面板，日历按钮的点击事件则会切换日期选择器面板的显示状态。
通过 Shadow DOM，我们可以更好地封装自定义元素的内部逻辑和 DOM 结构，避免外部直接操作内部 DOM 结构，同时也可以提高组件的可复用性和可维护性。
Shadow DOM 技巧和经验
除了上面介绍的基础使用和组件封装方法，Shadow DOM 还有一些常用的技巧和实践经验可以分享：
Slot
Slot 是 Shadow DOM 中一个非常有用的功能，可以让 Custom Elements 动态插入内容到 Shadow Tree 中。使用 Slot 可以方便地构建更灵活的组件，让组件具有更好的可复用性。
-- -------------------- ---- -------
---- -- ------ ------- - ------ ---
----- ------ ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -- --- ------
----- --------- - ------------------------------
------------------- - ------------
----- ---- - -------------------------------
--------- - ----------
----- ----- - --------------------------------
----------------- - -
---------- -
-------- -----
----------------- -----
------- --- ----- -----
-------------- ----
----------- - --- --- ------- -- -- ----
-
--
-- - --- ------ ------ --- ---- -
----------------------------
------------------------------
----------------------------------
-
-
-- -- ------ -------
-------------------------------- --------上面的代码中，我们通过 Slot 实现了一个通用的卡片组件，可以接收任意内容插入到卡片的内部。使用方式非常简单：
<!-- 使用 MyCard 组件插入自定义内容 --> <my-card> <h2 slot="content">Title</h2> <p slot="content">Content</p> </my-card>
外部样式表
有时候我们需要在组件内引入外部的样式表，这时可以使用 Shadow DOM 提供的 <link> 标签实现样式的导入。
-- -------------------- ---- -------
---- -- ------ ------- - -------- ---
----- -------- ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -------
----- --------- - -------------------------------
------------- - -------------
-------------- - -------------
-- -- --- ------
----- --------- - ------------------------------
------------------- - ------------
----- ------ - ---------------------------------
---------------- - ---------
---------------- - --------------------------
-- - --- ------ ------ --- ---- -
------------------------------
----------------------------------
----------------------------------
-
-
-- -- ------ -------
---------------------------------- ----------上面的代码中，我们通过 Shadow DOM 引入了 button.css 文件，并将 <link> 标签添加到 Shadow DOM Tree 中使样式生效。
Shadow DOM 中的事件
在 Custom Elements 中，Shadow DOM 中的事件处理和传递与普通 DOM 元素是有区别的。在 Shadow DOM Tree 中，事件处理和传递是局部的，只在 Shadow DOM 内部传递，不会像普通 DOM 元素那样冒泡到全局。
-- -------------------- ---- -------
---- -- ------ ------- - ------ ---
----- ------ ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- -- --- ------
----- ---- - ----------------------------
-------------- - -------
--------- - ----
-------------- - --------------------------
----- ----- - --------------------------------
----------------- - -
----- -
------ --------
---------------- -----
-
--
-- - --- ------ ------ --- ---- -
------------------------------
-----------------------------
-- --------
------------------------------ -----------------------------
-
-- --------
------------------ -
-----------------------
----------- -------- -------------------------------
-
-
-- -- ------ -------
-------------------------------- --------上面的代码中，我们通过 Shadow DOM 实现了一个链接组件 MyLink，并绑定了点击事件处理函数。在事件处理函数中，我们可以通过 event.preventDefault() 阻止默认行为，比如链接的跳转行为。同时注意，点击事件不会冒泡到全局，只在 Shadow DOM 内部传递。
总结
通过本文的介绍，我们了解了 Custom Elements 中如何使用 Shadow DOM，包括样式隔离、组件封装和常用技巧和实践经验等，这些都是实现更高效、可复用和可维护的 Web Components 的关键。
作为前端开发者，了解 Web Components 标准以及其基础技能已成为必备技能之一，希望本文的介绍可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bc44048841e9894885f97