简介
Web Components 是一套新的 Web 组件化技术，它将 HTML、CSS 和 JavaScript 打包在一起，可以在任何应用程序中使用，包括 React、Vue、Angular 等 Web 框架。其中 Shadow DOM 是 Web Components 的一种重要特性，它允许开发者隐藏组件实现细节，并使得 DOM 树的结构更加清晰。
Shadow DOM 通过一种类似于 iframe 的机制，将组件的内部 HTML、CSS 和 JavaScript 封装在一个独立的 DOM 命名空间中，这意味着组件内部的样式对外部世界是不可见的，同时避免了样式冲突的问题。
本文将详细介绍 Shadow DOM 的使用原理和一些需要注意的事项，并提供示例代码，帮助读者更好地理解和掌握 Shadow DOM。
Shadow DOM 的使用原理
创建 Shadow DOM
要创建 Shadow DOM，需要使用 Element 对象的 attachShadow 方法：
const root = document.getElementById('my-custom-element');
const shadowRoot = root.attachShadow({ mode: 'open' });attachShadow 方法接受一个配置对象，其中 mode 属性有两个值：
'open'表示 Shadow DOM 可以被 JavaScript 访问和修改，也可以通过shadowRoot.innerHTML修改 Shadow DOM 的内容。'closed'表示 Shadow DOM 只能被应用程序内部的代码访问和修改，对外界 JavaScript 代码是不可见的。
封装 CSS 样式
为了避免样式冲突，我们可以将组件内部的 CSS 样式定义在 Shadow DOM 中。可以使用 <style> 标签定义样式：
-- -------------------- ---- -------
----------
-------
--------- -
---------- -----
------ ----
-
--------
---- ----------------------- ------------
-----------由于 Shadow DOM 的独立性，组件内部的样式不会影响到外部，反之亦然。如果需要将组件样式暴露给外部组件，则需要使用 :host 伪类：
-- -------------------- ---- -------
----------
-------
----- -
-------- ------
------- -----
------- --- ----- -----
-
--------- -
---------- -----
------ ----
-
--------
---- ----------------------- ------------
-----------这段代码将在组件外部添加一个边框，并将组件本身的样式设为块级元素。
插入内容
组件内部的内容需要通过 JavaScript 代码插入，可以使用 appendChild 方法：
const template = document.querySelector('#my-custom-element');
const instance = template.content.cloneNode(true);
shadowRoot.appendChild(instance);这段代码将克隆模板并插入到 Shadow DOM 中。
注意事项
虽然 Shadow DOM 提供了很多好处，但在实际应用中还有一些需要注意的地方：
选择器覆盖
Shadow DOM 要求感知和选择器的优先级与传统的 CSS 不同。在传统的 CSS 中，.foo 选择器的优先级高于 :host 伪类，但在 Shadow DOM 中，:host 的优先级要高：
-- -------------------- ---- -------
----------
-------
-------------- --------- -
------ ----
-
--------- -
------ -----
-
--------
---- ----------------------- ------------
-----------这段代码中，如果给组件添加 .active 类，则 .my-class 的颜色将被设置为红色。
封装事件
由于 Shadow DOM 的封装性，如果组件内部的元素绑定了事件监听器，它们将不会反映到组件外部。组件要使内部元素的事件处理程序在组件外部也可调用，可以使用 CustomEvent 对象：
const event = new CustomEvent('my-event', { detail: 'xxx' });
root.dispatchEvent(event);组件外部可以监听 my-event 事件来获得内部元素的状态变化。
插槽
插槽是 Shadow DOM 的一项强大功能，可以将组件内部的子元素暴露给外部组件，使得外部组件能够自由地扩展组件内部的内容。可以使用 <slot> 标签定义插槽：
-- -------------------- ---- -------
----------
-------
----- -
-------- ------
------- -----
------- --- ----- -----
-
--------
---- ----------------
-------------
------
-----------在组件外部可以使用任何标记插入内容：
<my-custom-element> <h2>Content Title</h2> <p>Content here!</p> </my-custom-element>
此时，插槽中的 <h2> 和 <p> 就会出现在组件的 .content 中。
示例代码
以下是一个简单的示例，演示了 Shadow DOM 的用法。组件将在外部显示“Hello, World!”：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --- ------------
-------
------
---------------------------------------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------
----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------
---------------------------------
-
-
------------------------------------------ -----------------
---------
--------- -----------------------
-------
----- -
-------- ------
------- -----
------- --- ----- -----
-
--------- -
---------- -----
------ ----
-
--------
---- ----------------------- ------------
-----------
-------
-------结论
Shadow DOM 是 Web Components 中的一个重要特性，它可以帮助开发者封装组件实现细节，避免样式冲突，同时提高了组件的可复用性和可维护性。本文介绍了 Shadow DOM 的创建方式、样式定义与插入、事件封装、插槽等用法，并提供了示例代码，望对读者有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673007eeeedcc8a97c90e35d