HTMLElement: attachInternals() メソッド

HTMLElement.attachInternals() メソッドは、 ElementInternals オブジェクトを返します。このメソッドにより、カスタム要素が HTML フォームに参加することができるようになります。 ElementInternals インターフェイスは、標準的な HTML フォーム要素と同じようにこれらの要素を扱うためのユーティリティを提供し、また、要素に対してアクセシビリティオブジェクトモデルを公開します。

構文

js
attachInternals()

引数

なし。

返値

ElementInternals オブジェクト。

例外

NotSupportedError DOMException

この要素がカスタム要素でなかった場合に発生します。

NotSupportedError DOMException

この要素の定義の一部で「内部」の機能が無効になっていた場合に発生します。

NotSupportedError DOMException

同じ要素に対してこのメソッドを 2 度呼び出したときに発生します。

例

次の例では、カスタムフォームに関連する要素を HTMLElement.attachInternals で作成する方法を示しています。そして、 ElementInternals.form プロパティがコンソールに出力され、 ElementInternals オブジェクトがあることを実証しています。

js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

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

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

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.form);

仕様書

Specification
HTML Standard
# dom-attachinternals

ブラウザーの互換性

BCD tables only load in the browser

関連情報