required 属性是否应该适用于表单内的模板自定义输入？答案

【问题标题】：Is the required attribute supposed to work for stencil-custom-inputs inside forms?required 属性是否应该适用于表单内的模板自定义输入？
【发布时间】：2020-07-18 09:23:26
【问题描述】：

我目前正在尝试构建一个自定义输入，它工作得很好，但由于某种原因 required 属性（表单验证）不起作用。

  return ( // simplified code, <my-input>
      <div>
        <label htmlFor="myinput">myinput: </label>
        <input required name="myinput" id="myinput" type="text"/>
      </div>
    );

当我将自定义输入嵌套在表单标签中时，即使我设置了 required 属性，表单也不会阻止提交值。如果我只是将组件中的 html/jsx 代码复制/粘贴到表单标签中，required 会按预期工作。

<form>
  // required not working
  <my-input></my-input> 

  <div>
    <label for="myinput">myinput: </label>
    <input required name="myinput" id="myinput" type="text"/> // required working
  </div>

  <input type="submit">
</form>

问题：是否有特定原因导致所需属性在表单标签内的自定义输入（模板组件）中不起作用？或者也许它应该工作，但我不知何故犯了一个错误。

【问题讨论】：

标签： javascript stenciljs

【解决方案1】：

它不起作用，因为 Web 组件的 Shadow DOM 断开了输入和它所属的表单之间的链接。

然而，与表单相关的自定义元素的 API 正在制作中（请参阅 Spec），以允许 Web 组件的行为更像表单中的原生输入元素。

Chrome 状态：https://www.chromestatus.com/feature/4708990554472448
火狐状态：https://bugzilla.mozilla.org/show_bug.cgi?id=1552327

【讨论】：

【解决方案2】：

您可以禁用 shadow dom，或添加作为 @Prop 属性传递的所需属性。

【讨论】：