DasElementInternals Interface desDocument Object Model bietet Webentwicklern eine Möglichkeit, benutzerdefinierte Elemente vollständig an HTML-Formulare teilnehmen zu lassen. Es stellt Werkzeuge zur Verfügung, um mit diesen Elementen auf die gleiche Weise zu arbeiten wie mit jedem standardmäßigen HTML-Formularelement. Außerdem wird dasAccessibility Object Model für das Element zugänglich gemacht.

Konstruktor

Dieses Interface hat keinen Konstruktor. EinElementInternals-Objekt wird zurückgegeben, wennHTMLElement.attachInternals() aufgerufen wird.

Instanz-Eigenschaften

ElementInternals.shadowRootSchreibgeschützt

Gibt dasShadowRoot-Objekt zurück, das mit diesem Element assoziiert ist.

ElementInternals.formSchreibgeschützt

Gibt dasHTMLFormElement zurück, das mit diesem Element assoziiert ist.

ElementInternals.statesSchreibgeschützt

Gibt dasCustomStateSet zurück, das mit diesem Element assoziiert ist.

ElementInternals.willValidateSchreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn das Element ein übermittelbares Element ist, das ein Kandidat für dieEinschränkungsvalidierung ist.

ElementInternals.validitySchreibgeschützt

Gibt einValidityState-Objekt zurück, das die verschiedenen Gültigkeitszustände des Elements im Hinblick auf die Einschränkungsvalidierung darstellt.

ElementInternals.validationMessageSchreibgeschützt

Ein String, der die Validierungsnachricht dieses Elements enthält.

ElementInternals.labelsSchreibgeschützt

Gibt eineNodeList von allen dem Element zugeordneten Beschriftungselementen zurück.

Instanz-Eigenschaften, die von ARIA enthalten sind

DasElementInternals-Interface enthält auch die folgenden Eigenschaften.

ElementInternals.ariaAtomic

Ein String, der dasaria-atomic-Attribut widerspiegelt, welches angibt, ob unterstützende Technologien den gesamten geänderten Bereich oder nur Teile davon basierend auf den durch dasaria-relevant-Attribut definierten Änderungsmitteilungen präsentieren werden.

ElementInternals.ariaAutoComplete

Ein String, der dasaria-autocomplete-Attribut widerspiegelt, welches angibt, ob Texteingaben die Anzeige von einer oder mehreren Vorhersagen des beabsichtigten Werts eines Benutzer für ein Kombinationsfeld, Suchfeld oder Textfeld auslösen könnten und wie Vorhersagen präsentiert würden, falls sie gemacht würden.

ElementInternals.ariaBrailleLabel

Ein String, der dasaria-braillelabel-Attribut widerspiegelt, welches die Braille-Beschriftung des Elements definiert.

ElementInternals.ariaBrailleRoleDescription

Ein String, der dasaria-brailleroledescription-Attribut widerspiegelt, welches die ARIA-Braille-Rollenbeschreibung des Elements definiert.

ElementInternals.ariaBusy

Ein String, der dasaria-busy-Attribut widerspiegelt, welches angibt, ob ein Element modifiziert wird, da unterstützende Technologien möglicherweise warten möchten, bis die Modifikationen abgeschlossen sind, bevor sie dem Benutzer zugänglich gemacht werden.

ElementInternals.ariaChecked

Ein String, der dasaria-checked-Attribut widerspiegelt, welches den aktuellen "geprüften" Zustand von Kontrollkästchen, Optionsfeldern und anderen Widgets angibt, die einen geprüften Zustand haben.

ElementInternals.ariaColCount

Ein String, der dasaria-colcount-Attribut widerspiegelt, welches die Anzahl der Spalten in einer Tabelle, einem Raster oder einem Baumraster definiert.

ElementInternals.ariaColIndex

Ein String, der dasaria-colindex-Attribut widerspiegelt, welches den Spaltenindex oder die Position eines Elements im Verhältnis zur Gesamtanzahl der Spalten innerhalb einer Tabelle, eines Rasters oder eines Baumrasters definiert.

ElementInternals.ariaColIndexText

Ein String, der dasaria-colindextext-Attribut widerspiegelt, welches eine menschenlesbare Textalternative zu aria-colindex definiert.

ElementInternals.ariaColSpan

Ein String, der dasaria-colspan-Attribut widerspiegelt, welches die Anzahl der von einer Zelle oder Rasterzelle innerhalb einer Tabelle, eines Rasters oder eines Baumrasters überspannten Spalten definiert.

ElementInternals.ariaCurrent

Ein String, der dasaria-current-Attribut widerspiegelt, welches das Element angibt, das das aktuelle Element innerhalb eines Containers oder Satzes verwandter Elemente darstellt.

ElementInternals.ariaDescription

Ein String, der dasaria-description-Attribut widerspiegelt, welches einen Stringwert definiert, der das aktuelle ElementInternals beschreibt oder annotiert.

ElementInternals.ariaDisabled

Ein String, der dasaria-disabled-Attribut widerspiegelt, welches angibt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitbar oder anderweitig bedienbar ist.

ElementInternals.ariaExpanded

Ein String, der dasaria-expanded-Attribut widerspiegelt, welches angibt, ob ein Gruppierungselement, das diesem Element gehört oder von ihm kontrolliert wird, erweitert oder eingeklappt ist.

ElementInternals.ariaHasPopup

Ein String, der dasaria-haspopup-Attribut widerspiegelt, welches die Verfügbarkeit und den Typ eines interaktiven Popup-Elements angibt, wie Menü oder Dialog, das durch ein ElementInternals ausgelöst werden kann.

ElementInternals.ariaHidden

Ein String, der dasaria-hidden-Attribut widerspiegelt, welches angibt, ob das Element einer Zugänglichkeits-API ausgesetzt ist.

ElementInternals.ariaInvalid

Ein String, der dasaria-invalid-Attribut widerspiegelt, welches angibt, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.

ElementInternals.ariaKeyShortcuts

Ein String, der dasaria-keyshortcuts-Attribut widerspiegelt, welches angibt, welche Tastenkombinationen ein Autor implementiert hat, um ein Objekt zu aktivieren oder den Fokus darauf zu setzen.

ElementInternals.ariaLabel

Ein String, der dasaria-label-Attribut widerspiegelt, welches einen Stringwert definiert, der das aktuelle Objekt beschriftet.

ElementInternals.ariaLevel

Ein String, der dasaria-level-Attribut widerspiegelt, welches die hierarchische Ebene eines Elements innerhalb einer Struktur definiert.

ElementInternals.ariaLive

Ein String, der dasaria-live-Attribut widerspiegelt, welches angibt, dass ein Element aktualisiert wird und die Arten der Updates beschreibt, die die Benutzeragenten, unterstützende Technologien und Benutzer von dem Live-Bereich erwarten können.

ElementInternals.ariaModal

Ein String, der dasaria-modal-Attribut widerspiegelt, welches angibt, ob ein Element beim Anzeigen modal ist.

ElementInternals.ariaMultiline

Ein String, der dasaria-multiline-Attribut widerspiegelt, welches angibt, ob ein Textfeld mehrere Zeilen Eingaben akzeptiert oder nur eine einzelne Zeile.

ElementInternals.ariaMultiSelectable

Ein String, der dasaria-multiselectable-Attribut widerspiegelt, welches angibt, dass der Benutzer mehr als ein Element aus den aktuellen auswählbaren Nachfahren auswählen kann.

ElementInternals.ariaOrientation

Ein String, der dasaria-orientation-Attribut widerspiegelt, welches angibt, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.

ElementInternals.ariaPlaceholder

Ein String, der dasaria-placeholder-Attribut widerspiegelt, welches einen kurzen Hinweis definiert, der dem Benutzer bei der Dateneingabe hilft, wenn das Steuerelement keinen Wert hat.

ElementInternals.ariaPosInSet

Ein String, der dasaria-posinset-Attribut widerspiegelt, welches die Nummer oder Position eines Elements im aktuellen Satz von Listenelementen oder Baumelementen definiert.

ElementInternals.ariaPressed

Ein String, der dasaria-pressed-Attribut widerspiegelt, welches den aktuellen "gedrückten" Zustand von Schaltflächen mit Umschaltung angibt.

ElementInternals.ariaReadOnly

Ein String, der dasaria-readonly-Attribut widerspiegelt, welches angibt, dass das Element nicht bearbeitbar, aber anderweitig bedienbar ist.

ElementInternals.ariaRelevantNicht standardisiert

Ein String, der dasaria-relevant-Attribut widerspiegelt, welches angibt, welche Benachrichtigungen der Benutzeragent auslösen wird, wenn der Zugänglichkeitsbaum innerhalb eines Live-Bereichs geändert wird. Dies wird verwendet, um zu beschreiben, welche Änderungen in einemaria-live-Bereich relevant sind und angekündigt werden sollten.

ElementInternals.ariaRequired

Ein String, der dasaria-required-Attribut widerspiegelt, welches angibt, dass eine Benutzereingabe auf dem Element erforderlich ist, bevor ein Formular übermittelt werden kann.

ElementInternals.role

Ein String, der eine ARIA-Rolle enthält. Eine vollständige Liste der ARIA-Rollen finden Sie auf derARIA-Techniken-Seite.

ElementInternals.ariaRoleDescription

Ein String, der dasaria-roledescription-Attribut widerspiegelt, welches eine menschenlesbare, vom Autor lokalisierte Beschreibung für die Rolle eines Elements definiert.

ElementInternals.ariaRowCount

Ein String, der dasaria-rowcount-Attribut widerspiegelt, welches die Gesamtanzahl der Zeilen in einer Tabelle, einem Raster oder einem Baumraster definiert.

ElementInternals.ariaRowIndex

Ein String, der dasaria-rowindex-Attribut widerspiegelt, welches den Zeilenindex oder die Position eines Elements im Verhältnis zur Gesamtanzahl der Zeilen innerhalb einer Tabelle, eines Rasters oder eines Baumrasters definiert.

ElementInternals.ariaRowIndexText

Ein String, der dasaria-rowindextext-Attribut widerspiegelt, welches eine menschenlesbare Textalternative zu aria-rowindex definiert.

ElementInternals.ariaRowSpan

Ein String, der dasaria-rowspan-Attribut widerspiegelt, welches die Anzahl der von einer Zelle oder Rasterzelle innerhalb einer Tabelle, eines Rasters oder eines Baumrasters überspannten Zeilen definiert.

ElementInternals.ariaSelected

Ein String, der dasaria-selected-Attribut widerspiegelt, welches den aktuellen "ausgewählten" Zustand von Elementen angibt, die einen ausgewählten Zustand haben.

ElementInternals.ariaSetSize

Ein String, der dasaria-setsize-Attribut widerspiegelt, welches die Anzahl der Elemente im aktuellen Satz von Listenelementen oder Baumelementen definiert.

ElementInternals.ariaSort

Ein String, der dasaria-sort-Attribut widerspiegelt, welches angibt, ob Elemente in einer Tabelle oder einem Raster in aufsteigender oder absteigender Reihenfolge sortiert werden.

ElementInternals.ariaValueMax

Ein String, der dasaria-valueMax-Attribut widerspiegelt, welches den maximal zulässigen Wert für ein Bereichs-Widget definiert.

ElementInternals.ariaValueMin

Ein String, der dasaria-valueMin-Attribut widerspiegelt, welches den minimal zulässigen Wert für ein Bereichs-Widget definiert.

ElementInternals.ariaValueNow

Ein String, der dasaria-valueNow-Attribut widerspiegelt, welches den aktuellen Wert für ein Bereichs-Widget definiert.

ElementInternals.ariaValueText

Ein String, der dasaria-valuetext-Attribut widerspiegelt, welches die menschenlesbare Textalternative zu aria-valuenow für ein Bereichs-Widget definiert.

Instanzeigenschaften, die von ARIA-Elementreferenzen widergespiegelt werden

Die Eigenschaften spiegeln die in den entsprechenden Attributen durchid-Referenz angegebenen Elemente wider, jedoch mit einigen Vorbehalten. Weitere Informationen finden Sie unterReflektierte Elementreferenzen imLeitfaden für reflektierte Attribute.

ElementInternals.ariaActiveDescendantElement

Ein Element, das das aktuelle aktive Element darstellt, wenn der Fokus auf einemkompositiv Widget, einemKombinationsfeld, einemTextfeld, einerGruppe oder einerAnwendung liegt.Reflektiert dasaria-activedescendant-Attribut.

ElementInternals.ariaControlsElements

Ein Array von Elementen, deren Inhalt oder Vorhandensein durch das angewendete Element kontrolliert wird.Reflektiert dasaria-controls-Attribut.

ElementInternals.ariaDescribedByElements

Ein Array von Elementen, die die zugängliche Beschreibung für das angewendete Element enthalten.Reflektiert dasaria-describedby-Attribut.

ElementInternals.ariaDetailsElements

Ein Array von Elementen, die zugängliche Details für das angewendete Element bereitstellen.Reflektiert dasaria-details-Attribut.

ElementInternals.ariaErrorMessageElements

Ein Array von Elementen, die eine Fehlermeldung für das angewendete Element bereitstellen.Reflektiert dasaria-errormessage-Attribut.

ElementInternals.ariaFlowToElements

Ein Array von Elementen, die das nächste Element (oder die nächsten Elemente) in einer alternativen Lesereihenfolge von Inhalten identifizieren, die die allgemeine Standardlesereihenfolge nach Ermessen des Benutzers überschreibt.Reflektiert dasaria-flowto-Attribut.

ElementInternals.ariaLabelledByElements

Ein Array von Elementen, die den zugänglichen Namen für das angewendete Element bereitstellen.Reflektiert dasaria-labelledby-Attribut.

ElementInternals.ariaOwnsElements

Ein Array von Elementen, die von dem Element, auf das dies angewendet wird, besessen werden.Dies wird verwendet, um eine visuelle, funktionale oder kontextuelle Beziehung zwischen einem Elternteil und seinen Kindelementen zu definieren, wenn die DOM-Hierarchie nicht verwendet werden kann, um die Beziehung darzustellen.Reflektiert dasaria-owns-Attribut.

Instanz-Methoden

ElementInternals.setFormValue()

Legt den Übermittlungswert und Zustand des Elements fest und überträgt diese Informationen an den Benutzeragenten.

ElementInternals.setValidity()

Legt die Gültigkeit des Elements fest.

ElementInternals.checkValidity()

Überprüft, ob ein Element einer der darauf angewendetenEinschränkungsvalidierungs-Regeln entspricht.

ElementInternals.reportValidity()

Überprüft, ob ein Element einer der darauf angewendetenEinschränkungsvalidierungs-Regeln entspricht und sendet auch eine Validierungsnachricht an den Benutzeragenten.

Beispiele

Das folgende Beispiel zeigt, wie ein benutzerdefiniertes, formularassoziiertes Element mitHTMLElement.attachInternals erstellt wird.

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 itform.appendChild(element);console.log(element.internals_.form);// expected output: <form><custom-checkbox></custom-checkbox></form>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Fähigere Formularelemente über web.dev (2019)
• Erstellen von benutzerdefinierten Formularelementen mit ElementInternals über CSS-tricks (2021)