customElements.define() 必须传入继承 HTMLElement 的类，不能传对象或箭头函数；attributeChangedCallback 仅响应 setAttribute，需配合 observedAttributes 和属性 getter/setter 同步状态；实现表单关联需设置 formAssociated、attachInternals 并处理生命周期回调；元素名必须含短横线且避免重复注册。
customElements.define() 必须传 class，不能传对象或箭头函数
直接写 customElements.define('x-button', { connectedCallback() {} }) 会报错：DOMException: The constructor must be a function。浏览器只接受显式继承 HTMLElement 的类，且必须是具名或匿名 class 表达式。
常见错误包括：
- 用对象字面量代替类（无构造函数、无法实例化）
- 用箭头函数包裹逻辑（this 绑定失效，且不满足 new 调用要求）
- 忘记
extends HTMLElement，导致super()报错或formAssociated失效
正确写法必须是：
class XButton extends HTMLElement {
constructor() {
super(); // 漏掉这行，new 实例时直接崩溃
}
connectedCallback() {
this.innerHTML = '<button><slot></slot></button>';
}
}
customElements.define('x-button', XButton);
attributeChangedCallback 只响应 setAttribute，不响应 JS 属性赋值
写 <x-toggle checked></x-toggle> 后执行 el.checked = false，attributeChangedCallback 完全不会触发 —— 因为它只监听 HTML 属性变更，不是 JS 属性变更。
立即学习“前端免费学习笔记（深入）”；
要真正同步状态，得自己补两层逻辑：
- 在
static get observedAttributes()里明确列出要监听的属性，比如['checked', 'disabled'] - 在
attributeChangedCallback中处理字符串转布尔（newValue !== null判定checked） - 同时重写
checked的 getter/setter，把 JS 属性变更也同步到内部<input type="checkbox">上
否则用户调用 el.checked = true，UI 不更新，表单提交也拿不到值。
Shadow DOM 本身不等于语义化，role 和 tabindex 只是“模拟”
<x-toggle role="switch" aria-checked="true"> 在屏幕阅读器里能读出来，但按空格键不会切换、form.elements 里找不到它、:disabled 样式不生效 —— 因为浏览器根本不把它当表单控件。
真正让自定义元素参与表单流程，必须走硬性路径：
- 类声明中加
static formAssociated = true - 构造函数里创建真实
<input type="checkbox">并挂进 Shadow DOM - 实现
formDisabledCallback和formResetCallback - 用
this.internals_ = this.attachInternals()暴露控件状态（如reportValidity()）
跳过任一环，它就只是个“长得像按钮的 div”，SEO 和无障碍支持都会打折。
命名必须含短横线，且不能重复注册
customElements.define('button-group', ButtonGroup) 合法；customElements.define('buttongroup', ...) 会直接抛错：The element name must contain a hyphen。
开发时容易忽略的是重复注册问题 —— 比如热更新或多次加载脚本，customElements.define('x-input', XInput) 第二次执行就崩。
稳妥做法是加守卫：
if (!customElements.get('x-input')) {
customElements.define('x-input', XInput);
}
另外，connectedCallback 里别操作 DOM（此时节点可能还没挂载完成），所有初始化渲染逻辑应放在该回调里，而不是 constructor。
