自定义元素事件默认冒泡，但customevent需显式设置bubbles: true和composed: true才能穿透shadow dom；addeventlistener第三参数行为与原生元素一致；stoppropagation()作用范围受shadow dom边界限制。
自定义元素（Custom Element）中事件冒泡行为和普通 HTML 元素完全一致——它默认就冒泡，不需要额外开启或配置。
自定义元素的 click 事件天然支持冒泡
只要你用 customElements.define() 正确注册了自定义元素，它的内部触发的 click、input、submit 等原生事件，会像 div 或 button 一样逐层向上冒泡到父节点。
- 冒泡路径仍是：触发元素 → 父元素 → body → document
- 不依赖是否用了 Shadow DOM；即使在 Shadow DOM 内部触发事件，只要没调用
stopPropagation()，且该事件是可冒泡的（bubbles: true），就会穿透出来 - 注意：
CustomEvent默认bubbles为false，必须显式设置才能冒泡
在 Shadow DOM 中 dispatch CustomEvent 要设 bubbles: true
很多自定义元素内部用 dispatchEvent(new CustomEvent(...)) 向外通信，但默认不冒泡，容易误以为“没传出去”。
- 错误写法：
this.dispatchEvent(new CustomEvent('change'))→ 外层监听不到 - 正确写法：
this.dispatchEvent(new CustomEvent('change', { bubbles: true })) - 如果还要穿透 Shadow DOM 边界，得加
composed: true（否则父树上的监听器收不到） - 完整推荐写法：
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
addEventListener 第三个参数对自定义元素没特殊影响
addEventListener 的第三个参数（true/false）控制捕获/冒泡阶段，对自定义元素和原生元素行为一致，不存在兼容性例外。
- 在自定义元素自身上调用
addEventListener('click', handler, true)，会在捕获阶段执行 - 在它的父元素上监听，
false（默认）就是等它冒泡上来再触发 - IE 不支持自定义元素，所以不用考虑
useCapture在旧 IE 的失效问题
阻止冒泡时 stopPropagation() 依然有效但要小心位置
在自定义元素内部调用 event.stopPropagation()，能拦住后续冒泡；但若在 Shadow DOM 内部调用，且事件已设 composed: true，则仍会到达 light DOM 的父级——除非你在 light DOM 那一层也调用一次。
- 常见坑：在 Shadow DOM 的
slot子元素上点击，事件从 slot 内容发出，冒泡路径含 light DOM 节点，stopPropagation()只作用于当前路径节点，不会自动跨边界拦截 - 更稳妥的做法是：优先用
event.target === this做条件过滤，而不是无差别stopPropagation() -
stopImmediatePropagation()在自定义元素里同样适用，比如防止多个同名事件监听器重复执行
真正容易被忽略的是 CustomEvent 的 composed 属性——它不像 bubbles 那样有直观命名，但决定了事件能否从 Shadow DOM “透出”到外部 DOM 树。漏设这个，监听器永远收不到事件，还查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
