自定义元素事件处理需绕过框架直面原生机制：正确绑定事件、避免重复监听、处理表单验证与内置元素继承陷阱。
自定义元素不是“加个标签就完事”，它的交互逻辑必须绕过框架惯性，直面原生事件流和生命周期钩子。写错一个 connectedCallback 或漏掉 disconnectedCallback 清理，就会导致内存泄漏或事件重复绑定。
为什么 click 事件在自定义元素里不触发
常见现象：给 <my-button></my-button> 绑了 addEventListener('click', ...)，但点击没反应。根本原因不是事件没发，而是你监听的对象错了——你监听的是自定义元素本身，而它默认不响应用户交互（没有 tabindex、不是可聚焦元素、也不冒泡点击）。
- 确保内部可点击内容（如
<button></button>或<span></span>）真正接收点击，再通过this.dispatchEvent(new Event('click', { bubbles: true }))主动派发 - 或者直接在 shadow DOM 内部的按钮上绑定事件，不要依赖宿主元素的事件冒泡
- 若想让宿主元素本身可点击，需手动加
tabindex="0"并监听keydown处理回车/空格键
如何避免 connectedCallback 中重复绑定事件
connectedCallback 可能被多次调用（比如元素被移出又重新插入 DOM），如果每次都在里面调 addEventListener 而不清理，就会积累多个相同监听器，导致回调执行多次。
- 在
connectedCallback中只做初始化，把事件监听器存为实例属性（如this._onClick = () => {...}），再绑定 - 在
disconnectedCallback中显式移除：this.removeEventListener('click', this._onClick) - 更稳妥的做法是用
once: true选项（适用于只执行一次的逻辑），或用 WeakMap 存储监听器引用以便精准清除
自定义内置元素（extends）的事件继承陷阱
用 customElements.define('my-input', MyInput, { extends: 'input' }) 定义后，在 HTML 中写 <input is="my-input">，看似继承了原生 input 的所有行为，但事件监听容易失效。
- 原生
input的change和input事件仍由浏览器触发，但如果你在类中重写了valuesetter 却没同步触发事件，就会断掉验证链 - 别覆盖
dispatchEvent，否则表单提交时可能丢失值；需要干预时，用super.value = newValue确保底层状态更新 -
formdata事件（用于 FormData 收集）不会自动触发，必须在connectedCallback中监听父表单，并手动append()值
最易被忽略的是：自定义元素的事件是否参与表单验证流程。原生控件靠 reportValidity() 和 setCustomValidity() 驱动，而自定义元素必须主动桥接——哪怕只是透传调用，否则 checkValidity() 总返回 true，:invalid 伪类也永不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
