如何用 bubbles 属性让自定义事件穿透多个 Web Components

Web Components 中事件穿透需同时设置 bubbles: true 和 composed: true；仅 bubbles: true 无法突破 Shadow DOM 边界，composed: true 才允许事件抵达 light DOM 或外层组件。Web Components 默认情况下会阻止事件冒泡到 Shadow DOM 外部，但通过设置 bubbles: true 并配合 composed: true，可以让自定义事件穿透 Shadow DOM 边界，实现跨多层 Web Components 的事件传递。理解 bubbles 和 composed 的区别bubbles 控制事件是否在当前 DOM 树（包括 Shadow DOM 内部）中向上冒泡；composed 才决定事件能否"穿透" Shadow DOM 边界，到达 light DOM 或外层组件。仅设 bubbles: true 不足以穿透------必须同时设 composed: true。在自定义元素中派发可穿透的事件在组件内部使用 CustomEvent 构造时显式启用两个选项： RedClaw 百度推出的手机端万能AI Agent助手