HTMLElement: attachInternals()-Methode

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die HTMLElement.attachInternals()-Methode gibt ein ElementInternals-Objekt zurück. Diese Methode ermöglicht es einem benutzerdefinierten Element, an HTML-Formularen teilzunehmen. Das ElementInternals-Interface bietet Hilfsmittel zum Arbeiten mit diesen Elementen in der gleichen Weise, wie Sie mit einem Standard-HTML-Formularelement arbeiten würden, und stellt auch das Accessibility Object Model dem Element zur Verfügung.

Syntax

js
attachInternals()

Parameter

Keine.

Rückgabewert

Ein ElementInternals-Objekt.

Ausnahmen

NotSupportedError DOMException

Ausgelöst, wenn das Element kein benutzerdefiniertes Element ist.

NotSupportedError DOMException

Ausgelöst, wenn die "internals"-Funktion als Teil der Elementdefinition deaktiviert wurde.

NotSupportedError DOMException

Ausgelöst, wenn diese Methode zweimal auf demselben Element aufgerufen wird.

Beispiele

Das folgende Beispiel demonstriert, wie man ein benutzerdefiniertes, formularassoziiertes Element mit HTMLElement.attachInternals erstellt. Die ElementInternals.form-Eigenschaft wird dann in die Konsole ausgegeben, um zu zeigen, dass wir ein ElementInternals-Objekt haben.

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);

Spezifikationen

Specification
HTML
# dom-attachinternals

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attachInternals

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch