《现代JavaScript高级教程》JS Shadow DOM：创建封装的组件和样式隔离

迷南。 2023-10-13 14:07 26阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## 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。

#### 2.1 添加 Shadow Root：attachShadow(options) ####

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

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

#### 2.2 获取 Shadow Root：shadowRoot ####

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

const shadowRoot = hostElement.shadowRoot;

#### 2.3 在 Shadow Root 中查询元素：querySelector(selector) ####

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

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

#### 2.4 在 Shadow Root 中查询元素列表：querySelectorAll(selector) ####

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

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

#### 2.5 获取 Shadow Root 的宿主元素：host ####

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

const hostElement = shadowRoot.host;

### 3. Shadow DOM 应用场景 ###

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

#### 3.1 Web 组件开发 ####

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

<!DOCTYPE html>
    <html>
    <head>
      <style>
        /* 组件的样式 */
        .custom-button {
          
          background-color: #007bff;
         
    
     color: white;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
    </head>
    <body>
      
      <div id="custom-button-container"></div>
    
      <script>
        // 创建 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);
      </script>
    </body>
    </html>

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

#### 3.2 样式隔离 ####

使用 Shadow DOM，我们可以实现样式隔离，确保组件的样式不会泄漏到外部环境。这样可以避免样式冲突，并提高组件的可维护性。

<!DOCTYPE html>
    <html>
    <head>
      <style>
        .custom-button {
          
          background-color: #007bff;
          color: white;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
    </head>
    <body>
      
      <div>
        <button class="custom-button">Outer Button</button>
      </div>
    
      
      <div id="custom-button-container"></div>
    
      <script>
        // 创建 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 = 'Shadow Button';
    
        // 将按钮添加到 Shadow Root 中
        shadowRoot.appendChild(button);
      </script>
    </body>
    </html>

在上面的示例中，我们创建了一个具有相同类名的按钮，一个在外部环境中，一个在 Shadow DOM 组件中。由于 Shadow DOM 具有样式隔离的特性，这两个按钮将拥有不同的样式，且彼此不会相互影响。

### 4. 自定义 Shadow DOM API ###

我们还可以模拟实现一些自定义的 Shadow DOM API，以增强 Shadow DOM 的功能。下面是一个示例，展示如何实现一个自定义的 `insertText` 方法，用于向 Shadow DOM 中的元素插入文本内容：

function insertText(element, text) {
        
      const textNode = document.createTextNode(text);
      element.appendChild(textNode);
    }
    
    const shadowRoot = hostElement.attachShadow({
         mode: 'open' });
    const div = document.createElement('div');
    insertText(div, 'Hello, Shadow DOM!');
    shadowRoot.appendChild(div);

在上面的示例中，我们定义了一个名为 `insertText` 的函数，它接收一个元素和文本内容作为参数，并创建一个文本节点，将

文本内容插入到元素中。然后，我们在 Shadow Root 中创建一个 `div` 元素，并使用 `insertText` 方法插入文本内容。

### 5. 参考资料 ###

*  [Shadow DOM API - MDN Web Docs][]
 *  [Introduction to Shadow DOM - Web Components][]
 *  [Using Shadow DOM - Google Developers][]
 *  [Shadow DOM v1: Self-Contained Web Components][Shadow DOM v1_ Self-Contained Web Components]
 *  [Web Components - MDN Web Docs][]

以上是关于 JS Shadow DOM 的介绍。通过使用 Shadow DOM，我们可以轻松创建封装的 Web 组件，并实现样式和行为的隔离。它在创建可重用组件、样式隔离和构建复杂 Web 应用程序时非常有用。

[Shadow DOM API - MDN Web Docs]: https://developer.mozilla.org/en-US/docs/Web/API/Shadow_DOM_API
[Introduction to Shadow DOM - Web Components]: https://developers.google.com/web/fundamentals/web-components/shadowdom
[Using Shadow DOM - Google Developers]: https://developers.google.com/web/fundamentals/web-components/shadowdom#usage
[Shadow DOM v1_ Self-Contained Web Components]: https://developers.google.com/web/fundamentals/web-components/shadowdom-v1
[Web Components - MDN Web Docs]: https://developer.mozilla.org/en-US/docs/Web/Web_Components