用于约束条件验证的自定义Web组件表单元素

Question

仅某些HTMLElement支持约束验证api（例如HTMLButtonElement）。我想创建一个自定义Web组件，该组件还支持约束验证api。

在下面的示例中给出了预期的结果：

<form>
  <input name="title" required>
  <custom-form-component></custom-form-component>
</form>
<script>
  const form = document.querySelector('form');
  form.checkValidity();
</script>

custom-form-component可以自行调用setCustomValidity（基于相应的用户输入上下文），并验证其为真还是假。因此，对于form.checkValidity()的结果，对custom-form-component的调用应返回true或false。

正如我在documentaion中（例如在MDN上）所发现的那样，仅可以为某些元素附加一个影子根。表单元素是不可能的。但是，只有表单元素支持约束验证api。

具体问题： 如何实现支持约束验证api的自定义Web组件？

Answer 1

这是Web组件的新介绍。截至2019年9月25日，只有Chrome 76支持它。

这是Google Web Devs提供的文章：

https://web.dev/more-capable-form-controls/

它讨论了Web组件的各种附加功能，这些附加功能使它们可以正确地集成为表单元素。

这包括：

1. 表单验证
2. :disabled，:invalid和:valid CSS伪类
3. formdata事件
4. 还有一个静态的formAssociated属性，它告诉浏览器将您的元素视为表单控件。

加上其他几项内容，使您的控件可以在<form>中进行功能校正