表单提交时无法从自定义Web组件提取FormData，求解决方案

问题根源 #

核心问题是表单关联的自定义元素本身未设置name属性，你将name赋予了ShadowRoot内部的<input>，但Shadow DOM的隔离特性导致表单无法直接识别该输入框；而作为表单关联元素，自定义组件需要自身携带name属性，ElementInternals.setFormValue才会以此作为FormData的键存储数据。

修复方案 #

1. 给自定义元素添加name属性 #

修改HTML中的自定义元素标签，添加name属性（该属性会作为FormData的键）：

<form id='frm'>
  <some-text-field name="test"></some-text-field>
  <button type="submit">Submit</button>
</form>

2. 优化自定义组件代码 #

• 移除ShadowRoot内input的name属性（避免混淆）
• 改用input事件实时同步值（比change事件更即时）
• 简化setFormValue调用，internals会自动关联元素自身的name属性

修改后的组件代码：

class SomeTextFieldElement extends HTMLElement {
    static formAssociated = true;
    #internals;
    #shadowRoot;
    #input;

    constructor() {
        super();
        this.#internals = this.attachInternals();
        this.#shadowRoot = this.attachShadow({mode: 'closed', delegatesFocus: true});
        this.#shadowRoot.innerHTML = "<input autofocus>";
        this.#input = this.#shadowRoot.querySelector('input');
        
        this.#input.addEventListener('input', () => {
            this.#internals.setFormValue(this.#input.value);
        });
    }

    formStateRestoreCallback(state, reason) {
        this.#input.value = state;
    }
}
customElements.define('some-text-field', SomeTextFieldElement);

3. 验证提交逻辑 #

原有的表单提交监听代码无需修改，现在提交表单时，FormData中会包含test: [输入值]的键值对。

额外说明 #

• ElementInternals.setFormValue第一个参数是表单提交的主值，第二个参数是用于表单状态恢复的次要值（可选），此处只需传入输入值即可。
• 自定义元素的name属性是表单识别它的关键，必须设置在自定义元素本身上，而非内部的Shadow DOM元素。

内容的提问来源于stack exchange，提问作者Mohamed Abuelatta