请解释 Shadow DOM 的概念和作用。如何创建和使用 Shadow DOM？-JavaScript中文网-JavaScript教程资源分享门户

请解释 Shadow DOM 的概念和作用。如何创建和使用 Shadow DOM？

推荐答案

Shadow DOM 是一种 Web 组件技术，允许开发者将独立的 DOM 树附加到元素上，并将其与主 DOM 隔离。这实现了封装，使得组件的内部结构、样式和行为不会影响到页面上的其他部分，反之亦然。

作用：

样式封装： 组件的 CSS 样式不会泄漏到主文档或其他组件，同时，主文档的样式也不会影响组件内部。
DOM 封装： 组件的内部 DOM 结构不会被外部 JavaScript 代码访问或修改，避免了意外的干扰和破坏。
组件复用性： 封装的组件可以在不同的页面和应用中复用，且不会发生冲突。

创建和使用 Shadow DOM：

获取宿主元素： 选择一个你想附加 Shadow DOM 的元素，通常是一个自定义元素或标准 HTML 元素。
创建 Shadow Root： 使用 element.attachShadow({ mode: 'open' | 'closed' }) 方法，将 Shadow Root 附加到宿主元素。mode 参数可以是 open 或 closed，open 允许通过 JavaScript 访问 Shadow DOM，closed 则不允许。
操作 Shadow DOM： 在 Shadow Root 上进行 DOM 操作，添加元素、样式、事件监听等，这些操作只会影响到 Shadow DOM 内部。

示例代码:

-- -------------------- ---- -------
-- -- ------
----- ------ - --------------------------------------

-- -- -- ------ ---- --------
----- ------ - --------------------- ----- ------ ---

-- -- -- ------ ---
----- ----- - --------------------------------
----------------- - -
  ----- -
    -------- ------
    ------- --- ----- -----
    -------- -----
  -
  --------------- -
    ------ -----
  -
--
----- ------- - ------------------------------
----------------------------------------
------------------- - ----- -- ------- ------ --- ------ ------

--------------------------
----------------------------

---------- ----------
-- ----- --- - --------------------------------------- -- ----

本题详细解读

Shadow DOM 的概念

Shadow DOM 是 Web 组件规范中的一个关键组成部分。它允许开发者将一个独立的 DOM 树（称为 Shadow Tree）附加到另一个元素（称为宿主元素）上。这个 Shadow Tree 与主文档的 DOM 树完全隔离，这意味着它们之间不存在直接的父子关系，从而实现了封装。

为什么要隔离？

在没有 Shadow DOM 的情况下，大型 Web 应用很容易变得难以维护，原因在于：

全局样式污染： 全局 CSS 样式可能会意外地影响到组件内部的样式，导致布局错乱。
全局 DOM 访问： JavaScript 代码可以轻易地访问和修改页面上的任何 DOM 元素，包括组件内部的元素，这容易引发意外的错误。
组件复用性差： 由于缺少封装，组件很难在不同的环境中复用，因为它可能会与现有的样式和脚本发生冲突。

Shadow DOM 的出现正是为了解决这些问题，提供了一种封装性更强的组件化开发方式。

Shadow DOM 的作用

Shadow DOM 的主要作用在于实现组件的封装，具体体现在以下几个方面：

样式封装: 组件内部的样式，通过 Shadow DOM 中的 <style> 标签定义，其作用域被限定在 Shadow DOM 内部，不会影响到外部的 DOM 元素。同时，外部的样式也无法直接穿透 Shadow DOM 影响组件内部的元素，除非使用特定的 CSS 选择器（如 ::part()、::slotted()）。
DOM 封装: 组件的内部 DOM 结构被隐藏在 Shadow DOM 内部，外部的 JavaScript 代码不能直接访问和修改它，除非通过组件自身暴露的接口。这有效地防止了外部代码的意外破坏和干扰，提高了组件的稳定性和可靠性。
组件复用: 封装的组件可以像一个独立的单元一样在不同的页面和应用中复用。由于样式和 DOM 的隔离，它们不会与其他组件或页面元素发生冲突，大大提高了组件的复用性和开发效率。

如何创建和使用 Shadow DOM

要创建和使用 Shadow DOM，你需要遵循以下步骤：

选择宿主元素: 首先，你需要确定一个 DOM 元素作为 Shadow DOM 的宿主。这个元素可以是标准的 HTML 元素（如 <div>、<span>），也可以是自定义元素。
创建 Shadow Root: 使用 element.attachShadow({ mode: 'open' | 'closed' }) 方法，将 Shadow Root 附加到宿主元素上。
- element：指宿主元素。
- mode：是一个对象，可以包含 mode 属性，该属性有两个可选值：
  - open：表示可以通过 JavaScript 访问 Shadow DOM 内部的内容。这通常用于开发者调试或者当组件需要提供一些 API 接口时。可以通过宿主元素的 shadowRoot 属性获取到 Shadow Root。
  - closed：表示无法通过 JavaScript 从外部访问 Shadow DOM 的内部结构，即使获取了宿主元素也无法通过 shadowRoot 获取 Shadow Root，这种模式增强了封装性，更适合构建独立的组件，保护内部结构。
操作 Shadow DOM： 在 Shadow Root 上进行 DOM 操作，添加元素、样式、事件监听等。可以使用 shadowRoot.appendChild()、shadowRoot.querySelector() 等方法。
- 样式定义: 将 <style> 元素添加到 Shadow DOM 中，在其中定义组件的内部样式。这些样式只会影响 Shadow DOM 内的元素。
- DOM 结构: 使用 document.createElement() 创建元素，并使用 shadowRoot.appendChild() 将它们添加到 Shadow DOM 中，构建组件的内部结构。
- 事件监听: 你可以使用 shadowRoot.addEventListener() 为 Shadow DOM 中的元素添加事件监听器。
::slotted() 在 Shadow DOM 里面可以使用 ::slotted() 来选择插入的元素，例子如下：

<my-component>
  <span>我是插入的元素</span>
</my-component>

-- -------------------- ---- -------
----- ------ - ------------------- ----- ------ ---
---------------- - -
  -------
  -------------- -
    ----------
  -
  --------
  -------------
--

这样插入到 my-component 中的 span 元素就会变成红色 5. 事件穿透： 当事件发生在 Shadow DOM 内部的元素上时，默认情况下，事件会先在 Shadow DOM 内部传播，然后再传播到主文档的 DOM 树。这意味着你可以通过在 Shadow DOM 内部或外部监听事件来进行相应的处理。 6. slot 插槽 在 Shadow DOM 中可以使用 <slot> 标签来指定一个插槽，插入到宿主元素里面的子元素将会显示在这个插槽的位置，例子如下：

<my-component>
  <div>我是要被插入的元素</div>
</my-component>

const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
  <div>
    <slot></slot>
  </div>
`;

这样 div 元素就会被插入到 slot 标签的位置。

Shadow DOM 提供了强大的封装机制，使得 Web 组件的开发变得更加模块化和可维护。

纠错
反馈