HTML自定义元素是Web Components规范的核心部分，customElements.define()必须在HTML解析前执行以确保元素正确升级；constructor中不可操作shadowRoot，需在connectedCallback中处理；表单控件须设formAssociated: true并用attachInternals同步值；attributeChangedCallback仅响应setAttribute等操作且需正确声明observedAttributes。
HTML自定义元素就是Web Components的核心落地形式，不是“集成用法”，而是它本来就是Web Components规范的一部分——你写customElements.define()，就是在用Web Components。
为什么customElements.define()必须在元素解析前执行
浏览器解析HTML是自上而下顺序进行的。如果<my-input></my-input>出现在customElements.define('my-input', MyInput)之前，该标签会被当作“未知元素”加入DOM：不触发constructor，也不调用connectedCallback，后续无法补救。
- 最稳妥做法：把
define语句放在<script>中，且置于所有自定义标签之前 - 或使用
defer属性确保脚本在HTML解析完成后、DOM构建完毕前执行 - 动态插入场景（如
el.innerHTML = '<my-card></my-card>'）必须先define再插入，否则新节点不会升级
attachShadow()为什么不能在constructor里操作内容
constructor只保证类实例化，此时元素尚未挂载到DOM，this.shadowRoot为空（即使已调用this.attachShadow()），任何对shadowRoot的appendChild或innerHTML赋值都会失败或被静默丢弃。
- 正确时机是
connectedCallback：它确保元素已插入文档、shadowRoot已就绪 - 注意
connectedCallback可能被多次调用（比如元素被移出又重新插入），需自行加防重复逻辑 - SSR或框架嵌套环境下，这个时序问题更易暴露，不要依赖
constructor做渲染
表单控件怎么真正提交数据而不是只画个壳子
很多<my-input>渲染得再漂亮，点<form>提交时后端收不到值——因为没接入表单生命周期。关键不是渲染<input>，而是让浏览器识别它为“参与表单的元素”。
立即学习“前端免费学习笔记（深入）”；
- 必须在类定义中声明
formAssociated: true选项，否则this.attachInternals()会报错 -
constructor里调用this.attachInternals()获取ElementInternals实例 -
connectedCallback中监听子<input>的input事件，并调用this.internals.setFormValue()同步值 - 原生
name属性仍需透传给内部<input>，否则form.elements查不到
attributeChangedCallback监听失效的常见原因
这个回调只响应setAttribute、removeAttribute和HTML初始属性值，对JS直接赋值（如el.disabled = true）完全无感，且必须显式声明监听列表才生效。
- 必须配合
static observedAttributes = ['disabled', 'value']或static get observedAttributes()返回数组 - 拼写错误（
'disbaled'）、大小写不一致（'Disabled'）或属性名不存在，都不会触发回调 - 初始HTML中写的
<my-toggle checked>会触发一次回调，但oldValue是null，别直接===比较 - 布尔属性（如
checked）的newValue可能是null或字符串''，需转换为布尔值再赋给内部控件
真正难的不是写几个生命周期方法，而是理解每个钩子背后的DOM加载时序和浏览器行为契约——比如connectedCallback不等于“渲染完成”，attributeChangedCallback不等于“任意属性变更”。漏掉一个前提，整个组件就卡在半途不动。
