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 example in the spec

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

2 个答案: