自定义元素中事件委托需在 shadowroot 内监听并用 closest() 实现，必须 attachshadow({mode:'open'})；动态元素事件须在 connectedcallback 中绑定并清理；slot 内容需监听 slotchange 并扫描 assignednodes；jquery 无法穿透 shadow dom，需通过 composed: true 的 customevent 通信。
自定义元素（Custom Element）里怎么用事件委托
原生 customElements.define() 定义的组件内部，不能直接靠父容器做传统事件委托——因为 shadow DOM 默认是封闭的，event.target 在冒泡到 light DOM 时已被重写为 slot 或 host 元素，原始点击目标丢失。
真正可行的做法是：在 custom element 自身内部监听事件，并用 this.shadowRoot.addEventListener('click', ...) + e.target.closest() 做委托。这本质还是委托，只是作用域缩到了 shadow root 内。
- 必须显式调用
this.attachShadow({ mode: 'open' })，否则shadowRoot为null - 不要在 light DOM 父节点上监听 click 并期望捕获 shadow 内部按钮——除非你手动
composed: true派发事件 -
e.composedPath()[0]可用于穿透 shadow boundary 获取原始 target，但兼容性差（Safari 16.4+ 才稳定支持）
动态添加的自定义元素如何绑定事件
如果你用 document.createElement('my-list') 创建后插入 DOM，它的内部按钮仍需靠自身初始化时绑定事件委托逻辑——不能等外部脚本再去“补绑”。否则就回到老问题：元素存在了，但没人管它的交互。
典型错误是把事件监听写在 connectedCallback 外部，或只绑一次却没清理，导致重复绑定。
- 所有事件监听必须放在
connectedCallback中，且每次进入都先this.shadowRoot.removeEventListener(...)（如果之前有） - 若组件支持多次
append()同一实例，要用WeakMap记录是否已初始化，避免重复 setup - 别依赖
document.querySelector('my-list')后再加事件——此时组件可能还没 upgrade 完，shadowRoot还不存在
事件委托和 slot 内容混用时的坑
当自定义元素用 <slot></slot> 接收外部 HTML（比如传入一堆 <button class="action"></button>），这些 button 的点击事件不会自动冒泡进 shadow root——它们属于 light DOM，事件路径止于 slot 的 wrapper 节点。
解决方案不是“把事件监听移到外部”，而是让 custom element 主动监听 slot 变化，并用 slot.assignedNodes({ flatten: true }) 扫描新节点，再对其中匹配 .action 的元素批量 addEventListener。
-
slot.assignedNodes()返回的是 NodeList，不是实时响应式，得配合slotchange事件触发重扫 - 动态插入的 slot 内容（比如通过
innerHTML修改）不会触发slotchange，得手动 dispatch - 别用
slot.addEventListener('click', ...)—— slot 元素本身不接收事件，它只是个占位符
为什么不能直接用 jQuery 的 .on() 绑定到 custom element 上
jQuery 的事件委托依赖 Event.target 和选择器字符串匹配，但在 shadow DOM 中，e.target 是 host 元素（比如 <my-card></my-card>），而不是内部按钮；jQuery 不解析 shadow root，所以 $('my-card').on('click', '.delete', ...) 永远不触发。
如果你非要用 jQuery，唯一办法是把事件监听写在 custom element 内部，再通过 CustomEvent 向外派发，由外部 jQuery 监听这个自定义事件。
- 内部派发：
this.dispatchEvent(new CustomEvent('item-delete', { detail: { id: 123 }, bubbles: true, composed: true })) - 外部监听：
$(document).on('item-delete', function(e) { console.log(e.detail.id) }) -
composed: true是关键，否则事件出不了 shadow boundary
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
