DOM

HTMLElement.attachInternals メソッド

 編集:2022.10.02 by T.A.

[Edge]。→

elementElementInternals オブジェクトを返します。

このメソッドを使用すると、カスタム要素をHTMLフォームに参加させることができます。

ElementInternals インターフェイスは、標準の HTML フォーム要素を操作するのと同じ方法でこれらの要素を操作するためのユーティリティを提供し、アクセシビリティ オブジェクト モデルを要素に公開します。

構文
element.attachInternals();
element HTMLElement。(カスタム要素?)
戻り値

ElementInternals

例外
NotSupportedError(DOMException
要素がカスタム要素でない場合にスローされます。
NotSupportedError(DOMException
要素定義の一部として「内部」機能が無効になっている場合にスローされます。
NotSupportedError(DOMException
このメソッドが同じ要素で2回呼び出された場合にスローされます。
mdnより

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

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);
詳細不明

テスト