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

【问题标题】：custom web component form element for constraint validation用于约束验证的自定义 Web 组件表单元素
【发布时间】：2019-09-25 14:28:57
【问题描述】：

只有部分 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 组件？

【问题讨论】：

标签： web-component shadow-dom native-web-component constraint-validation

【解决方案1】：

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

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

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

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

这包括：

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

加上其他几项允许您的控件在<form> 中进行功能校正

【讨论】：