Chrome扩展监听Web Component嵌套Shadow DOM点击事件异常

我用纯JS编写了一个Chrome扩展，内容脚本用于检测并监听网页上的所有点击事件。当点击Web Component内的嵌套Shadow DOM时，点击事件会触发，但event.target指向整个document。

根据Web Component和Shadow DOM相关技术文档，若Shadow DOM为open模式，可通过event.composedPath()识别真实点击目标。但我的场景中Shadow DOM确实是open模式，event.composedPath()却仅返回[document, Window]，无法获取真实点击目标。

此外，我尝试给目标元素及其shadowRoot添加事件监听器，但事件均未触发。我无法访问该网站的源代码，只能通过Chrome扩展进行检测。

尝试的代码 #

1. 在Web Component外部添加监听 #

document.addEventListener('click', (event) => {
    console.log(event.target);  // #document
    console.log(event.composed);  // false
    console.log(event.composedPath()); // (2) [document, Window]
});

2. 给目标元素添加监听 #

let elements = [...document.querySelectorAll("*")].filter(
    element => [element.tagName].some(
        attr => attr.startsWith("MACROPONENT")
    )
);
console.log(elements);

for (let element of elements) {
    console.log(element.shadowRoot?.mode);
  
    element.addEventListener('click', (event) => {
        console.log(event.composed);//this event is not being triggered
    });

    element.shadowRoot?.addEventListener('click', function (e) {
        console.log(e.target); //this event is not being triggered
    });
}

解决思路与方案 #

1. 开启事件捕获模式 #

网页内的Web Component可能通过stopPropagation()阻止了事件冒泡，尝试在监听时开启捕获模式（第三个参数设为true），让事件在捕获阶段就被拦截：

document.addEventListener('click', (event) => {
    console.log('捕获模式下的路径:', event.composedPath());
}, true);

2. 递归遍历所有Shadow DOM节点 #

嵌套Shadow DOM的节点无法通过顶层querySelectorAll直接获取，需要递归遍历所有Shadow DOM内部元素并添加监听：

function attachShadowClickListeners(element) {
    // 给当前元素添加捕获模式监听
    element.addEventListener('click', (e) => {
        console.log('点击目标:', e.target);
        console.log('完整路径:', e.composedPath());
    }, true);
    
    // 递归处理子元素的Shadow DOM
    if (element.shadowRoot) {
        Array.from(element.shadowRoot.querySelectorAll('*')).forEach(child => {
            attachShadowClickListeners(child);
        });
    }
}

// 初始化遍历所有根节点
Array.from(document.querySelectorAll('*')).forEach(el => {
    attachShadowClickListeners(el);
});

3. 排查事件被篡改的可能 #

部分网页会通过修改event.composed属性为false阻止事件穿透，或者调用stopImmediatePropagation()拦截后续监听。可以通过Chrome DevTools的Elements面板，查看目标元素的Event Listeners，确认是否存在阻止事件传播的函数；也可在Sources面板设置点击断点，追踪事件处理流程。

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