formassociated: true必须显式声明，否则attachinternals()抛错；调用attachinternals()仅限constructor；需手动监听子控件并调setformvalue；不可继承htmlinputelement，须用自治元素封装子input。
为什么formAssociated: true必须显式声明
不加这个选项，this.attachInternals()会直接抛出 TypeError: Failed to execute 'attachInternals' on 'HTMLElement': Cannot attach internals to an element that is not form-associated。浏览器根本不认你这个元素能参与表单——哪怕它内部套了个 <input>，form.elements 里也找不到它，submit 事件里更不会带它的值。
常见错误是只写了类、调了 attachInternals()，却忘了在 customElements.define() 的第三个参数里传 { formAssociated: true }。这一步不是可选配置，是开关。
- 必须写成
customElements.define('my-input', MyInput, { formAssociated: true }) - 不能写成
customElements.define('my-input', MyInput)（缺选项） - 也不能写成
customElements.define('my-input', MyInput, { formAssociated: false })（关死了）
attachInternals() 调用时机只能在构造函数里
构造函数（constructor()）是唯一允许调用 this.attachInternals() 的地方。一旦元素进入 DOM（比如 connectedCallback），再调就报错：Failed to execute 'attachInternals' on 'HTMLElement': Internals can only be attached in the constructor。
这意味着你不能靠“懒加载”或条件判断来决定是否启用表单能力——只要注册时声明了 formAssociated: true，就必须在 constructor 里立刻拿到 internals 实例，哪怕暂时不用它。
- ✅ 正确：
constructor() { super(); this.internals = this.attachInternals(); } - ❌ 错误：
connectedCallback() { this.internals = this.attachInternals(); } - ❌ 错误：
constructor() { super(); if (this.hasAttribute('required')) this.internals = this.attachInternals(); }
如何让子 <input> 的值真正同步到表单提交数据
光有 internals 不等于值自动透出。你得手动监听子控件变化，并调用 this.internals.setFormValue()。漏掉这步，表单 submit 时字段就是空的。
典型场景是封装一个带图标的文本输入框：<my-input><input slot="input"></my-input>。你必须在 connectedCallback 里找到那个 <input>，绑定 input 或 change 事件，然后更新值。
-
setFormValue()接收字符串、FormData或null；传null表示该字段不参与提交 - 如果子控件是
<textarea></textarea>或<select></select>，同样要监听其input或change，不能只靠初始渲染 - 别用
this.value = ...—— 自定义元素没有原生value属性，那是<input>的，你得走internals
为什么不能继承 HTMLInputElement
Chrome 100+ 禁用了对内置表单元素的继承（extends HTMLInputElement），Firefox 和 Safari 从未支持。写出来看着像，运行就挂：Failed to construct 'MyInput': Illegal constructor 或直接静默失效。
现实路径只有一条：自治型自定义元素（autonomous custom element），也就是自己画 DOM 结构，再用 attachInternals() 模拟表单行为。想复用原生 <input> 的渲染和键盘逻辑？可以，但得把它当子元素塞进去，而不是继承它。
- ❌ 不要写
class MyInput extends HTMLInputElement - ✅ 正确做法：继承
HTMLElement，内部放一个<input type="text">，控制它的value和事件 - ⚠️ 注意：自定义元素的
name、required等属性不会自动透传给子<input>，得手动做映射
setFormValue 必须在用户交互后立刻触发——这些环节断一环，整个表单链就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
