如何让事件监听器捕获Shadow DOM跨边界事件？代码为何未生效？

核心问题：你搞反了composed的作用 #

composed: true的功能是让Shadow DOM内部触发的事件能够冒泡到外部DOM树，而不是让外部DOM的事件“钻进”Shadow DOM。你的事件是在父自定义元素（宿主）上分发的，属于外部DOM的事件，它的传播路径根本不会经过Shadow DOM里的子元素——不管你设不设composed或capture: true，子元素都监听不到。

正确的解决方法 #

方案一（推荐）：直接在Shadow DOM内部分发事件

既然要让Shadow DOM里的子元素响应事件，直接在父元素的Shadow根节点上分发事件即可，连composed都不需要：

// 父自定义元素内部代码
const matchingEvent = new CustomEvent('match', {
  bubbles: true, // 按需开启，子元素在冒泡阶段就能监听
})
this.shadowRoot.dispatchEvent(matchingEvent)

子元素的监听可以简化（不需要capture: true，除非你特意要在捕获阶段处理）：

this.addEventListener('match', this.#onMatching)

方案二（必须在宿主元素分发事件时）：做事件转发

如果业务逻辑要求必须在父宿主元素上分发事件，可以在父元素的Shadow根上做事件转发——先监听宿主上的事件，再在Shadow内部重新分发一次：

// 父自定义元素初始化时添加监听
this.addEventListener('match', (e) => {
  this.shadowRoot.dispatchEvent(
    new CustomEvent('match', {
      bubbles: true,
      detail: e.detail // 传递原事件的自定义数据
    })
  )
})

// 原分发事件代码保持不变
const matchingEvent = new CustomEvent('match')
this.dispatchEvent(matchingEvent)

补充说明 #

事件传播是沿着DOM树的层级路径进行的：你在父宿主元素上触发事件时，传播路径是window → 父元素的祖先节点 → 父元素 → 父元素的祖先节点 → window，完全不涉及Shadow DOM内部的子元素，所以子元素的捕获监听自然不会触发。composed的作用是反向的：如果是Shadow DOM内部的子元素触发事件，设composed: true能让外部DOM的父元素监听到这个事件。

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