能否为表单外的自定义元素设置类似input的form关联属性？

原生HTML里只有input、button这类原生表单控件支持用form属性关联表单外的元素，自定义元素本身默认没这个能力，但我们可以借助自定义元素API手动实现这个需求，步骤很简单：

• 先给目标表单设置id="foo"，确保表单的ID和自定义元素form属性的值一致
• 在自定义元素的类代码里，利用connectedCallback钩子获取关联的表单，然后添加逻辑把自定义元素和表单绑定起来

举个实际的代码例子，比如自定义元素里包含一个输入框，要让它的值在表单提交时被一起收集：

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    // 获取form属性指定的表单ID
    const targetFormId = this.getAttribute('form');
    this.targetForm = document.getElementById(targetFormId);
    
    if (this.targetForm) {
      // 监听表单提交事件，收集自定义元素的值
      this.targetForm.addEventListener('submit', (e) => {
        // 拿到自定义元素内部输入框的值
        const customInputValue = this.querySelector('input').value;
        // 把值加入表单的FormData
        const formData = new FormData(this.targetForm);
        formData.append('custom_field', customInputValue);
        
        // 这里可以替换成实际的提交逻辑，比如用fetch发送数据
        e.preventDefault();
        console.log('提交的所有数据：', [...formData]);
      });
    }
  }
}

// 注册自定义元素
customElements.define('my-custom-element', MyCustomElement);

对应的HTML结构：

<form id="foo">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>

<!-- 表单外的自定义元素，通过form属性关联表单 -->
<my-custom-element form="foo">
  <input type="text" placeholder="自定义额外字段">
</my-custom-element>

如果需要让自定义元素像原生控件一样被表单的elements集合识别（比如通过document.getElementById('foo').elements能找到它），可以让自定义元素实现HTMLFormControlElement接口，但这个场景比较少见，大部分情况下监听表单提交收集值就足够满足需求了。

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