CustomEvent适合单页内无iframe、无Shadow DOM深度封装的轻量通信场景，如编辑器触发editor:run事件，预览区和控制台各自监听响应；需传plain object、加命名空间前缀、设bubbles:false，且监听须在元素ready后注册。
CustomEvent 适合什么场景？
适合单页内、无 iframe、无 Shadow DOM 深度封装的轻量通信。比如编辑器区域触发 editor:run，预览区和控制台都监听它，各自响应——不需要谁等谁返回，也不需要中间路由或状态同步。
常见错误是把它当 Event Bus 用：监听没加命名空间，多个组件 dispatch 同名事件互相干扰；或者往 detail 里塞 function 或 DOMElement，结果静默丢数据。结构化克隆失败不会报错，只让 e.detail 变成 undefined。
- 必须传 plain object：
{ code: "console.log(1)", lang: "js" }，不能是字符串或null - 推荐加前缀：
"editor:run"、"console:clear"，避免冲突 - 设
bubbles: false，除非你真需要冒泡到 document 外层 - 监听必须在目标元素 ready 后注册，比如在
connectedCallback里，而不是模块顶层
MessageChannel 什么时候该上？
当你有多个微应用（比如 Monaco 编辑器 + 预览 iframe + 校验服务）跑在同一个 window 下，且需要双向、异步、不丢消息的通道时，MessageChannel 比 postMessage 更稳——它提供两个端口，天然支持 request-response 模式，且消息顺序保证。
但别在 qiankun sandbox: true 环境下硬上：port 对象无法跨沙箱传递，postMessage 不会报错，只是监听函数永远不触发。IE 也完全不支持，得 fallback 到全局事件。
立即学习“前端免费学习笔记（深入）”；
- 主应用统一创建：
const { port1, port2 } = new MessageChannel()，再把port2注入子应用 - 子应用收到后立刻调用
port2.start()，否则 Chrome/Firefox 下onmessage不生效 - 高频操作（如输入）必须防抖：
requestIdleCallback或setTimeout(..., 300)，否则端口积压延迟不可控 - 卸载时务必
port2.close()，否则内存泄漏
iframe 之间怎么通？
CustomEvent 进不了 iframe，MessageChannel 的 port 也不能直接跨 iframe 传递（除非同源且显式 transfer）。唯一通用解法是 window.postMessage + 内部转事件。
主页面向 iframe 发指令时，targetOrigin 不能写 "*"——尤其涉及 token 或配置项时，必须精确匹配 iframe 的 origin，否则消息被浏览器拦截，连 console 都不报。
- 主页面发：
iframe.contentWindow.postMessage({ type: "set-theme", theme: "dark" }, "https://preview.example.com") - iframe 内监听：
window.addEventListener("message", e => { if (e.origin !== "https://main.example.com") return; document.dispatchEvent(new CustomEvent(e.data.type, { detail: e.data })) }) - iframe 自己的逻辑仍用
document.addEventListener("set-theme", ...)，保持和主逻辑一致
Web Components 里事件怎么穿透 Shadow DOM？
自定义组件 dispatch 的事件默认卡在 shadow boundary，外面监听不到。想让父容器或兄弟组件收到，必须手动开两个开关：bubbles: true 和 composed: true。
但别滥用：如果只是组件内部状态流转，用 this.dispatchEvent() 就够了；只有真正需要“跨影子树通信”时才设 composed。设了之后，事件能穿出 shadowRoot，但也可能意外触发外层无关监听器。
- 正确写法：
this.dispatchEvent(new CustomEvent("value-change", { detail: this.value, bubbles: true, composed: true })) - 监听方仍用
document.addEventListener("value-change", ...)，不是shadowRoot.addEventListener - 避免在
constructor里 dispatch，此时shadowRoot还没 attach，事件发出去也没人收
