Web Component 中按钮点击需用 dispatchEvent 主动派发自定义事件，且 bubbles 和 composed 必须设为 true 才能穿透 shadow DOM 被父组件监听；事件类型应带前缀（如 "ui:submit"），数据须放在 detail 字段中。
Web Component 里按钮点击怎么触发自定义事件
必须用 dispatchEvent 主动派发，不能只绑 onclick 或监听 click 就完事。浏览器不会自动把按钮点击“升级”成组件级事件，得你自己造、自己发。
常见错误：在 shadow DOM 里写 <button onclick="this.dispatchEvent(...)"> —— 这种内联写法会尝试在全局作用域执行，this 指向不对，dispatchEvent 直接报错。
- 正确做法是在组件类的
connectedCallback或按钮创建后，用addEventListener绑定，再在回调里调用this.dispatchEvent - 事件类型名别用
"click"，容易和原生事件冲突；推荐带前缀，比如"ui:submit"或"action:confirm" - 携带数据必须塞进
detail字段，不要往event上挂额外属性——只有detail是标准约定，父组件才好统一取值
为什么 event.bubbles 和 event.composed 都得设为 true
默认情况下，自定义事件不会冒泡出 shadow DOM 边界，父组件监听不到。不设 bubbles: true，事件连组件根节点都出不去；不设 composed: true，它根本穿不过 shadow boundary。
这两个选项缺一不可，否则你在父组件写 ele.addEventListener("ui:submit", ...) 就是白忙活。
立即学习“前端免费学习笔记（深入）”；
-
bubbles: true→ 让事件能从按钮向上冒泡到自定义元素自身 -
composed: true→ 让事件能穿透 shadow DOM，被 light DOM 中的父级监听到 - IE 不支持
composed，但 2026 年绝大多数项目已无需兼容 IE，可放心用
父组件怎么安全监听并拿到 detail 数据
监听方式和普通 DOM 元素完全一样，但必须确保监听时机：组件实例已挂载（connectedCallback 已执行），且事件已派发。
容易踩的坑：在组件还没插入文档时就调用 addEventListener，或者监听了却没等 detail 解构——比如写成 e.detail.id 却忘了 detail 可能是 undefined。
- 推荐写法：
ele.addEventListener("ui:submit", e => console.log(e.detail?.value)) - 如果用框架（如 Vue/React），注意事件监听要和组件生命周期对齐，避免重复绑定或内存泄漏
- 别依赖事件 target 判断来源——因为
composed: true后，e.target是自定义元素本身，不是内部按钮
data-* 属性不能替代自定义事件传参
data-* 是静态标记，不是通信管道。你不能靠 button.dataset.payload 让父组件“自动感知”变化。
有人试图这么干：<my-button data-id="123"></my-button>，然后期望父组件读这个值——但这是初始快照，按钮点完 ID 没变，事件也没发，父组件根本不知道发生了什么。
- 正确组合：按钮点击 → 派发
CustomEvent→detail携带当前状态（比如{ id: 123, action: "delete" }） -
dataset只适合存配置项（如data-api-url），不适合传动态业务数据 - 频繁读写
dataset不卡，但在input或scroll里反复查它又不做节流，可能拖慢响应
细节最易被忽略：事件对象的 composed 必须显式设为 true，否则 shadow DOM 就是堵墙，再规范的 dispatchEvent 也出不去。
