如何从含嵌套Shadow DOM的子Shadow DOM节点提取客户端HTML

我曾尝试过多个相关问题但未找到有效解决方案，最初使用的代码无法抓取嵌套的Shadow DOM：

const getDeepShadowDomHtml = (element) => {
    let htmlContent = '';

    // Recursively capture all shadow DOMs and their content
    const processElement = (el) => {
        if (el.shadowRoot) {
            htmlContent += `<${el.tagName.toLowerCase()}${Array.from(el.attributes).map(attr => ` ${attr.name}="${attr.value}"`).join('')}>`;
            Array.from(el.shadowRoot.childNodes).forEach(child => processElement(child));
            htmlContent += `</${el.tagName.toLowerCase()}>`;
        } else {
            htmlContent += el.nodeValue || el.outerHTML || '';
        }
    };

    processElement(element);
    return htmlContent;
};

const findNestedShadowRoot = (startElement, selector) => {
    let element = startElement;
    const selectors = selector.split(' ').filter(Boolean);

    for (const sel of selectors) {
        element = element.shadowRoot.querySelector(sel);
        if (!element) break;
    }

    return element;
};

const behaviorTabElement = findNestedShadowRoot(document.querySelector('shadow-host-selector'), 'first-shadow-selector second-shadow-selector #behaviourtab');

if (behaviorTabElement) {
    const shadowDomContent = getDeepShadowDomHtml(behaviorTabElement);
    console.log(shadowDomContent); // Verify content before download

    const blob = new Blob([shadowDomContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'behaviorTabShadowDOMContent.html';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
} else {
    console.log("The #behaviourtab element was not found.");
}

问题分析 #

1. findNestedShadowRoot逻辑缺陷：该函数假设每个选择器都必须在当前元素的shadowRoot中查找，但实际场景中，选择器对应的元素可能存在于普通DOM子节点中，或者嵌套层级里既有普通DOM又有Shadow DOM，导致无法定位到目标元素。
2. getDeepShadowDomHtml处理不完整：对于没有shadowRoot的普通元素，直接使用outerHTML虽然能获取子节点，但如果子元素本身带有shadowRoot，outerHTML不会包含Shadow DOM内部的内容，导致嵌套Shadow DOM丢失。

修正后的代码 #

// 递归遍历所有节点（包括Shadow DOM），生成完整HTML
const getDeepShadowDomHtml = (element) => {
    let html = '';

    const renderNode = (node) => {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                // 处理元素标签和属性，转义引号避免语法错误
                const tag = node.tagName.toLowerCase();
                const attrs = Array.from(node.attributes)
                    .map(attr => `${attr.name}="${attr.value.replace(/"/g, '"')}"`)
                    .join(' ');
                html += `<${tag}${attrs ? ' ' + attrs : ''}>`;

                // 优先处理Shadow DOM内容，再处理普通子节点
                if (node.shadowRoot) {
                    Array.from(node.shadowRoot.childNodes).forEach(renderNode);
                } else {
                    Array.from(node.childNodes).forEach(renderNode);
                }

                html += `</${tag}>`;
                break;
            case Node.TEXT_NODE:
                // 转义文本中的特殊字符，避免破坏HTML结构
                html += node.textContent.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                break;
            case Node.COMMENT_NODE:
                html += `<!--${node.textContent}-->`;
                break;
            default:
                // 忽略文档片段等非核心节点类型
                break;
        }
    };

    renderNode(element);
    return html;
};

// 递归查找嵌套Shadow DOM中的目标元素
const querySelectorDeep = (startNode, selector) => {
    // 先在当前节点的普通DOM中查找
    let result = startNode.querySelector(selector);
    if (result) return result;

    // 遍历所有子节点，包括Shadow DOM内的节点
    const traverse = (node) => {
        if (result) return;

        // 处理当前节点的Shadow DOM
        if (node.shadowRoot) {
            result = node.shadowRoot.querySelector(selector);
            if (result) return;
            Array.from(node.shadowRoot.childNodes).forEach(traverse);
        }

        // 处理普通子节点
        Array.from(node.childNodes).forEach(child => {
            if (child.nodeType === Node.ELEMENT_NODE) {
                traverse(child);
            }
        });
    };

    traverse(startNode);
    return result;
};

// 使用示例
const behaviorTabElement = querySelectorDeep(document.querySelector('shadow-host-selector'), '#behaviourtab');

if (behaviorTabElement) {
    const fullHtml = getDeepShadowDomHtml(behaviorTabElement);
    console.log(fullHtml);

    // 下载为HTML文件
    const blob = new Blob([fullHtml], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'behaviorTabShadowDOMContent.html';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
} else {
    console.log("未找到#behaviourtab元素");
}

关键改进点 #

• 完整节点类型覆盖：处理元素、文本、注释节点，转义特殊字符避免HTML语法错误。
• Shadow DOM优先遍历：处理元素时先读取shadowRoot内容，再处理普通子节点，确保嵌套Shadow DOM被完整捕获。
• 深度查询逻辑：querySelectorDeep递归遍历所有节点（包括Shadow DOM内部），确保能定位到任意层级的目标元素，不再局限于固定的Shadow DOM层级。

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