customelements.define()注册失败主因有三：名字不合法（须含短横线）、类未显式继承htmlelement、重复注册；attributechangedcallback仅响应html属性变更且需声明observedattributes；影子dom中实现表单语义需启用formassociated并桥接原生表单属性与方法。
customElements.define() 注册失败的常见原因
注册失败基本就三类：名字不合法、类没继承、重复注册。浏览器报错通常是 DOMException: The element name must contain a hyphen 或 Failed to execute 'define' on 'CustomElementRegistry'。
-
my-button合法，mybutton或MyButton都会直接抛错 - 必须是 class 且显式
extends HTMLElement，写成function MyButton()或对象字面量会静默失败或报类型错误 - 开发时建议加守卫：
if (!customElements.get('my-button')) { customElements.define('my-button', MyButton); }，否则热更新或多次加载脚本时容易崩
attributeChangedCallback 监听不到属性变化？
这个回调只响应 HTML 属性变更（setAttribute、removeAttribute、初始 HTML 中写的 <my-input value="abc"></my-input>），对 JS 属性赋值比如 el.value = 'xyz' 完全无感。
- 必须在类上声明
static get observedAttributes() { return ['value', 'disabled']; }，漏写一个就收不到对应变更 -
newValue总是字符串，布尔属性如checked初始值可能是null，别直接用=== true判断 - 想同步 JS 属性和 HTML 属性，得手动补逻辑：在 setter 里调用
this.setAttribute('value', v)，否则双向绑定断掉
影子DOM里怎么让自定义元素真正参与表单？
光套个 shadowRoot 不等于能进 form.elements，也不触发 :disabled 伪类或表单校验。要真语义化，得走 formAssociated 路线。
- 类必须声明
static formAssociated = true，这是开关，不写就当普通 div 处理 - 构造函数里得创建真实
input或button，挂到 shadow DOM 里，并把它的value、checked、validity桥接到自定义元素上 - 必须实现
formDisabledCallback和formResetCallback，否则form.reset()或fieldset[disabled]下状态完全失控
自定义内置元素（is="xxx"）为什么总被忽略？
这类元素比如 <button is="my-button"></button>，浏览器只认标签名 + is 属性双匹配，漏一不可。
- 注册时必须传第三个参数：
customElements.define('my-button', MyButton, { extends: 'button' }); - HTML 中必须写完整：
<button is="my-button">Click</button>，写成<my-button></my-button>就是独立元素，不是内置扩展 - 注意兼容性：Safari 对
is的支持比独立元素晚，13.1+ 才稳定，旧版会回退为普通 button
x-input 要能被 form.reportValidity() 拦住提交，就得把原生 input 的所有表单契约都手动重演一遍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
