本人github

Shadow DOM 是 Web 组件技术的一部分，它允许开发者创建组件时将其内部的 DOM 结构封装起来，避免与页面其他部分的样式和脚本发生冲突。Shadow Root 是 Shadow DOM 的起始节点。

什么是 Shadow DOM 和 Shadow Root

Shadow DOM

Shadow DOM 是一种允许将组件内部的 DOM 树与主文档的 DOM 树隔离的技术。它可以用于创建封装良好的组件，使得组件内部的样式和脚本不影响主文档，反之亦然。

Shadow Root

Shadow Root 是 Shadow DOM 的根节点，是附加到常规 DOM 元素上的一个私有 DOM 树。通过这种方式，可以实现样式和行为的封装。

使用 Shadow DOM 和 Shadow Root

创建 Shadow Root

你可以使用 JavaScript 在一个 DOM 元素上创建一个 Shadow Root：

// 获取宿主元素
const hostElement = document.querySelector('#host-element');

// 创建一个 Shadow Root
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

mode: 'open' 表示可以通过 JavaScript 访问这个 Shadow Root。如果设置为 mode: 'closed'，则无法通过 JavaScript 访问它。

向 Shadow Root 添加内容

你可以向 Shadow Root 中添加 HTML 和 CSS：

// 添加一些样式和内容到 Shadow Root
shadowRoot.innerHTML = `
  <style>
    p {
      color: red;
    }
  </style>
  <p>This is inside Shadow DOM</p>
`;

这样，Shadow Root 中的样式和内容就与主文档隔离开来了。

Shadow DOM 的好处

1. 样式封装：Shadow DOM 允许你将组件的样式与页面的其余部分隔离，从而避免样式冲突。
2. DOM 封装：你可以将组件的内部结构封装起来，不会被外部 JavaScript 无意间修改。
3. 组件化：通过 Shadow DOM，你可以更容易地创建可重用、封装良好的组件。

处理 Shadow DOM 的工具

在使用 Puppeteer 或其他测试框架时，需要特殊处理 Shadow DOM，才能访问和操作封装在 Shadow DOM 内部的元素。

使用 Puppeteer 操作 Shadow DOM

以下是一个示例，展示如何使用 Puppeteer 访问和操作 Shadow DOM 内的元素：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // 获取包含 Shadow DOM 的宿主元素
  const hostElement = await page.$('#host-element');

  // 访问 Shadow Root
  const shadowRoot = await hostElement.evaluateHandle(element => element.shadowRoot);

  // 在 Shadow Root 中查找元素
  const shadowElement = await shadowRoot.$('p');
  const textContent = await page.evaluate(element => element.textContent, shadowElement);

  console.log(textContent); // 输出：This is inside Shadow DOM

  await browser.close();
})();

总结

Shadow DOM 是 Web 组件技术的重要组成部分，提供了样式和 DOM 结构的封装。通过 Shadow Root，可以创建隔离的 DOM 树，避免样式和脚本冲突。了解和使用 Shadow DOM 技术，有助于开发可重用、封装良好的组件。在测试和自动化脚本中，可以通过适当的方法访问和操作 Shadow DOM 内的元素。