乐趣区

关于前端:现代JavaScript高级教程JS-Shadow-DOM创建封装的组件和样式隔离

jiezi
点击在线浏览，体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

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>

  <!-- Shadow DOM 组件 -->
  <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
  • Web Components – MDN Web Docs

以上是对于 JS Shadow DOM 的介绍。通过应用 Shadow DOM，咱们能够轻松创立封装的 Web 组件，并实现款式和行为的隔离。它在创立可重用组件、款式隔离和构建简单 Web 应用程序时十分有用。

退出移动版