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

Question

我目前正在尝试构建一个自定义输入，它工作得很好，但由于某种原因，所需的属性（表单验证）不起作用。  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>问题：是否有特定原因导致所需属性在表单标签内的自定义输入（模板组件）中不起作用？或者也许它应该起作用，但我不知何故犯了一个错误。

Answer 1

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

Answer 2

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

然而，与表单相关的自定义元素的 API 正在制作中（参见规范），以允许 Web 组件的行为更像表单中的本机输入元素。

• Chrome 状态：https ://www.chromestatus.com/feature/4708990554472448

• 火狐状态：https ://bugzilla.mozilla.org/show_bug.cgi?id=1552327