二十二、JS Shadow DOM：创建封装的组件和样式隔离

引言

在现代的 Web 开发中，组件化和样式隔离是非常重要的概念。为了解决这些问题，Web 标准引入了 Shadow DOM 技术。Shadow DOM 允许开发者创建封装的组件，并将组件的样式和行为隔离在组件的 Shadow DOM 内部。本文将详细介绍 Shadow DOM 的属性和 API，并探讨其在实际开发中的应用场景。

1. 什么是 Shadow DOM

Shadow DOM 是一项 Web 标准，用于创建封装的组件并实现样式隔离。它允许将组件的 HTML 结构、样式和行为封装在一个独立的 DOM 树中，从而与主文档的 DOM 树相互隔离。通过这种方式，开发者可以创建具有独立样式和行为的组件，而不用担心与其他组件或主文档的样式冲突。

2. Shadow DOM API

Shadow DOM 提供了一系列用于操作和管理 Shadow DOM 的 API。

1）添加 Shadow Root：attachShadow(options)

attachShadow 方法用于将 Shadow DOM 附加到指定的元素上。它接收一个 options 参数，用于指定 Shadow DOM 的模式。

const hostElement = document.getElementById('host-element');const shadowRoot = hostElement.attachShadow({ mode: 'open' });

2）获取 Shadow Root：shadowRoot

shadowRoot 属性返回与元素关联的 Shadow Root。

const shadowRoot = hostElement.shadowRoot;

3） 在 Shadow Root 中查询元素：querySelector(selector)

querySelector 方法在 Shadow Root 内部查找匹配指定选择器的第一个元素。

const element = shadowRoot.querySelector('.my-element');

4） 在 Shadow Root 中查询元素列表：querySelectorAll(selector)

querySelectorAll 方法在 Shadow Root 内部查找匹配指定选择器的所有元素。

const elements = shadowRoot.querySelectorAll('.my-element');

5） 获取 Shadow Root 的宿主元素：host

host 属性返回与 Shadow Root 相关联的宿主元素。

const hostElement = shadowRoot.host;

3. Shadow DOM 应用场景

Shadow DOM 在 Web 开发中有许多实际应用场景，下面是几个常见的场景：

1）Web 组件开发

Shadow DOM 可以帮助开发者创建封装的 Web 组件，确保组件的样式和行为不会被外部影响。以下是一个示例，演示如何使用 Shadow DOM 创建一个自定义按钮组件：

/* 组件的样式 */
    .custom-button {
      background-color: 007bff;
 color: white;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
    // 创建 Shadow Root
    const hostElement = document.getElementById('custom-button-container');
    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
    // 创建自定义按钮
    const button = document.createElement('button');
    button.classList.add('custom-button');
    button.textContent = 'Click me';
    // 将按钮添加到 Shadow Root 中
    shadowRoot.appendChild(button);

在上面的示例中，我们创建了一个 Shadow Root，并将其附加到 custom-button-container 宿主元素上。然后，我们在 Shadow Root 中创建了一个自定义按钮，并将其添加到 Shadow Root 中。

带你读《现代Javascript高级教程》二十二、JS Shadow DOM：创建封装的组件和样式隔离（2）

https://developer.aliyun.com/article/1349525?groupCode=tech_library