Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Form-associated custom elements

ElementInternals は Document Object Model のインターフェイスで、カスタム要素を HTML フォームに完全に参加させる方法をウェブ開発者に提供します。標準的な HTML フォーム要素を扱うのと同じように、これらの要素を扱うためのユーティリティを提供し、 Accessibility Object Model も要素で使えるようにします。

Web Components

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ElementInternals
77
79
93
16.4
77
16.4
checkValidity

checkValidity() は ElementInternals インタフェイスのメソッドで、要素が適用された制約検証のルールを満たしているかどうかをチェックします。
77
79
98
16.4
77
16.4
form

form は ElementInternals インターフェイスの読み取り専用プロパティで、この要素に関連付けられた HTMLFormElement を返します。
77
79
98
16.4
77
16.4
labels

labels は ElementInternals インターフェイスのプロパティで、要素に関連付けられたラベルを返します。
77
79
98
16.4
77
16.4
reportValidity

reportValidity() は ElementInternals インターフェイスのメソッドで、適用された制約検証ルールをこの要素が満たしているかどうかをチェックします。
77
79
98
16.4
77
16.4
setFormValue

setFormValue() は ElementInternals インターフェイスのメソッドで、このメソッドは、要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。
77
79
98
16.4
77
16.4
setValidity

setValidity() は ElementInternals インターフェイスのメソッドで、この要素の妥当性を設定します。
77
79
98
16.4
77
16.4
validationMessage

validationMessage は ElementInternals インターフェイスの読み取り専用プロパティで、この要素の検証メッセージを返します。
77
79
98
16.4
77
16.4
validity

validity は ElementInternals インターフェイスの読み取り専用プロパティで、制約検証に関して要素が取り得るさまざまな検証状態を表す ValidityState オブジェクトを返します。
77
79
98
16.4
77
16.4
willValidate

willValidate は ElementInternals インターフェイスの読み取り専用プロパティで、この要素が制約検証の候補である送信可能要素である場合に true を返します。
77
79
98
16.4
77
16.4
attachInternals

HTMLElement.attachInternals() メソッドは、 ElementInternals オブジェクトを返します。このメソッドにより、カスタム要素が HTML フォームに参加することができるようになります。 ElementInternals インターフェイスは、標準的な HTML フォーム要素と同じようにこれらの要素を扱うためのユーティリティを提供し、また、要素に対してアクセシビリティオブジェクトモデルを公開します。
77
79
93
16.4
77
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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 value bridge

Use ElementInternals to submit a value from a custom element with the surrounding form.

プレビュー全画面表示

Required state card

Show how a form-associated element can participate in normal form flow.

プレビュー全画面表示

Support fallback note

Explain the current support state when ElementInternals is missing.

プレビュー全画面表示

実務での使いどころ

  • Form-associated custom elements の活用

    ElementInternals は Document Object Model のインターフェイスで、カスタム要素を HTML フォームに完全に参加させる方法をウェブ開発者に提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク