ElementInternals

このインターフェイスにはコンストラクターがありません。 ElementInternals オブジェクトは HTMLElement.attachInternals() を呼び出したときに返されます。

ElementInternals.shadowRoot (en-US) 読取専用

この要素に関連付けられた ShadowRoot オブジェクトを返します。

ElementInternals.form 読取専用

この要素に関連付けられた HTMLFormElement を返します。

ElementInternals.states (en-US) 読取専用 Experimental

この要素に関連付けられた CustomStateSet (en-US) を返します。

ElementInternals.willValidate (en-US) 読取専用

論理値で、要素が制約検証の候補である送信可能要素である場合に true を返します。

ElementInternals.validity (en-US) 読取専用

このオブジェクトは、制約検証に関して、その要素が取りうるさまざまな有効性の状態を表します。

ElementInternals.validationMessage (en-US) 読取専用

文字列で、この要素の検証メッセージが入ります。

ElementInternals.labels 読取専用

この要素に関連付けられているすべてのラベル要素の NodeList を返します。

ElementInternals インターフェイスには以下のプロパティがあり、ARIAMixin ミックスインで定義されています。

ElementInternals.ariaAtomic (en-US)

aria-atomic 属性を反映した文字列で、aria-relevant (en-US)属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。

ElementInternals.ariaAutoComplete (en-US)

aria-autocomplete 属性を反映した文字列で、テキスト入力が、コンボボックス、検索ボックス、またはテキストボックスに対するユーザーの意図する値の 1 つまたは複数の予測を表示するトリガーとなり得るかどうかを示し、予測が行われた場合にどのように表示されるかを指定します。

ElementInternals.ariaBusy (en-US)

aria-busy (en-US) 属性を反映した文字列で、要素が変更されているかどうかを示すもので、支援技術はユーザーに公開する前に変更が完了するまで待ちたい場合があります。

ElementInternals.ariaChecked (en-US)

aria-checked (en-US) 属性を反映した文字列で、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェックされた」状態を示します。

ElementInternals.ariaColCount (en-US)

aria-colcount (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッドの列数を定義します。

ElementInternals.ariaColIndex

aria-colindex 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。

ElementInternals.ariaColSpan (en-US)

aria-colspan (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内のセルやグリッドセルにまたがる列の数を定義します。

ElementInternals.ariaCurrent (en-US)

aria-current (en-US) 属性を反映した文字列で、コンテナーや関連する要素の集合の中で、現在のアイテムを表す要素を表します。

ElementInternals.ariaDescription (en-US)

aria-description (en-US) 属性を反映した文字列で、現在の ElementInternals を説明または注釈する文字列値を定義します。

ElementInternals.ariaDisabled

aria-disabled 属性を反映した文字列で、その要素が知覚可能であるが無効であり、編集やその他の操作ができないことを示します。

ElementInternals.ariaExpanded (en-US)

aria-expanded (en-US) 属性を反映した文字列で、この要素が所有または制御するグループ化要素が展開されているか、折りたたまれているかを示します。

ElementInternals.ariaHasPopup (en-US)

aria-haspopup (en-US) 属性を反映した文字列で、 ElementInternals によって起動される、メニューやダイアログのような操作可能なポップアップ要素の有無と種類を示します。

ElementInternals.ariaHidden (en-US)

aria-hidden (en-US) 属性を反映した文字列で、その要素がアクセシビリティ API に公開されているかどうかを示します。

ElementInternals.ariaKeyShortcuts (en-US)

aria-keyshortcuts (en-US) 属性を反映した文字列で、作者が ElementInternals をアクティブにしたりフォーカスを与えたりするために実装したキーボードショートカットを示します。

ElementInternals.ariaLabel

aria-label 属性を反映した文字列で、現在の ElementInternals にラベルを付ける文字列値を定義します。

ElementInternals.ariaLevel

aria-level 属性を反映した文字列で、構造内の要素の階層レベルを定義します。

ElementInternals.ariaLive (en-US)

aria-live (en-US) 属性を反映した文字列で、要素が更新されることを示し、ユーザエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。

ElementInternals.ariaModal (en-US)

aria-modal (en-US) 属性を反映した文字列で、要素が表示されたときにモーダルであるかどうかを示します。

ElementInternals.ariaMultiline

aria-multiline 属性を反映した文字列で、テキストボックスが複数行の入力を受け付けるか、 1 行のみの入力を受け付けるかを示します。

ElementInternals.ariaMultiSelectable (en-US)

aria-multiselectable (en-US) 属性を反映した文字列で、ユーザーが現在の選択可能な子孫から複数のアイテムを選択できることを示します。

ElementInternals.ariaOrientation (en-US)

aria-orientation (en-US) 属性を反映した文字列で、要素の向きが水平であるか、垂直であるか、不明または曖昧であるかを示します。

ElementInternals.ariaPlaceholder (en-US)

aria-placeholder (en-US) 属性を反映した文字列で、コントロールに値がない場合に、ユーザーのデータ入力を補助するための短いヒントを定義します。

ElementInternals.ariaPosInSet (en-US)

aria-posinset (en-US) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムの集合における要素の番号または位置を定義します。

ElementInternals.ariaPressed (en-US)

aria-pressed (en-US) 属性を反映した文字列で、トグルボタンの現在の「押されている」状態を示します。

ElementInternals.ariaReadOnly (en-US)

aria-readonly (en-US) 属性を反映した文字列で、その要素が編集可能ではないが、それ以外は操作可能であることを示します。

ElementInternals.ariaRelevant (en-US) Non-standard

aria-relevant (en-US) 属性を反映した文字列で、ライブ領域内のアクセシビリティツリーが変更されたときに、ユーザーエージェントがどのような通知を行うかを示します。これは、 aria-live 領域内のどのような変更が関連性があり、通知されるべきかを記述するために使用されます。

ElementInternals.ariaRequired (en-US)

aria-required (en-US) 属性を反映した文字列で、これは、フォームを送信する前に、その要素でユーザー入力が必要であることを示します。

ElementInternals.role (en-US)

ARIA ロールを含む文字列です。 ARIA ロールの完全なリストは ARIA 技術のページにあります。

ElementInternals.ariaRoleDescription (en-US)

aria-roledescription (en-US) 属性を反映した文字列で、要素のロールのための、人間が読める、作者がローカライズした説明を定義します。

ElementInternals.ariaRowCount (en-US)

aria-rowcount (en-US) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッドの行の総数を定義します。

ElementInternals.ariaRowIndex (en-US)

aria-rowindex (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。

ElementInternals.ariaRowSpan (en-US)

aria-rowspan (en-US) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがまたがる行の数を定義します。

ElementInternals.ariaSelected (en-US)

aria-selected (en-US) 属性を反映した文字列で、選択状態を持つ要素の現在の「選択されている」状態を示します。

ElementInternals.ariaSetSize (en-US)

aria-setsize (en-US) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムのセットに含まれるアイテムの数を定義します。

ElementInternals.ariaSort (en-US)

aria-sort (en-US) 属性を反映した文字列で、テーブルやグリッドのアイテムが昇順でソートされているか降順でソートされているかを示します。

ElementInternals.ariaValueMax (en-US)

aria-valueMax (en-US) 属性を反映した文字列で、これは範囲ウィジェットの最大許容値を定義します。

ElementInternals.ariaValueMin (en-US)

aria-valueMin (en-US) 属性を反映した文字列で、これは範囲ウィジェットの最小許容値を定義します。

ElementInternals.ariaValueNow (en-US)

aria-valueNow (en-US) 属性を反映した文字列で、範囲ウィジェットの現在値を定義します。

ElementInternals.ariaValueText (en-US)

aria-valuetext (en-US) 属性を反映した文字列で、 これは、範囲ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。

ElementInternals.setFormValue()

要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。

ElementInternals.setValidity()

要素の有効性を設定します。

ElementInternals.checkValidity()

要素が、制約検証ルールを満たしているかどうかをチェックします。

ElementInternals.reportValidity()

要素が制約検証ルールを満たしているかどうかをチェックし、ユーザエージェントに検証メッセージを送信します。

次の例は、カスタムフォーム関連要素を HTMLElement.attachInternals で作成する方法を示しています。

class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }

  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.createElement("custom-checkbox");
let form = document.createElement("form");

// フォームに要素を追加して関連付ける
form.appendChild(element);

console.log(element.internals_.form);
// expected output: <form><custom-checkbox></custom-checkbox></form>

• More capable form controls
• Creating custom form controls with ElementInternals
• ElementInternals polyfill