自定义元素需显式启用表单关联：必须声明 static formAssociated = true、在构造函数调用 this.attachInternals()、shadow DOM 中存在已挂载的可聚焦控件，否则无法被 form.elements 识别、提交值为空且验证不触发。
自定义元素能真正融入原生表单，但必须显式启用表单关联能力——漏掉 formAssociated = true 或 attachInternals()，它就只是个普通 DOM 节点，form.elements 里找不到，提交时值为空，验证也不触发。
为什么 form.elements 里看不到你的自定义元素
最常见原因是没设 formAssociated = true，或 attachInternals() 调用时机不对。浏览器只认三个硬性条件：
-
static formAssociated = true必须在类定义中声明，不是可选配置，而是“准入声明” -
this.attachInternals()必须在构造函数里调用，不能等到connectedCallback才做——否则this.internals是undefined - shadow DOM 中必须存在已挂载、可聚焦的真实控件（如
<input>），且该控件在connectedCallback后已存在于 DOM 树中
常见踩坑：在 constructor 里就调 this.internals.setValidity()，但 shadowRoot 还没 append，锚定元素为 null，后续校验时报 An invalid form control is not focusable。
怎么让 label for 正确聚焦到内部 input
label[for="x"] 能绑定到自定义元素 ID，点击确实会触发 focusin，但它不会自动把焦点传进 shadow 内部的 <input>——这是必须手动代理的。
立即学习“前端免费学习笔记（深入）”；
- 在
connectedCallback中给根节点加tabindex="0" - 监听
focusin事件，在回调里调this.shadowRoot.querySelector("input").focus() - 如果不做这层代理，屏幕阅读器读出“自定义元素”，用户点击 label 后光标停在空白处，实际无法输入
注意：仅靠 label + for 不足以完成完整无障碍链路，必须补上焦点穿透逻辑。
如何同步 name 和提交值到 FormData
原生表单靠 name 收集数据，自定义元素必须把 name 属性透传，并手动桥接值到 FormData：
- 在
attributeChangedCallback('name', _, newValue)中，同时设置内部<input name="${newValue}">和this.internals.setFormValue(null)（初始清空） - 监听内部
<input>的input事件，构建FormData实例：const fd = new FormData(); fd.append(this.name, this.input.value); - 调用
this.internals.setFormValue(fd)—— 注意不是setValue()，传字符串会报TypeError: Failed to execute 'setFormValue' - 如果支持多值（如
<select multiple>），要用fd.append()多次，不能只用fd.set()
漏掉这步，哪怕界面上填了内容，提交时字段永远是空的。
怎么响应 setCustomValidity 和 reportValidity
setCustomValidity() 对自定义元素无效，它只作用于内置控件。要支持这个 API，必须走 ElementInternals 流程：
- 在自定义方法里调
this.internals.setValidity({ customError: true }, "必填", this.shadowRoot.querySelector("input")) -
reportValidity()必须由开发者显式调用，比如在按钮 click 或表单 submit 拦截中，否则浏览器不会弹出原生错误气泡 - 第二个参数是错误消息文本，第三个参数是锚定元素（用于定位气泡），一般传内部
<input>节点；不设等于埋雷，气泡可能出现在页面顶部或不可见区域
复杂点在于：验证状态、错误消息、锚点、值同步、name 透传、焦点代理，五者缺一不可——少一个，表单交互链就断在某个环节。
