Web Components 是一种 Web 技术规范，旨在通过组合多个技术来实现可组装、可重用的 Web 组件。其中一个关键技术是 Shadow DOM，它可以帮助我们更好地封装组件，并提高组件的可用性。
什么是 Shadow DOM
Shadow DOM 是一种浏览器技术，用于创建封装的 DOM 树。通俗地说，它允许我们将一组 HTML、CSS 和 JavaScript 封装到一个自包含的组件中，从而防止外部代码干扰组件内部结构和样式。在 Shadow DOM 中，每个组件都有一个独立的 DOM 树，不会被外部的 DOM 结构和样式所影响。
如何使用 Shadow DOM
Shadow DOM 是通过 shadowRoot 属性来创建和访问的。在 Web Components 中，我们可以使用 createShadowRoot() 方法来创建一个 Shadow DOM，然后再通过 appendChild() 或 insertBefore() 等方法将组件的 DOM 结构添加到 Shadow DOM 中。
下面是一个简单的示例：
-- -------------------- ---- -------
--------- ------------------
-------
-- ------ --- -- --- -- --
------------- -
------ ------
-
--------
---- ---------------------
---- ------ --- -- ---- -- ---
-------------
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ----------------------------------------
----- ----- - ------------------------------------- ------
-----------------------------------
-
-
------------------------------------- -------------
---------
---- ------- ---
--------------
--------- ----------
---------------在上面的示例中，我们首先定义了一个 <template>，其中包括了组件的 HTML 和 CSS。在 JavaScript 代码中，我们创建了一个 MyComponent 对象，并通过 attachShadow() 方法创建了一个 Shadow DOM。然后，我们使用 document.importNode() 方法克隆了 <template> 中的内容，并将其添加到 Shadow DOM 中。
最后，我们通过 customElements.define() 方法将 MyComponent 注册为一个自定义元素，并可以在其他的 HTML 页面中使用它。
Shadow DOM 中的样式
在 Shadow DOM 中，我们可以使用标准的 CSS 语法来定义样式，但是样式只会影响当前组件的 DOM 树。也就是说，外部的样式不会影响组件内部的样式，而内部的样式也不会影响外部的样式。
此外，Shadow DOM 还提供了 ::slotted 伪类来访问插入到组件中的内容。例如，在我们的示例代码中，我们使用了 <slot> 标记来表示组件的内容区域，然后可以通过 ::slotted 伪类来设置这些内容的样式：
-- -------------------- ---- -------
-------
-- ------ --- -- --- -- --
------------- -
------ ------
-
-- ------------ --
------------ -
------------ -----
-
--------Shadow DOM 中的 JavaScript
在 Shadow DOM 中，我们可以像普通的 DOM 树一样使用 JavaScript 操作 DOM 元素。例如，我们可以使用 querySelector() 方法来选择 Shadow DOM 中的元素：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ----------------------------------------
----- ----- - ------------------------------------- ------
----- --- - -------------------------------------
----------------------------- -----------------------------
-----------------------------------
-
------------- -
-- - ------ --- -------
-
-需要注意的是，Shadow DOM 中的事件是不会向外冒泡的。如果我们想要在外部访问 Shadow DOM 中的事件，可以使用 composed: true 选项来创建事件：
// 在 Shadow DOM 中触发自定义事件
const event = new CustomEvent('my-event', { composed: true });
this.dispatchEvent(event);总结
Shadow DOM 是 Web Components 技术规范中的一个重要部分，通过它，我们可以更好地封装组件，提高组件的可用性和可维护性。在使用 Shadow DOM 的过程中，需要注意样式和事件的作用范围，以确保组件能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64858f8648841e9894459537