customElements.define("button")会报错，因为自定义元素名必须含连字符且不能与原生标签名冲突，浏览器在解析阶段即拦截该非法注册；正确扩展现有按钮须用is属性配合extends选项注册，如<button is="loading-button">。
自定义元素本身不是“插件”，不能像 npm 包那样直接 install + import 就扩展功能；它是一套浏览器原生机制，必须通过 customElements.define() 显式注册类，并满足命名、继承、生命周期等硬性约束，否则标签解析失败或行为缺失。
为什么customElements.define("button")会报错
浏览器在解析阶段就拦截所有与原生标签名冲突的注册请求。试图执行 customElements.define("button") 会立刻抛出：Failed to execute 'define' on 'CustomElementRegistry': "button" is not a valid custom element name。这不是兼容性问题，是规范强制要求：自定义名必须含连字符（如 my-button），且不能是 div、input、slot 等任何已知 HTML 标签。
- 即使你用
Object.setPrototypeOf动态改写原型，解析生成的节点仍是HTMLButtonElement实例，你的类根本不会被实例化 - 想让按钮带加载状态？只能走
is扩展路径，而不是重定义标签名
扩展现有元素必须用is属性且严格匹配
比如你写了 class LoadingButton extends HTMLButtonElement，并调用 customElements.define("loading-button", LoadingButton, { extends: "button" })，那在 HTML 中唯一有效的写法是：<button is="loading-button">Submit</button>。其他写法全部失效：
-
<loading-button>：浏览器当未知元素处理，不触发connectedCallback，width、disabled等原生属性不可用 -
<button data-is="loading-button">：data-属性无语义，浏览器完全忽略 -
<button is="LoadingButton">或<button is="loadingbutton">：大小写或连字符不一致 → 属性/方法访问失败，甚至渲染异常
独立自定义元素必须手动处理属性和表单参与
像 <date-picker> 这类独立标签看似自由，但关键能力不会自动继承：
立即学习“前端免费学习笔记（深入）”；
- 写了
<date-picker value="2026-06-30">，this.value不会自动同步——得在attributeChangedCallback里手动读取：this.value = this.getAttribute("value") - 要让它真正参与表单提交（出现在
form.elements里、响应submit事件），必须：
– 构造函数中调用this.attachInternals()
– 注册时传{ formAssociated: true }
– 在connectedCallback中监听子<input>并调用this.internals.setFormValue() -
constructor里不能操作this.shadowRoot或this.innerHTML，因为此时 DOM 尚未挂载；所有 DOM 操作必须移入connectedCallback
最容易被忽略的是升级时机：如果自定义元素在 customElements.define() 之前就已存在于 HTML 中（比如服务端直出），它不会自动升级，connectedCallback 也不会触发——必须确保 polyfill 和 define 调用早于 DOM 解析，或手动调用 customElements.upgrade()。旧浏览器（IE、旧 Edge）不支持 v1 规范，不引入 @webcomponents/custom-elements polyfill 就等于功能直接消失。
