如何使 HTML 表单验证自定义 HtmlInputElement？答案

【问题标题】：How to make an HTML form validate a custom HtmlInputElement?如何使 HTML 表单验证自定义 HtmlInputElement？
【发布时间】：2017-02-07 13:17:46
【问题描述】：

我想使用自定义模板创建自定义输入元素，并让原生 HTML <form> 像对待其他原生输入元素一样尊重它。例如，当元素无效并且用户尝试提交表单时，浏览器将触发我的自定义元素上的验证逻辑并阻止提交并显示错误。此外，当表单提交或序列化时，自定义元素的值也包括在内。

我已经使用“is”属性和扩展HtmlInputElement 对象的自定义类，但我似乎无法使用此方法使用自定义模板。

如果可能的话，我该怎么做？

欢迎使用纯 JavaScript 和 Polymer 的示例。

【问题讨论】：

可能和stackoverflow.com/a/40173805/4600982是同一个问题
要理解的一个限制是，在当前 v1 版本的自定义元素中，跨浏览器实现（而不是在未来肯定不会跨浏览器实现的旧 v0 版本）是自定义元素类只能扩展HTMLElement。因此，为 customElements.define 提供扩展 HtmlInputElement 的类将失败。
@sideshowbarker 是的，除非你使用 polyfill。
@sideshowbarker 我想我们可以将您的评论标记为答案。我在 W3 GitHub 上看到一个很长的帖子讨论 is 属性，并且在其中提到这种类似的功能现在是不可能的。
@kshep92 好的，我将其作为答案发布，以便我们至少在这里有一个。对这些限制感到抱歉，但背后的故事是，我们为 v1 推出的产品是关于设计的长期谈判的结果，当我们开始时，需要解决谷歌和苹果之间关于它的一些相当大的分歧。但最终的结果是，我们终于达成了苹果愿意实施并且已经实施的东西。所以这是一个巨大的胜利。

【解决方案1】：

需要理解的一个限制：在当前跨浏览器实现的 v1 版本的自定义元素中（而不是未来肯定不会跨浏览器实现的旧 v0 版本），自定义元素类只能扩展 @ 987654322@.

因此，为 customElements.define 提供扩展 HtmlInputElement 的类将失败。

（说了这么多，除非在上面的评论中注明，否则你使用 polyfill。）

但对于有关制作扩展 input 的特定问题的更好答案，请参阅Custom input element in native form 的答案。

【讨论】：