Web Components 是一项供开发者创建可重用 Web 组件的技术，它由 Custom Elements、Templates、Shadow DOM 和 HTML Import 等组成。其中，Shadow DOM 是 Web Components 中最为重要和核心的部分，它通过创建一个独立的 DOM 子树来实现组件的封装性和私有性。
Shadow DOM 概述
Shadow DOM 可以看作是一种浏览器原生支持的 DOM 封装方案，它允许开发者在当前文档的 DOM 结构上创建一个独立的子树，使得该子树内部的内容和样式不会受到外部环境的干扰。同时，Shadow DOM 还支持事件的捕获和冒泡，使得组件内部的事件处理更加丰富灵活。
Shadow DOM 主要由以下 3 个部分组成：
- Shadow host：外部文档中的一部分 DOM 结构，Shadow DOM 会被插入到该部分 DOM 中，成为该部分 DOM 的一部分；
- Shadow tree：Shadow DOM 内部的 DOM 结构，与外部文档分离，并且不会和外部文档的其他 DOM 结构发生冲突；
- Shadow boundary：Shadow DOM 内部的 DOM 结构与与外部文档分割的边界。
Shadow DOM 的使用
在 Web Components 中使用 Shadow DOM 可以分为以下几个步骤：
1. 创建 Shadow DOM 元素
创建 Shadow DOM 需要使用 attachShadow 方法，该方法接受一个 mode 参数，表示 Shadow DOM 的类型，可以是 open 或 closed。mode 为 open 时，外部文档可以访问 Shadow DOM 内部的元素， mode 为 closed 时，外部文档无法访问 Shadow DOM 内部的元素。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- ----- ------ --- ------ ------ --- -
----- - - ----------------------------
------------- - ------ --------
----------------------
-
-
------------------------------------- -------------2. 编写模板
模板是 Shadow DOM 内部的所有 DOM 结构的集合，可以使用 HTML 的标准模板语法 (<template>...</template>) 编写模板。模板内部的 DOM 结构和样式将不会影响外部文档的 DOM 结构和样式。
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - -
-------
- -
------ ----
-
--------
-------- ----------
--3. 插入 Shadow DOM
将模板内容插入到 Shadow DOM 的根节点即可。
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));示例代码
下面通过一个例子来演示如何使用 Shadow DOM 来创建一个自定义按钮组件。
-- -------------------- ---- -------
---- -------------- ---
--------- ------------------------
-------
------ -
-------- -----
----------------- -----
------ -----
------- -----
-------------- ----
------- --------
-
--------
------------------------------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- ----
----- -------- - ----------------------------------------------
-- ------- ------ ---
-----------------------------------------------------
-
-
---------------------------------- ----------
---------我们可以在其他页面中使用 <my-button> 来显示自定义按钮：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------- ------------
-------
------
--------------------------
-------
-------总结
Shadow DOM 是 Web Components 中非常重要的一个组成部分，它通过创建一个独立的 DOM 子树来隔离组件内部和外部的 DOM 结构和样式，实现了组件的封装性和私有性。掌握 Shadow DOM 的使用方法对于开发高质量、可维护的 Web 组件非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522d24e95b1f8cacda49809