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

的结果应该 return true 或 false

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

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

Answer 1

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

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

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

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

这包括：

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

加上其他一些允许您的控件在 <form>

中进行功能校正的东西