shadow dom 中 document.addeventlistener('click') 拿不到内部按钮，是因为事件冒泡时 event.target 被重定向为宿主元素而非真实目标；应改用 event.composedpath()[0] 获取真实触发元素或派发 composed: true 的自定义事件。
为什么 document.addEventListener('click') 拿不到 Shadow DOM 里的按钮
不是监听器没绑上，是浏览器在事件冒泡穿过 Shadow Boundary 时主动重定向了 event.target —— 它被替换成宿主元素（比如 <my-button></my-button>），而不是内部真实的 <button></button>。这是 Shadow DOM 的封装设计，不是 bug。
常见错误现象包括：
-
event.target === myInnerButton永远为false - React ≤16 的
onClick不触发（因合成事件依赖event.target） - 全局点击埋点逻辑在 Web Components 区域全部漏报
正确做法是放弃依赖 event.target，改用 event.composedPath()[0] 获取真实触发元素，或在 Shadow 内部派发 composed: true 的自定义事件。
如何在 Shadow DOM 外部安全做事件委托
不能靠 document.addEventListener('click', handler) 直接代理内部按钮，但可以用标准方式重建委托链：监听顶层容器或 document，再用 event.composedPath() 查找真实目标。
实操建议：
- 监听
document或父容器的click，处理逻辑必须基于event.composedPath()[0]判断点击位置 - 避免遍历整个
composedPath()数组，通常只需取[0]或用.includes(myInternalElement)做存在判断 - 若需兼容 IE（
composedPath不支持），只能退回到组件内部暴露事件，或用MutationObserver动态绑定 - 性能影响极小——
composedPath()是浏览器原生方法，Chrome 53+ / Firefox 63+ / Safari 10.1+ 均已优化
怎么让自定义事件穿透 Shadow Boundary
原生事件（如 click、input）的 composed 属性是只读的，无法强行穿透。唯一可控出口，是手动派发 composed: true 的自定义事件。
关键参数缺一不可：
-
bubbles: true必须同时设置，否则事件根本不会冒泡出 Shadow Root -
composed: true是开关，缺一则外部监听收不到 - 不要在宿主元素上写
onclick=""—— 它拿到的是重定向后的target，语义失真
示例：
innerButton.dispatchEvent(new CustomEvent('ui-click', { bubbles: true, composed: true }));
外部可直接监听：
document.addEventListener('ui-click', handler);
自定义元素内部如何实现事件委托
在 customElements.define() 定义的组件里，事件委托必须在 this.shadowRoot 内监听，并用 e.target.closest() 实现，不能指望外部代理。
必须注意：
- 显式调用
this.attachShadow({ mode: 'open' })，否则shadowRoot为null - 动态添加的子元素，事件监听必须放在
connectedCallback中，且每次进入前先清理旧监听 - 使用
<slot></slot>接收的内容不属于 Shadow DOM，需监听slotchange事件，再用slot.assignedNodes({ flatten: true })扫描并绑定 - jQuery 等库无法穿透 Shadow DOM，必须用
composed: true自定义事件通信
复杂点不在“能不能做”，而在“在哪做”和“何时清理”——所有交互逻辑必须锚定在组件生命周期内，脱离这个上下文就容易漏绑、重复绑、或监听到不存在的节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
