真正能落地的路径只有两条：用 is 属性扩展现有内置元素（如 button is="loading-button"），或用带连字符的独立自定义标签（如 file-uploader）封装逻辑并手动桥接事件。
不能靠重定义 button 或 input 标签来“增强”原生事件行为——浏览器会直接抛 DOMException，且即使绕过，你也拿不到原生 API 和语义。真正能落地的路径只有两条：用 is 属性扩展现有内置元素（如 button is="loading-button"），或用带连字符的独立自定义标签（如 file-uploader）封装逻辑并手动桥接事件。
customElements.define() 为什么不能注册 button、input 等原生名
规范强制要求自定义元素名必须含连字符（如 my-button），且禁止与任何已知 HTML 标签名冲突。试图执行 customElements.define("button", ...) 会立即报错：
Failed to execute 'define' on 'CustomElementRegistry': "button" is not a valid custom element name
这不是兼容性问题，而是浏览器内核级拦截。即使你动态改写原型链，解析阶段生成的节点仍是 HTMLButtonElement 实例，你的类根本不会被实例化。
用 is 属性扩展现有元素时，如何正确绑定和响应原生事件
想让 <button is="loading-button"></button> 支持点击后自动置灰、显示加载态，必须满足以下条件，否则事件监听会失效或 this 指向错误：
- 类必须继承对应内置类：
class LoadingButton extends HTMLButtonElement，不能只继承HTMLElement -
constructor()中第一行必须调用super()，否则实例化失败 - 注册时必须传
{ extends: "button" }，漏掉或写错大小写都会导致升级失败 - 原生事件（如
click）可直接在类中用this.addEventListener("click", ...)绑定，this就是按钮本身，无需额外代理 - 不要在
connectedCallback外操作this.disabled或this.textContent—— 此时 DOM 可能尚未就绪，建议统一在connectedCallback或事件回调中处理
独立自定义元素（如 file-uploader）怎么桥接原生 input[type="file"] 的事件
这类组件不复用原生语义，但需把内部 <input type="file"> 的行为暴露给外部使用者。关键点不在“监听”，而在“转发”：
- 必须在
connectedCallback中调用this.attachShadow({ mode: "open" })，否则样式和事件隔离失效 - 内部
<input>的change事件不能直接暴露给父级——要用this.dispatchEvent(new Event("change", { bubbles: true }))主动派发，让父级能用@change或addEventListener("change")捕获 - 拖拽场景下，
drop事件必须在 shadowRoot 上监听，并显式调用e.preventDefault()，否则drop不触发 -
accept、multiple等属性变更需在attributeChangedCallback中同步到内部<input>，否则 UI 和行为脱节 - Firefox 和 Safari 对
webkitdirectory和webkitGetAsEntry()支持极弱，实际封装时得 fallback 到单层文件选择逻辑，不能默认假设全平台可用
最易忽略的是：自定义元素里没有“自动事件透传”。你写了 <file-uploader></file-uploader>，但若没在组件内部主动 dispatchEvent 或 addEventListener 并转发，这个 click 就永远不会到达 handleClick —— 它只作用于自定义标签自身，而非其内部真实可交互的 <input>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
