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

张开发
• 2026/4/13 2:40:45 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 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助手

更多文章