Web Components 事件冒泡需精准控制：默认 composed: false 阻止穿透，必要时显式设 composed: true；外部应检查 event.composedPath() 或 target 防误触发；框架集成时用修饰符或自定义事件避免冲突。
Web Components 内部事件冒泡到外部，常导致父框架误触发状态更新、重复执行逻辑或 UI 行为错乱。核心问题在于 Shadow DOM 虽隔离样式和结构，但事件默认仍会穿透边界向上冒泡至 Light DOM。解决的关键不是禁用冒泡本身，而是精准控制传播时机与范围。
明确事件是否需要穿透 Shadow DOM 边界
并非所有事件都该冒泡。自定义组件应主动选择性地派发事件：
- 使用 composed: false（默认值）创建 CustomEvent，确保事件仅在 Shadow DOM 内部传播，不会穿透到外部
- 若需通知外部，显式设置 composed: true，并搭配 bubbles: true，让事件可控地冒泡出去
- 避免直接监听原生事件（如 click）后无条件 dispatchEvent，应先判断语义是否属于“对外契约”
在外部监听时主动拦截非预期冒泡
即使内部事件已正确配置，外部父框架仍可能因监听太宽泛而响应异常。此时应在父级事件处理器中做防御性处理：
- 检查 event.target 是否为当前组件的 shadowRoot 或其子节点，而非 light DOM 中的真实子元素
- 利用 event.composedPath() 判断事件来源路径，过滤掉来自特定 Web Component 的冒泡事件
- 对关键操作（如表单提交、状态切换）添加 event.stopImmediatePropagation()，防止多个监听器连锁响应
用事件代理替代全局监听，缩小影响面
父框架不应在 document 或 body 上监听泛化事件，而应将监听器绑定在明确的容器节点上，并结合事件委托逻辑：
- 给 Web Component 外层 wrapper 添加唯一 data 属性（如 data-component="user-card"），只对该容器内事件做响应
- 在事件回调中用 event.target.closest('[data-action]') 精准识别可交互子元素，忽略装饰性节点
- 避免对整个组件区域绑定 click，改用 delegated handler + 显式目标匹配，降低误触发概率
Vue / React 等框架集成时的额外注意点
当 Web Components 嵌入现代框架时，框架自身的事件系统可能与原生冒泡机制叠加：
- 在 Vue 模板中使用 @click.stop 或 @click.capture 修饰符，优先于 JS 中调用 stopPropagation
- React 中若通过 ref 获取 Web Component 实例，监听其 dispatch 的自定义事件，而非监听其容器的原生 click
- 警惕框架对 onXXX 属性的自动绑定行为——某些情况下会隐式添加捕获阶段监听器，干扰原有流程
