ElementInternals

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Schnittstelle ElementInternals des Document Object Model ermöglicht es Webentwicklern, benutzerdefinierte Elemente vollständig in HTML-Formulare einzubinden. Sie stellt Hilfsmittel bereit, mit denen sich diese Elemente wie gewöhnliche HTML-Formularelemente verwenden lassen, und macht dem Element außerdem das Accessibility Object Model zugänglich.

Konstruktor

Diese Schnittstelle hat keinen Konstruktor. Beim Aufruf von HTMLElement.attachInternals() wird ein ElementInternals-Objekt zurückgegeben.

Instanzeigenschaften

ElementInternals.shadowRoot Schreibgeschützt: Gibt das diesem Element zugeordnete ShadowRoot-Objekt zurück.
ElementInternals.form Schreibgeschützt: Gibt das diesem Element zugeordnete HTMLFormElement zurück.
ElementInternals.states Schreibgeschützt: Gibt das diesem Element zugeordnete CustomStateSet zurück.
ElementInternals.willValidate Schreibgeschützt: Ein boolescher Wert, der true zurückgibt, wenn das Element ein absendbares Element ist, für das eine Einschränkungsvalidierung infrage kommt.
ElementInternals.validity Schreibgeschützt: Gibt ein ValidityState-Objekt zurück, das die verschiedenen Gültigkeitszustände darstellt, die das Element im Hinblick auf die Einschränkungsvalidierung annehmen kann.
ElementInternals.validationMessage Schreibgeschützt: Eine Zeichenfolge mit der Validierungsmeldung dieses Elements.
ElementInternals.labels Schreibgeschützt: Gibt eine NodeList mit allen diesem Element zugeordneten Label-Elementen zurück.

Von ARIA übernommene Instanzeigenschaften

Die Schnittstelle ElementInternals umfasst außerdem die folgenden Eigenschaften.

Hinweis: Diese Eigenschaften ermöglichen es, für ein benutzerdefiniertes Element standardmäßige Semantiken für die Barrierefreiheit festzulegen. Sie können durch vom Autor definierte Attribute überschrieben werden. Die standardmäßigen Semantiken bleiben jedoch erhalten, wenn der Autor diese Attribute löscht oder gar nicht erst hinzufügt. Weitere Informationen finden Sie in der Erläuterung zum Accessibility Object Model.

ElementInternals.ariaAtomic: Eine Zeichenfolge, die das Attribut aria-atomic widerspiegelt. Dieses gibt an, ob assistive Technologien anhand der durch das Attribut aria-relevant festgelegten Änderungsbenachrichtigungen den gesamten geänderten Bereich oder nur Teile davon wiedergeben.
ElementInternals.ariaAutoComplete: Eine Zeichenfolge, die das Attribut aria-autocomplete widerspiegelt. Dieses gibt an, ob die Texteingabe die Anzeige einer oder mehrerer Vorhersagen für den beabsichtigten Wert des Benutzers in einer Combobox, einem Suchfeld oder einem Textfeld auslösen kann, und legt fest, wie solche Vorhersagen dargestellt werden.
ElementInternals.ariaBrailleLabel: Eine Zeichenfolge, die das Attribut aria-braillelabel widerspiegelt. Dieses definiert die Braille-Beschriftung des Elements.
ElementInternals.ariaBrailleRoleDescription: Eine Zeichenfolge, die das Attribut aria-brailleroledescription widerspiegelt. Dieses definiert die ARIA-Braille-Rollenbeschreibung des Elements.
ElementInternals.ariaBusy: Eine Zeichenfolge, die das Attribut aria-busy widerspiegelt. Dieses gibt an, ob ein Element gerade geändert wird, sodass assistive Technologien mit der Darstellung für den Benutzer warten können, bis die Änderungen abgeschlossen sind.
ElementInternals.ariaChecked: Eine Zeichenfolge, die das Attribut aria-checked widerspiegelt. Dieses gibt den aktuellen Auswahlzustand von Kontrollkästchen, Optionsfeldern und anderen Widgets mit einem solchen Zustand an.
ElementInternals.ariaColCount: Eine Zeichenfolge, die das Attribut aria-colcount widerspiegelt. Dieses definiert die Anzahl der Spalten in einer Tabelle, einem Grid oder einem Treegrid.
ElementInternals.ariaColIndex: Eine Zeichenfolge, die das Attribut aria-colindex widerspiegelt. Dieses definiert den Spaltenindex oder die Position eines Elements bezogen auf die Gesamtzahl der Spalten in einer Tabelle, einem Grid oder einem Treegrid.
ElementInternals.ariaColIndexText: Eine Zeichenfolge, die das Attribut aria-colindextext widerspiegelt. Dieses definiert eine für Menschen lesbare Textalternative für aria-colindex.
ElementInternals.ariaColSpan: Eine Zeichenfolge, die das Attribut aria-colspan widerspiegelt. Dieses definiert die Anzahl der Spalten, über die sich eine Zelle oder Grid-Zelle in einer Tabelle, einem Grid oder einem Treegrid erstreckt.
ElementInternals.ariaCurrent: Eine Zeichenfolge, die das Attribut aria-current widerspiegelt. Dieses kennzeichnet das Element, das innerhalb eines Containers oder einer Gruppe zusammengehöriger Elemente das aktuelle Element darstellt.
ElementInternals.ariaDescription: Eine Zeichenfolge, die das Attribut aria-description widerspiegelt. Dieses definiert einen Zeichenfolgenwert, der das aktuelle ElementInternals-Objekt beschreibt oder mit einer Anmerkung versieht.
ElementInternals.ariaDisabled: Eine Zeichenfolge, die das Attribut aria-disabled widerspiegelt. Dieses gibt an, dass das Element wahrnehmbar, aber deaktiviert und daher weder bearbeitbar noch anderweitig bedienbar ist.
ElementInternals.ariaExpanded: Eine Zeichenfolge, die das Attribut aria-expanded widerspiegelt. Dieses gibt an, ob ein Gruppierungselement, das zu diesem Element gehört oder von ihm gesteuert wird, ausgeklappt oder eingeklappt ist.
ElementInternals.ariaHasPopup: Eine Zeichenfolge, die das Attribut aria-haspopup widerspiegelt. Dieses gibt an, ob ein interaktives Popup-Element, etwa ein Menü oder Dialog, durch ein ElementInternals-Objekt ausgelöst werden kann und um welchen Typ es sich handelt.
ElementInternals.ariaHidden: Eine Zeichenfolge, die das Attribut aria-hidden widerspiegelt. Dieses gibt an, ob das Element einer Barrierefreiheits-API zugänglich gemacht wird.
ElementInternals.ariaInvalid: Eine Zeichenfolge, die das Attribut aria-invalid widerspiegelt. Dieses gibt an, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.
ElementInternals.ariaKeyShortcuts: Eine Zeichenfolge, die das Attribut aria-keyshortcuts widerspiegelt. Dieses gibt Tastenkombinationen an, die ein Autor implementiert hat, um ein Objekt zu aktivieren oder den Fokus darauf zu setzen.
ElementInternals.ariaLabel: Eine Zeichenfolge, die das Attribut aria-label widerspiegelt. Dieses definiert einen Zeichenfolgenwert, der das aktuelle Objekt beschriftet.
ElementInternals.ariaLevel: Eine Zeichenfolge, die das Attribut aria-level widerspiegelt. Dieses definiert die Hierarchieebene eines Elements innerhalb einer Struktur.
ElementInternals.ariaLive: Eine Zeichenfolge, die das Attribut aria-live widerspiegelt. Dieses gibt an, dass ein Element aktualisiert wird, und beschreibt, welche Arten von Aktualisierungen Benutzeragenten, assistive Technologien und Benutzer in der Live-Region erwarten können.
ElementInternals.ariaModal: Eine Zeichenfolge, die das Attribut aria-modal widerspiegelt. Dieses gibt an, ob ein Element bei seiner Anzeige modal ist.
ElementInternals.ariaMultiLine: Eine Zeichenfolge, die das Attribut aria-multiline widerspiegelt. Dieses gibt an, ob ein Textfeld eine mehrzeilige oder nur eine einzeilige Eingabe akzeptiert.
ElementInternals.ariaMultiSelectable: Eine Zeichenfolge, die das Attribut aria-multiselectable widerspiegelt. Dieses gibt an, dass der Benutzer mehr als ein Element aus den aktuell auswählbaren Nachfahren auswählen kann.
ElementInternals.ariaOrientation: Eine Zeichenfolge, die das Attribut aria-orientation widerspiegelt. Dieses gibt an, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt beziehungsweise mehrdeutig ist.
ElementInternals.ariaPlaceholder: Eine Zeichenfolge, die das Attribut aria-placeholder widerspiegelt. Dieses definiert einen kurzen Hinweis, der dem Benutzer bei der Dateneingabe helfen soll, wenn das Steuerelement keinen Wert hat.
ElementInternals.ariaPosInSet: Eine Zeichenfolge, die das Attribut aria-posinset widerspiegelt. Dieses definiert die Nummer oder Position eines Elements innerhalb der aktuellen Gruppe von Listeneinträgen oder Treeitems.
ElementInternals.ariaPressed: Eine Zeichenfolge, die das Attribut aria-pressed widerspiegelt. Dieses gibt den aktuellen gedrückten Zustand von Umschaltflächen an.
ElementInternals.ariaReadOnly: Eine Zeichenfolge, die das Attribut aria-readonly widerspiegelt. Dieses gibt an, dass das Element nicht bearbeitbar, aber ansonsten bedienbar ist.
ElementInternals.ariaRelevant: Eine Zeichenfolge, die das Attribut aria-relevant widerspiegelt. Dieses gibt an, welche Benachrichtigungen der Benutzeragent auslöst, wenn der Barrierefreiheitsbaum innerhalb einer Live-Region geändert wird. Damit wird beschrieben, welche Änderungen in einer aria-live-Region relevant sind und angekündigt werden sollen.
ElementInternals.ariaRequired: Eine Zeichenfolge, die das Attribut aria-required widerspiegelt. Dieses gibt an, dass für das Element eine Benutzereingabe erforderlich ist, bevor ein Formular abgesendet werden kann.
ElementInternals.role: Eine Zeichenfolge, die eine ARIA-Rolle enthält. Eine vollständige Liste der ARIA-Rollen finden Sie auf der Seite zu ARIA-Techniken.
ElementInternals.ariaRoleDescription: Eine Zeichenfolge, die das Attribut aria-roledescription widerspiegelt. Dieses definiert eine für Menschen lesbare, vom Autor lokalisierte Beschreibung der Rolle eines Elements.
ElementInternals.ariaRowCount: Eine Zeichenfolge, die das Attribut aria-rowcount widerspiegelt. Dieses definiert die Gesamtzahl der Zeilen in einer Tabelle, einem Grid oder einem Treegrid.
ElementInternals.ariaRowIndex: Eine Zeichenfolge, die das Attribut aria-rowindex widerspiegelt. Dieses definiert den Zeilenindex oder die Position eines Elements bezogen auf die Gesamtzahl der Zeilen in einer Tabelle, einem Grid oder einem Treegrid.
ElementInternals.ariaRowIndexText: Eine Zeichenfolge, die das Attribut aria-rowindextext widerspiegelt. Dieses definiert eine für Menschen lesbare Textalternative für aria-rowindex.
ElementInternals.ariaRowSpan: Eine Zeichenfolge, die das Attribut aria-rowspan widerspiegelt. Dieses definiert die Anzahl der Zeilen, über die sich eine Zelle oder Grid-Zelle in einer Tabelle, einem Grid oder einem Treegrid erstreckt.
ElementInternals.ariaSelected: Eine Zeichenfolge, die das Attribut aria-selected widerspiegelt. Dieses gibt den aktuellen Auswahlzustand von Elementen an, die einen solchen Zustand haben.
ElementInternals.ariaSetSize: Eine Zeichenfolge, die das Attribut aria-setsize widerspiegelt. Dieses definiert die Anzahl der Elemente in der aktuellen Gruppe von Listeneinträgen oder Treeitems.
ElementInternals.ariaSort: Eine Zeichenfolge, die das Attribut aria-sort widerspiegelt. Dieses gibt an, ob die Einträge in einer Tabelle oder einem Grid aufsteigend oder absteigend sortiert sind.
ElementInternals.ariaValueMax: Eine Zeichenfolge, die das Attribut aria-valueMax widerspiegelt. Dieses definiert den maximal zulässigen Wert für ein Bereichs-Widget.
ElementInternals.ariaValueMin: Eine Zeichenfolge, die das Attribut aria-valueMin widerspiegelt. Dieses definiert den minimal zulässigen Wert für ein Bereichs-Widget.
ElementInternals.ariaValueNow: Eine Zeichenfolge, die das Attribut aria-valueNow widerspiegelt. Dieses definiert den aktuellen Wert eines Bereichs-Widgets.
ElementInternals.ariaValueText: Eine Zeichenfolge, die das Attribut aria-valuetext widerspiegelt. Dieses definiert eine für Menschen lesbare Textalternative zu aria-valuenow für ein Bereichs-Widget.

Instanzeigenschaften, die ARIA-Elementreferenzen widerspiegeln

Diese Eigenschaften spiegeln die Elemente wider, die in den entsprechenden Attributen durch id-Referenzen angegeben sind. Dabei gelten einige Einschränkungen. Weitere Informationen finden Sie unter Gespiegelte Elementreferenzen im Leitfaden Gespiegelte Attribute.

ElementInternals.ariaActiveDescendantElement: Ein Element, das das aktuell aktive Element darstellt, wenn der Fokus auf einem composite-Widget, einer combobox, einer textbox, einer group oder einer application liegt. Spiegelt das Attribut aria-activedescendant wider.
ElementInternals.ariaControlsElements: Ein Array von Elementen, deren Inhalt oder Vorhandensein durch das Element gesteuert wird, auf das die Eigenschaft angewendet wird. Spiegelt das Attribut aria-controls wider.
ElementInternals.ariaDescribedByElements: Ein Array von Elementen, die die barrierefreie Beschreibung für das Element enthalten, auf das die Eigenschaft angewendet wird. Spiegelt das Attribut aria-describedby wider.
ElementInternals.ariaDetailsElements: Ein Array von Elementen, die barrierefrei zugängliche Details für das Element bereitstellen, auf das die Eigenschaft angewendet wird. Spiegelt das Attribut aria-details wider.
ElementInternals.ariaErrorMessageElements: Ein Array von Elementen, die eine Fehlermeldung für das Element bereitstellen, auf das die Eigenschaft angewendet wird. Spiegelt das Attribut aria-errormessage wider.
ElementInternals.ariaFlowToElements: Ein Array von Elementen, die das nächste Element beziehungsweise die nächsten Elemente in einer alternativen Lesereihenfolge des Inhalts angeben. Diese kann nach Ermessen des Benutzers die allgemeine Standard-Lesereihenfolge ersetzen. Spiegelt das Attribut aria-flowto wider.
ElementInternals.ariaLabelledByElements: Ein Array von Elementen, die den barrierefreien Namen für das Element bereitstellen, auf das die Eigenschaft angewendet wird. Spiegelt das Attribut aria-labelledby wider.
ElementInternals.ariaOwnsElements: Ein Array von Elementen, die dem Element gehören, auf das die Eigenschaft angewendet wird. Damit wird eine visuelle, funktionale oder kontextuelle Beziehung zwischen einem Elternelement und seinen Kindelementen definiert, wenn sich diese Beziehung nicht durch die DOM-Hierarchie darstellen lässt. Spiegelt das Attribut aria-owns wider.

Instanzmethoden

ElementInternals.setFormValue(): Legt den beim Absenden verwendeten Wert und den Zustand des Elements fest und übermittelt diese an den Benutzeragenten.
ElementInternals.setValidity(): Legt den Gültigkeitszustand des Elements fest.
ElementInternals.checkValidity(): Prüft, ob ein Element die für es geltenden Regeln der Einschränkungsvalidierung erfüllt.
ElementInternals.reportValidity(): Prüft, ob ein Element die für es geltenden Regeln der Einschränkungsvalidierung erfüllt, und sendet außerdem eine Validierungsmeldung an den Benutzeragenten.

Beispiele

Das folgende Beispiel zeigt, wie Sie mit HTMLElement.attachInternals ein benutzerdefiniertes, einem Formular zugeordnetes Element erstellen.

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

// Append element to form to associate it
form.appendChild(element);

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

Spezifikationen

Spezifikation
HTML # the-elementinternals-interface

Browser-Kompatibilität

Siehe auch

Leistungsfähigere Formularsteuerelemente auf web.dev (2019)
Benutzerdefinierte Formularsteuerelemente mit ElementInternals erstellen auf CSS-Tricks (2021)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden