customElements.define报DOMException是因为标签名未含短横线、含大写字母或与原生标签重名，或类未继承HTMLElement、重复注册；constructor中操作shadowRoot无效，应移至connectedCallback。
customElements.define 为什么报 DOMException？
直接调用 customElements.define 报错，八成是名字或类写错了。浏览器对自定义元素名有硬性要求，不是“起个名就行”。
-
customElements.define('my-button', MyButton)✅ 合法：含短横线、小写字母 -
customElements.define('mybutton', MyButton)❌ 报DOMException: The element name must contain a hyphen -
customElements.define('MyButton', MyButton)❌ 同样报错，大小写 + 无短横线双杀 - 类必须是
class MyButton extends HTMLElement，不能是对象字面量、箭头函数或普通函数 - 重复注册同一名称（比如热更新时没加守卫）也会抛
DOMException，建议加if (!customElements.get('my-button')) { customElements.define(...) }
constructor 里写 this.shadowRoot.innerHTML 为什么没效果？
因为 this.shadowRoot 在 constructor 里还没就绪——元素还没挂载到 DOM，attachShadow 虽可调用，但立刻往 shadowRoot 写内容极可能被丢弃，尤其在 SSR 或框架 hydration 场景下。
- 正确时机是
connectedCallback：它保证元素已插入文档、shadowRoot已存在且稳定 -
constructor只适合做轻量初始化（如super()、绑定this方法），别碰 DOM - 如果用了
attachShadow({mode: 'open'})，记得只在connectedCallback中首次渲染，避免重复附加
attributeChangedCallback 怎么监听 checked 这类布尔属性？
这个回调不自动转换类型，checked 属性初始值为 null，JS 赋值 el.checked = true 不触发它——只响应 setAttribute('checked', '') 或 HTML 中的 <x-toggle checked></x-toggle>。
- 必须在
static get observedAttributes()中显式声明，漏写就收不到任何通知 -
newValue是字符串：'true'、''（空字符串也表示真值）、null（移除属性时），别直接=== true - 同步内部状态要自己补逻辑，比如：
input.checked = newValue !== null - JS 属性赋值（
el.disabled = true）不会触发该回调，需额外监听或封装 setter
如何让自定义组件支持表单参与（比如被 form 提交）？
原生 input 能进 form.elements、响应 reportValidity()、触发 change 事件，自定义元素默认啥也没有。想让它“像表单控件一样工作”，得靠 attachInternals()。
立即学习“前端免费学习笔记（深入）”；
- 必须在
constructor中调用this.internals_ = this.attachInternals()，这是唯一合法时机 - 通过
this.internals_.setFormValue(value)主动上报值，否则form.submit()拿不到它的数据 - 手动派发
change和input事件，不然监听者收不到更新 -
reportValidity()和checkValidity()行为也得自己实现并透传给 internals
没走这套路径，组件再漂亮也只是“视觉表单控件”，不是真正的表单参与者——这点容易被忽略，直到联调表单提交时才发现数据丢了。
