必须在 constructor 中调用 attachInternals()，因为浏览器规范强制要求 ElementInternals 对象只能在实例化最初阶段创建一次，且须早于任何 DOM 操作；延迟至 connectedCallback 调用会抛出 NotSupportedError。
必须在自定义元素构造函数中调用 attachInternals()，否则表单无法识别该元素的值和验证状态。
为什么必须在 constructor 中调用 attachInternals()
浏览器只允许在自定义元素实例化**最初阶段**建立与表单系统的绑定。一旦元素进入文档（比如触发 connectedCallback），再调用 attachInternals() 会直接抛出 NotSupportedError。这不是时机问题，而是规范强制限制——ElementInternals 对象只能创建一次，且必须早于任何 DOM 操作或属性读取。
- 错误写法：
connectedCallback里调用this.attachInternals()→ 报错 - 正确写法：仅在
constructor第一行调用super()后立即调用this._internals = this.attachInternals() - 不调用
attachInternals()的后果：即使设置了name属性，formData.get('xxx')返回null；checkValidity()始终返回true；无障碍工具完全忽略该控件
formAssociated 静态属性不能省略
仅调用 attachInternals() 不足以让浏览器把你的元素当作表单控件。必须显式声明 static get formAssociated() { return true; }，否则 attachInternals() 返回的对象虽存在，但浏览器不会将其纳入表单生命周期（如重置、提交、验证触发）。
- 缺失该属性时：
form.reset()不清空你的元素值；form.reportValidity()跳过你的元素；form.elements列表里没有它 - 该属性是只读 getter，不能用
formAssociated = true这样的赋值写法 - 某些旧版 polyfill 会尝试模拟该行为，但原生环境必须严格满足此条件
如何正确设置值与验证状态
ElementInternals 不提供 value 属性，也不自动同步 DOM 属性。你得自己管理内部状态，并通过 setFormValue() 和 setValidity() 显式通知表单系统。
立即学习“前端免费学习笔记（深入）”；
-
setFormValue()接收三种类型：字符串、FormData实例、null（表示该字段不参与提交）。传入数字或布尔值会被隐式转为字符串，但建议主动转换以避免歧义 -
setValidity({ valid: false }, '输入不能为空', inputEl)中第三个参数是可选的关联 DOM 元素，用于聚焦错误时滚动定位；若不传，浏览器可能无法正确高亮错误位置 - 验证消息（第二个参数）会出现在
validationMessage属性中，但只有当willValidate === true且validity.valid === false时才生效 - 别忘了在用户输入后重新调用
setFormValue()，否则formData拿到的仍是初始值
兼容性与常见失效场景
Chrome 77+、Firefox 93+、Safari 16.4+ 支持，但 Safari 16.4 之前版本完全不支持 attachInternals()，且无降级方案。更隐蔽的问题是：如果自定义元素被动态插入表单（例如通过 innerHTML 或 append()），而此时其类尚未注册，浏览器会先按未知元素解析，后续注册也无法补救表单关联。
- 动态渲染场景下，务必确保
customElements.define()在任何 HTML 解析前完成 - Shadow DOM 内部的
<input>不会自动代理到外部自定义元素的ElementInternals，必须手动监听其事件并调用setFormValue() - 使用
disabled属性时，willValidate自动变为false，此时setValidity()无效 —— 这是预期行为，不是 bug
最易被忽略的一点：表单提交时，setFormValue() 设置的值是否已更新？很多开发者在输入事件中只更新内部 this._value，却忘了同步调用 this._internals.setFormValue()，导致提交数据永远滞后一拍。
