标签: constraint-validation

我们正在使用 HTML5 表单验证，而不会覆盖验证错误消息的默认系统 UI。这在任何地方都可以正常工作，但在 iOS Safari 上，验证消息在气泡弹出窗口中没有正确对齐。我们已经在两个完全独立的设备上以不同的形式对此进行了测试。即使是没有 CSS 的最小表单也有相同的结果：

https://jsfiddle.net/GinSan/48hnrf92/1/

<form>
  <label for="test">Test field</label>
  <input required id="test" name="test" type="text">
  <button type="submit">Submit</button>
</form>

这是我们测试的 iOS 设备上的验证消息：

验证消息与顶部对齐而不是居中，即使这是一个系统 UI 元素。这是一个已知问题吗？除了向苹果报告并等待修复或更换系统验证消息之外，还有什么可以做的吗？

请看这个网站。

单击登录后，我有此用户凭据表单，尝试登录后丢失Email Address或Password收到此消息：

因此，我尝试通过打印所有页面HTML( driver.getPageSource())来查找此元素，但缺少此文本。

知道如何验证我有这个error message吗？

只有一些 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组件？