shadow dom事件默认不穿透边界，外部监听器的event.target被重定向为宿主元素；需用event.composedpath()[0]获取真实目标，或派发bubbles:true且composed:true的自定义事件实现跨边界通信。
Shadow DOM 事件默认不会穿透边界，外部监听器拿到的 event.target 是宿主元素（host），不是真实触发点——这不是 bug，是封装设计；但如果你需要真实目标或跨边界通信，得主动干预。
为什么 click 监听器拿不到内部 button？
因为浏览器在事件冒泡穿过 Shadow Boundary 时做了 target retargeting：内部 <button></button> 触发的 click，到 light DOM 后 event.target 被自动改成 <my-button></my-button>。这是为了隔离，但会破坏依赖真实 target 的逻辑（比如 React 16 及更早的合成事件系统）。
- 检查是否误用了
event.target判断点击位置，应改用event.composedPath()[0] - 若需兼容旧版 React，避免在 host 上直接绑原生
onclick，改用自定义事件 -
event.target === event.composedPath()[0]在 Shadow 内部为 true，在外部为 false
如何让事件穿透 Shadow Boundary？
关键不是“让原生事件穿透”，而是用 composed: true 主动派发可穿透的自定义事件。原生事件（如 click、input）能否冒泡出 Shadow DOM，由其自身 composed 属性决定——大多数内置事件默认是 false。
- 在 Shadow 内部触发：
element.dispatchEvent(new CustomEvent('ui-click', { bubbles: true, composed: true })) - 外部监听时无需特殊处理：
document.addEventListener('ui-click', handler)就能收到 - 不要试图把
click强行设为composed: true——它不可写，且语义上不应穿透
怎样拿到 Shadow 内部的真实点击元素？
event.composedPath() 是唯一可靠方式。它返回从最深节点开始、包含所有 shadow host 和 light DOM 节点的完整路径，不受 retargeting 影响。
-
event.composedPath()[0]总是真实触发元素（哪怕它在多层嵌套 Shadow 中） -
event.composedPath().includes(myInternalButton)可用于判断是否点中某内部控件 - 注意：IE 不支持，Chrome 53+、Firefox 63+、Safari 10.1+ 已全量支持
React 或 Vue 组件里怎么安全响应 Shadow DOM 事件？
框架的事件代理机制（尤其是 React ≤16）依赖 event.target 做合成分发，而 retargeting 会让它失效。不能指望框架自动识别 Shadow 内部结构。
- React 17+ 把事件代理移到 root 节点，缓解了问题，但若整个应用运行在 Shadow DOM 内，仍需手动绑定
- 推荐方案：在 Shadow 内 dispatch
composed: true自定义事件，外部用useEffect+addEventListener接收 - 避免在 host 元素上写
@click（Vue）或onClick（React）——它们监听的是 retargeted 后的 host，不是内部动作
最容易被忽略的一点：composedPath() 返回的数组顺序是反直觉的——索引 0 是最内层真实目标，末尾才是 document。别用 pop() 或 slice(-1) 去取 host，那会错乱。真要取宿主，就用 event.composedPath()[event.composedPath().length - 1] 或直接访问 event.target。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
