如何用JavaScript获取网页中含ShadowRoot的所有自定义元素

要获取文档中所有自定义元素（包括ShadowRoot内部的），你需要递归遍历DOM树，同时检查每个元素的ShadowRoot——因为querySelectorAll('*')只能访问当前DOM树，无法穿透ShadowRoot的封闭边界。

实现思路 #

自定义元素的核心特征是标签名包含连字符（如<my-component>，符合Web Components规范），我们可以基于这一点判断，再递归遍历每个元素的ShadowRoot：

1. 创建一个数组存储结果
2. 递归遍历目标节点的所有子元素
3. 对每个元素：
   • 若为自定义元素，加入结果数组
   • 若元素存在shadowRoot，继续遍历其内部元素

代码示例 #

function getAllCustomElements(root = document.documentElement) {
  const customElements = [];
  
  function traverse(node) {
    // 遍历当前节点的所有子元素
    for (const element of node.children) {
      // 判断是否为自定义元素（标签名含连字符）
      if (element.tagName.includes('-')) {
        customElements.push(element);
      }
      
      // 如果存在ShadowRoot，递归遍历其内部
      if (element.shadowRoot) {
        traverse(element.shadowRoot);
      }
    }
  }
  
  traverse(root);
  return customElements;
}

// 使用示例
const allCustomElements = getAllCustomElements();
console.log(allCustomElements);

补充说明 #

• 如果你需要识别自定义内置元素（如<button is="my-button">），可以额外判断element.hasAttribute('is')，结合element.getAttribute('is')来筛选
• 若ShadowRoot是closed模式（创建时用attachShadow({ mode: 'closed' })），则无法通过element.shadowRoot访问，这种情况无法获取内部元素

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