自定义元素内原生事件不冒泡到外部是因Shadow DOM隔离机制，event.target被重定向且composed为false；必须派发bubbles: true且composed: true的自定义事件才能跨边界传播。
自定义元素中事件不冒泡到外部的常见现象
原生 HTML 元素（如 button、input）的点击事件默认会冒泡，但自定义元素（如 <my-button>）内部触发的原生事件（click、input 等）**不会穿透 Shadow DOM 边界**，外部监听不到。这不是 bug，而是封装设计的强制行为：浏览器自动重定向 event.target 为宿主元素（即 <my-button>），且原生事件的 composed 属性固定为 false，不可修改。
常见错误现象包括：
– 外部绑了 document.addEventListener('click', handler)，但点击自定义组件内部按钮没反应；
– event.target.classList.contains('inner-btn') 总是 false；
– 控制台能打印日志，但父级逻辑完全收不到事件。
让事件“真正冒泡出去”的唯一可靠方式
必须主动派发一个 bubbles: true 且 composed: true 的自定义事件，这是跨 Shadow DOM 边界的唯一标准路径。
- 在自定义元素内部（如
shadowRoot中）触发：const btn = this.shadowRoot.querySelector('button'); btn.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('submit', { bubbles: true, composed: true })); }); - 外部监听无需特殊处理，和监听普通事件一样：
document.querySelector('my-button').addEventListener('submit', e => { console.log('收到提交', e); }); - 漏掉
composed: true是最高频错误——事件发出了，但卡在 shadow boundary，外部完全收不到；bubbles: true不加则无法向上冒泡到祖先节点。
如何获取 Shadow 内部的真实触发元素
由于 event.target 被重定向为宿主元素，无法直接用它判断点击的是哪个子节点。正确方式是读取 event.composedPath()[0]：
立即学习“前端免费学习笔记（深入）”；
-
event.composedPath()返回从原始触发点开始、经 shadow boundary 后的完整路径数组； -
event.composedPath()[0]在 Shadow 内外都指向真实触发元素（比如内部的button）； - 对比
event.target === event.composedPath()[0]可判断当前是否在 Shadow 内部执行（内部为true，外部为false）。
例如：
this.addEventListener('submit', e => {
const realTarget = e.composedPath()[0];
if (realTarget.matches('.confirm-btn')) {
// 真实点击了确认按钮
}
});
slot 投影内容里的事件处理陷阱
通过 <slot> 投入自定义元素的内容（如外部传入的 <button>），其原生事件仍受 Shadow DOM 隔离约束：目标被重定向、冒泡不出边界。
- 不能指望投影内容的
click自动被外部监听到； - 需在自定义元素内部监听
slotchange，再对slot.assignedNodes()中的可交互节点手动绑定事件； - 然后转发为
composed: true的自定义事件； -
::slotted(*)只影响样式，对事件传播无任何作用。
复杂点在于：Shadow DOM 的事件重定向是浏览器硬性规则，没有绕过手段。所有“冒泡”需求，最终都得回归到显式派发 + composed: true 这一路径——别试图给原生事件打补丁，也别依赖 stopPropagation() 去“修复”它，方向就错了。
