自定义元素跨组件通信必须使用 CustomEvent 且 bubbles 和 composed 均设为 true，否则事件无法穿透 Shadow DOM；监听需挂载在 document 或父容器等合适节点，不可依赖 DOM 查找或 data/ARIA 属性。
自定义元素本身不自动支持跨组件通信，必须显式使用 CustomEvent + dispatchEvent() + addEventListener() 构建事件通道，且关键参数 bubbles 和 composed 必须设为 true，否则事件无法穿透 Shadow DOM 边界。
CustomEvent 的 bubbles 和 composed 必须同时为 true
这是最常被忽略的配置点。Shadow DOM 默认拦截事件，即使你在组件内部调用 dispatchEvent()，父级或兄弟组件也收不到——除非事件能冒泡（bubbles: true）且能穿透封装边界（composed: true）。
-
bubbles: false（默认）→ 事件只在当前 shadow root 内传播，外部完全无感知 -
composed: false（默认）→ 事件无法跨越 shadow boundary，哪怕设置了bubbles: true也无效 - 两者缺一不可；漏掉任一个，监听方就永远收不到事件
示例正确写法：new CustomEvent('data-updated', { detail: { value: 42 }, bubbles: true, composed: true })
监听位置决定能否收到事件
事件是否能被监听到，取决于你把 addEventListener() 挂在哪——不是“随便找个节点就行”。
立即学习“前端免费学习笔记（深入）”；
- 监听在
document上：能收到所有冒泡上来的自定义事件，但需注意命名冲突（比如多个组件都发save） - 监听在父容器（如
<div id="app">）上：更精准，避免全局污染，推荐用于局部通信 - 监听在自定义元素实例上（
my-component.addEventListener('xxx', ...)）：仅当该元素是事件目标（即dispatchEvent调用者）时触发，不适用于子组件向父组件通信 - 不能监听在 shadow root 内部节点上（如
this.shadowRoot.querySelector('button').addEventListener(...)），那只是监听原生事件，不是接收自定义事件
跨 shadow root 通信时不要依赖 DOM 查找
如果两个自定义元素各自有 Shadow DOM，彼此之间没有父子关系，就不能靠 querySelector 或属性访问来通信——它们物理隔离。唯一可靠路径是事件。
- 错误做法：试图从 A 组件里
document.querySelector('b-component').someMethod()—— B 组件的 JS 方法对外不可见 - 正确做法：A 发
dispatchEvent(new CustomEvent('request-data', { bubbles: true, composed: true }))，B 在合适层级监听并响应 - 若需返回值，用回调函数传入
detail（如{ callback: () => {...} }），但要注意回调函数不能跨域序列化，仅限同源 JS 环境内有效
避免用 data- 属性或 ARIA 替代事件通信
有人试图用 data-status 或 aria-expanded 同步状态，再靠 MutationObserver 去监听变化——这属于“绕路方案”，不仅性能差、易丢帧，还破坏事件语义。
-
data-属性变更不会触发浏览器原生事件，MutationObserver开销大，且无法表达“意图”（比如是用户操作触发，还是定时器触发） - ARIA 属性是给辅助技术用的，不是通信协议；改
aria-checked并不等于“通知其他组件我已切换” - 真正需要的是可预测、可调试、可取消的事件流，而不是状态轮询
复杂点在于：事件名称要约定好作用域（比如加前缀 myapp:submit-success），且 detail 中尽量传 plain object，别塞 DOM 节点或函数——序列化会失败，监听方拿不到。
