Web Components 中事件穿透需同时设置 bubbles: true 和 composed: true；仅 bubbles: true 无法突破 Shadow DOM 边界，composed: true 才允许事件抵达 light DOM 或外层组件。
Web Components 默认情况下会阻止事件冒泡到 Shadow DOM 外部，但通过设置 bubbles: true 并配合 composed: true，可以让自定义事件穿透 Shadow DOM 边界，实现跨多层 Web Components 的事件传递。
理解 bubbles 和 composed 的区别
bubbles 控制事件是否在当前 DOM 树（包括 Shadow DOM 内部）中向上冒泡；composed 才决定事件能否“穿透” Shadow DOM 边界，到达 light DOM 或外层组件。仅设 bubbles: true 不足以穿透——必须同时设 composed: true。
在自定义元素中派发可穿透的事件
在组件内部使用 CustomEvent 构造时显式启用两个选项：
- 使用
new CustomEvent('my-event', { bubbles: true, composed: true }) - 确保在 Shadow DOM 内调用
this.dispatchEvent()（不是shadowRoot.dispatchEvent()） - 若事件由子组件触发，父组件需监听该事件并选择是否再次派发（保持
composed: true）
多层嵌套时的监听与转发策略
假设有三层组件：<outer> → <middle> → <inner>，希望 inner 的事件直达 outer：
-
inner派发{ bubbles: true, composed: true }事件 -
middle在其 shadowRoot 中监听该事件，但不阻止，默认即可透传 -
outer直接在 light DOM 节点上监听（如outer.addEventListener('my-event', ...)），无需额外处理 - 若某中间组件需要拦截或改写事件，它可调用
event.stopPropagation()，但注意这会中断穿透
常见陷阱与验证方法
容易出错的地方：
- 忘记设
composed: true—— 事件卡在 Shadow DOM 边界内 - 在
shadowRoot上而非组件实例上调用dispatchEvent—— 事件失去上下文，无法正确冒泡 - 监听时用了
shadowRoot.addEventListener而非组件自身或 light DOM 父节点 —— 收不到穿透事件 - 可通过浏览器开发者工具的 “Event Listeners” 面板查看事件是否被注册在预期节点上，并检查事件对象的
composed属性值
