如何利用HTML自定义元素完成跨组件通信

自定义元素跨组件通信必须使用 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 节点或函数——序列化会失败，监听方拿不到。