event.target总是宿主元素是因为Shadow DOM事件重定向机制，浏览器为封装性将内部事件目标自动改为宿主元素；真实目标需用event.composedPath()[0]获取，跨边界通信须派发bubbles:true且composed:true的自定义事件。
event.target 为什么总是宿主元素，不是真实点击的按钮？
Shadow DOM 内部触发原生事件（如 click）时，浏览器会自动重定向 event.target，使其指向宿主元素（比如 <my-button>），而非内部真实的 <button>。这不是 bug，是隔离设计的一部分——防止外部逻辑意外依赖影子树细节。
常见错误现象：event.target.classList.contains('btn') 总是 false；用 querySelector 找不到影子树内节点，却误以为事件没触发。
- 判断真实目标，请改用
event.composedPath()[0]：它在 Shadow 内外都返回原始触发元素 - 若需兼容旧版 React（16 及更早），避免在宿主上直接写
onclick，改用自定义事件通信 -
event.target === event.composedPath()[0]在 Shadow 内部为true，外部为false，可用来做环境判断
如何让事件真正“冒泡出” Shadow DOM？
原生事件（click、input、change）默认 composed: false，不可修改，也无法穿透边界。所谓“让事件冒泡出去”，本质是主动派发一个 composed: true 的自定义事件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Shadow 内部触发：
element.dispatchEvent(new CustomEvent('ui-submit', { bubbles: true, composed: true })) - 外部监听无需特殊处理：
document.addEventListener('ui-submit', handler)就能收到 - 漏掉
composed: true是最常见错误——事件发出去了，但停在 shadow boundary，外部完全收不到 - 不要试图给
click设置composed: true：属性只读，且语义上不应穿透
slot 内容里的事件，为什么外部监听不到或 target 错乱？
通过 <slot> 投影进来的节点（比如外部传入的 <span onclick="...">），其事件仍遵循 Shadow DOM 的重定向规则。即使内容在视觉上“显示在组件内部”，事件的 target 和冒泡路径仍受影子边界约束。
使用场景举例：一个卡片组件接收外部传入的操作按钮，希望点击后通知父级。
- 投影内容中的原生事件不会自动穿透；必须由组件内部主动捕获再转发
- 推荐做法：在
shadowRoot中监听slot的slotchange，然后对其中的可交互节点手动绑定事件，并转发为composed: true的自定义事件 -
::slotted(*)只能控制投影内容的样式，不能改变其事件行为
为什么 addEventListener 没反应，但 console.log 却能打印？
这通常不是监听器没绑上，而是事件根本没到达监听位置——可能卡在 Shadow boundary，也可能监听对象错了。
排查要点：
- 确认监听的是正确目标：想监听自定义事件，别去监听
document.body却忘了注册名是否拼错（比如监听'submit'但 dispatch 的是'form-submit'） - 检查 Shadow Root 创建方式：
mode: 'closed'会导致element.shadowRoot === null，调试困难，生产环境慎用 - 注意生命周期：在
connectedCallback里绑定事件，别在constructor里操作shadowRoot（此时还未创建） - Chrome DevTools 要开启 “Show user agent shadow DOM” 才能看到原生控件（如
<input type="range">）的内部结构，否则容易误判事件来源
Shadow DOM 的事件机制不是“开关式穿透”，而是一套需要显式声明意图的通信契约。最容易被忽略的，是把 composed: true 当作可选参数——它其实是跨边界通信的准入凭证，缺了就等于没发出去。
