怎么在HTML中通过formAssociated标志使自定义元素参与原生表单提交-html教程-PHP中文网

必须同时满足三个条件：static formassociated = true 声明、构造函数调用 this.attachinternals()、shadow dom 中存在已挂载且可聚焦的内部元素（如），否则浏览器不识别为表单控件，formdata 无法获取值，验证和聚焦均失效。

怎么在html中通过formassociated标志使自定义元素参与原生表单提交

不能只设 static formAssociated = true 就完事——浏览器根本不会把它当表单控件用，FormData 拿不到值，form.elements 里查不到，提交时也完全无视它。

必须调用 `attachInternals()` 并绑定内部可聚焦元素

表单关联自定义元素（FACE）要真正被识别，得满足三个硬性条件：

static formAssociated = true 是声明，不是开关；没它直接被忽略
构造函数里必须调用 this.attachInternals()，否则 this.internals 是 undefined
shadow DOM 里必须有一个真实挂载的、可聚焦的子元素（如 <input> 或 <textarea></textarea>），且该元素需在 connectedCallback 后已存在于 DOM 中

常见错误：在 constructor 里就调 this.internals.setValidity()，但 shadowRoot 还没 append，anchor 元素为 null，导致后续验证失败时抛出 An invalid form control is not focusable。

`name` 属性必须透传到 internals 和内部控件

原生表单靠 name 收集数据，FACE 必须把自身 name 显式同步给内部控件和 internals：

自定义元素自身要有 name attribute（用户写 <my-input name="email"></my-input>）
在 attributeChangedCallback('name', _, newValue) 里，把 newValue 同时设给内部 <input> 的 name，并调用 this.internals.setFormValue(newValue ? new FormData() : null)（若需参与提交）
不设 name → FormData 里字段为空 → 后端收不到这个字段

注意：this.internals.setFormValue() 接收的是 FormData 实例或 null，不能传字符串——传字符串会导致 TypeError: Failed to execute 'setFormValue' on 'ElementInternals'。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

提交时数据怎么进 `FormData`？得手动桥接

FACE 不会自动把内部控件的值塞进表单数据，你得自己搭这座桥：

监听内部 <input> 的 input 或 change 事件
事件回调中构建 FormData，例如：const fd = new FormData(); fd.append(this.name, this.input.value);
调用 this.internals.setFormValue(fd)（注意不是 setValue）
如果控件支持多值（如带 multiple 的 <select></select>），得用 fd.append() 多次，不能只用 fd.set()

漏掉这步，表单提交时这个自定义元素的值永远是空的，哪怕界面上明明填了内容。

验证锚点（anchor）不设等于埋雷

当调用 form.reportValidity() 或点击 submit 按钮触发校验时，浏览器会尝试聚焦首个无效控件。如果 FACE 的 setValidity() 没传第三个参数（anchor），就会报错：

An invalid form control with name='email' is not focusable.

anchor 必须是内部一个已挂载、可聚焦、且 delegatesFocus: true 的元素（比如 <input>）
不能传 this、this.shadowRoot 或未插入 DOM 的节点
推荐写法：this.internals.setValidity({ valueMissing: true }, '邮箱不能为空', this.input)，其中 this.input 是对内部 <input> 的引用

这个 anchor 不仅影响报错，还决定用户按 Tab 键时焦点是否能自然落到你的自定义控件上——很多人卡在这一步，却以为是 shadow DOM 阻断了聚焦逻辑。