如何获取包含open shadowRoot元素的所有页面元素及嵌套子元素？

直接递归遍历DOM树+ShadowRoot是最靠谱的方案，不用绕弯子解析HTML——毕竟你要的是能直接调用getComputedStyle()的元素对象，不是HTML字符串。

核心思路 #

1. 从指定根节点（比如document.body）开始遍历所有子元素
2. 对每个元素，先加入结果列表
3. 检查该元素是否有open类型的shadowRoot，如果有，递归遍历shadowRoot内部的所有元素
4. 重复上述过程，直到遍历完所有嵌套的ShadowRoot

实现代码 #

function getAllElementsIncludingShadowRoots(startNode = document.body) {
  const elements = [];
  
  function traverse(node) {
    // 跳过非元素节点（比如文本、注释）
    if (node.nodeType !== Node.ELEMENT_NODE) return;
    
    // 将当前元素加入结果列表
    elements.push(node);
    
    // 遍历当前元素的常规子元素
    const children = node.children;
    for (let i = 0; i < children.length; i++) {
      traverse(children[i]);
    }
    
    // 检查并遍历open类型的shadowRoot
    if (node.shadowRoot && node.shadowRoot.mode === 'open') {
      traverse(node.shadowRoot);
    }
  }
  
  traverse(startNode);
  return elements;
}

// 调用示例：获取所有元素并逐个调用getComputedStyle
const allElements = getAllElementsIncludingShadowRoots();
allElements.forEach(element => {
  const styles = getComputedStyle(element);
  // 这里可以按需处理样式，比如打印元素标签和宽度
  console.log(`${element.tagName}: width = ${styles.width}`);
});

为什么不推荐解析HTML的方案？ #

你提到的把HTML插入隐藏位置解析的方法有明显缺陷：

• 重新插入的元素会丢失原页面的上下文样式，比如父元素的继承样式、自定义CSS变量、媒体查询状态等，导致getComputedStyle()的结果和原页面实际样式不一致
• 会额外创建DOM节点，占用内存，还可能触发不必要的重绘重排

注意事项 #

• 这个方法只处理open类型的ShadowRoot，因为closed类型的ShadowRoot无法通过element.shadowRoot访问
• 如果需要从整个文档开始遍历，把startNode改成document.documentElement即可

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