Form-associated custom elements
フォーム関連カスタム要素により、カスタム要素がネイティブフォーム要素のように動作し、フォームの送信やバリデーションに参加できます。
概要
フォーム関連カスタム要素により、カスタム要素がネイティブフォーム要素のように動作し、フォームの送信やバリデーションに参加できます。
対応ブラウザ
デスクトップ
Chrome 77+
Edge 79+
Safari 16.4+
Firefox 98+
モバイル
Chrome Android 77+
Safari iOS 16.4+
Firefox Android 98+
基本構文
HTML
class MyInput extends HTMLElement {
static formAssociated = true;
#internals;
constructor() {
super();
this.#internals = this.attachInternals();
}
set value(v) {
this.#internals.setFormValue(v);
}
get validity() {
return this.#internals.validity;
}
}
customElements.define('my-input', MyInput);実務での使いどころ
-
Form-associated custom elements の活用
フォーム関連カスタム要素。カスタム要素をネイティブフォームに統合する機能。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。