"ElementInternals 与表单关联自定义元素：策略与实践"

概述表单关联自定义元素允许自定义组件与原生表单协作（提交、校验、参与约束），通过 `ElementInternals` 管理值与有效性并同步到表单。示例<my-input name="account"></my-input> <script> class MyInput extends HTMLElement { static formAssociated = true #internals = this.attachInternals() constructor() { super(); this.value = '' } connectedCallback() { this.innerHTML = '<input type="text" />' this.querySelector('input').addEventListener('input', e => { this.value = e.target.value this.#internals.setFormValue(this.value) this.#internals.setValidity(this.value ? {} : { valueMissing: true }, this.value ? '' : '必填') }) } } customElements.define('my-input', MyInput) </script> 工程建议有效性与提示：使用 `setValidity` 与自定义消息；与原生约束 API 对齐。无障碍：暴露角色与标签；保证键盘与读屏一致性。兼容：特性检测后启用；旧浏览器回退到常规表单控件或包裹策略。参考与验证HTML 规范（Form-associated custom elements）：https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elementsMDN ElementInternals 文档：https://developer.mozilla.org/docs/Web/API/ElementInternalsChrome 平台文档：https://developer.chrome.com/docs/web-platform/form-associated-custom-elements/