使用 HTML Web 组件使用自定义按钮提交表单

Question

我已经定义了一个自定义 DOM 元素，但是当放置在表单中时，它不会提交它。单击按钮时如何获取要提交的表单？

<form action="/foo" method="GET">
  <my-button type="submit">click me</my-button>
</form>

这是自定义元素的原型配置：

myButton = Object.create(HTMLButtonElement.prototype);

按钮的模板如下所示：

<template>
  <button type="submit" id="button"><content></content></button>
</template>

Answer 1

今天遇到这个问题，但随后发现了一个更现代的替代方案：Web 组件现在可以是本机表单元素。这里有关于该主题的精彩读物。

简而言之，您现在可以将自定义组件与表单相关联，这意味着它们包含在表单的elements属性中 -HTMLFormControlsCollection表单控制的所有元素的属性。

为此，您需要将以下内容添加到您的组件中：

class MyComponent extends HTMLElement {
  static get formAssociated() { return true; }

  constructor() {
    super();
    this.internals = this.attachInternals();
  }
}

this.internals然后将包含与相关表单交互所需的所有内容，例如this.internals.form, this.internals.setFormValue(), this.internals.checkValidity()。

例如，对于提交按钮，您可以使用：

connectedCallback() {
  const { internals: { form } } = this;

  this.buttonEl.addEventListener('click', () => form.submit());
}