用于约束验证的自定义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。

正如我从文档中（例如在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>中起作用的功能