使用 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

你做错了。尽管从影子 DOM 到所有者文档的事件冒泡在某种程度上是可能的，但它是 tricky 并且通常是错误的方法。与其将按钮隐藏到阴影中，不如使用按钮的 is= 属性：

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

More info.

Answer 2

当您的自定义元素扩展了 HTMLButtonElement 等本机元素时，您将无法再使用 <my-button> 等自定义标签名称（很遗憾）。您必须使用带有 is= 属性的原生标签：

<button type="submit" is="my-button">

如果您不扩展原生元素（在规范中称为 "type extension"），那么您可以使用自定义标签名称。 Type extension example in the spec

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

Submitting a form using a custom button using HTML Web Components

html

web-component