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

Question

只有一些 HTMLElements 支持约束验证 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。

正如我从文档中发现的（例如在 MDN 上），仅对于某些元素，可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。

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

Answer 1

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

这是 Google Web Devs 提供的一篇文章：

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

它讨论了 Web Components 的各种添加，这些添加使它们可以作为表单元素正确集成。

这包括：

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

再加上其他一些东西，可以让您的控件在一个 <form>