在表单 Web 组件中说：名称为“”的无效表单控件不可聚焦

Question

最近，我向自定义 Web 组件 (

jb-input

) 添加了一个 required 属性，以便在用户将输入留空时显示错误。 重点是在这个组件系列中，验证机制是在组件逻辑中手动处理的，但是当我调用

form.requestSubmit

时，它会在控制台中显示一个错误，显示

An invalid form control with name=" " is not focusable

。 为了重现该错误，我在代码沙箱中创建了一个示例表单，您可以在here看到。 我该如何解决这个问题？ 仅供参考：因为目前，表单没有原生方法来支持自定义 Web 组件的验证，所以我必须创建一个自定义表单元素来处理我自己的自定义元素验证机制，但这与我当前的此错误问题无关。

我尝试禁用自定义元素的表单本机显示验证机制，或将显示错误消息的自定义方式绑定到

ElementInternal

，但我发现没有办法做到这一点。

Answer 1

通过将

delegatesFocus:true

添加到

attachShadow

不会阻止表单提交

this.attachShadow({
      mode: 'open',
      delegatesFocus:true
});