HTMLフォームでカスタムHtmlInputElementを検証する方法

Question

カスタムテンプレートでカスタム入力要素を作成し、他のネイティブ入力要素と同じようにネイティブHTML <form>を尊重したいと考えています。たとえば、要素が無効で、ユーザーがフォームを送信しようとすると、ブラウザはカスタム要素の検証ロジックをトリガーし、送信を防ぎエラーを表示します。また、フォームが送信またはシリアル化されると、カスタム要素の値も含まれます。

"is"属性とHtmlInputElementオブジェクトを拡張するカスタムクラスを使用していますが、このメソッドを使用してカスタムテンプレートを使用することはできません。

これが可能なら、どうすればいいですか？

単純なJavaScriptとPolymerを使用した例が歓迎されています。

Answer 1

1つの制限事項：現在のv1バージョンのカスタム要素は、（旧バージョンのv0バージョンではなく、複数のブラウザ間で実装されているわけではなく）複数のブラウザにわたって実装されています。カスタム要素クラスは、 HTMLElement。

したがって、customElements.defineを入力すると、HtmlInputElementに拡張されるクラスは失敗します。

（上記のコメントで述べたように、あなたはポリフィルを使用しない限り、言ったすべてのこと。）

しかしinputを拡張して何かをすることについて具体的な質問へのより良い答えを、Custom input element in native formで答えを参照してください

。