使用Puppeteer的page.content()无法访问Shadow DOM内容，原因何在？

是的，这是有意设计的，本质是遵循了浏览器对Shadow DOM的原生处理规则，具体原因如下：

• Shadow DOM的封装特性：Shadow DOM的核心设计目标之一就是封装，它允许组件将内部结构、样式和行为与页面其他部分隔离，避免冲突。浏览器原生的outerHTML（page.content()本质就是获取页面根节点的outerHTML）不会包含Shadow DOM内部的内容，这是浏览器的默认行为，Puppeteer只是如实返回浏览器提供的结果。

• page.content()的实现逻辑：page.content()方法直接调用浏览器的document.documentElement.outerHTML获取页面内容，而浏览器的这个API本身就不暴露Shadow DOM的内部结构——因为Shadow DOM属于元素的私有子树，除非主动通过shadowRoot属性访问，否则外部无法直接获取其内容。

如果需要获取Shadow DOM的内容，你可以通过Puppeteer的evaluate()方法，在页面上下文里主动访问元素的shadowRoot属性，再获取其内部HTML，示例代码如下：

const shadowDomContent = await page.evaluate(() => {
  // 替换成目标元素的选择器
  const targetElement = document.querySelector('#your-target-element');
  if (targetElement?.shadowRoot) {
    return targetElement.shadowRoot.innerHTML;
  }
  return '';
});
console.log(shadowDomContent);

内容的提问来源于stack exchange，提问作者piyush jindal