Shadow DOM 事件隔离关键在于设计边界：默认不穿透，需显式设置 composed: true 才能跨边界；event.target 始终为宿主元素，真实触发源须用 event.composedPath()[0] 获取；手动派发事件必须声明 composed: true。
在组合组件（如 Vue/React 中的嵌套自定义组件，或原生 Web Components + Shadow DOM）中隔离事件冒泡，关键不是“阻止”而是“设计边界”——通过明确事件传播范围、控制事件出口、区分交互意图来实现逻辑隔离。
Shadow DOM 组件：靠 composed 属性控制穿透
Shadow DOM 天然隔离事件，但默认只阻断，不主动隔离。要真正隔离，需显式管理 composed 属性：
- 所有自定义事件 dispatch 时，若不希望被宿主或外层捕获，必须设
{ bubbles: true, composed: false }（composed: false是默认值，但显式声明更清晰） - 避免在 shadow 内部用
click()触发原生事件后依赖外部监听——原生事件天生composed: false，无法穿透，这不是 bug，是机制 - 敏感子组件（如登录框、支付按钮）建议用
attachShadow({ mode: 'closed' })，从根源上防止外部 JS 访问 shadowRoot 并手动监听
Vue/React 组合组件：用修饰符或显式拦截
框架组件本身不自带 Shadow DOM，事件冒泡走标准 DOM 流程，隔离靠精准拦截：
- Vue 模板中，对子组件内操作控件（如展开箭头、删除图标）统一加
@click.stop，不写在容器上 - React 中，在子组件事件处理器第一行调用
e.stopPropagation()，确保只影响该次点击，不影响同级其他逻辑 - 避免在父组件的事件回调里做条件判断来“忽略”子元素事件——这属于事后补救；应在源头（子组件交互点）就切断传播路径
跨层级通信场景：用事件总线或状态提升替代冒泡
当多个嵌套组件需要响应同一动作（如“保存”），不要靠冒泡传递，而应解耦：
- 使用 provide/inject（Vue）或 Context（React）将操作函数向下透传，子组件直接调用，不依赖 DOM 事件流
- 把共享状态和操作逻辑提到共同祖先组件，子组件只负责 UI 渲染和本地交互，通过 props 或 emit/callback 向上反馈
- 完全避免冒泡依赖，也就彻底规避了隔离难题
调试与验证：确认隔离是否生效
光写代码不够，得验证事件是否真被卡在边界内：
- 在宿主元素或父组件根节点监听事件，点击子组件内部控件，检查控制台是否收到——没输出才说明隔离成功
- Chrome DevTools 的 Elements 面板中，右键子组件 → “Break on” → “Attribute modifications”，观察 shadowRoot 是否被意外修改
- 对关键事件打日志，格式统一为
[组件名] event: xxx, isComposed: ${e.composed}，一眼识别穿透状态
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
