ElementInternals

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.

* Some parts of this feature may have varying levels of support.

Das ElementInternals Interface des Document Object Model bietet Webentwicklern eine Möglichkeit, benutzerdefinierte Elemente vollständig an HTML-Formularen teilnehmen zu lassen. Es bietet Werkzeuge, um mit diesen Elementen auf die gleiche Weise zu arbeiten, wie Sie es mit jedem standardmäßigen HTML-Formularelement tun würden, und stellt außerdem das Accessibility Object Model für das Element bereit.

Konstruktor

Dieses Interface hat keinen Konstruktor. Ein ElementInternals-Objekt wird zurückgegeben, wenn HTMLElement.attachInternals() aufgerufen wird.

Instanz-Eigenschaften

ElementInternals.shadowRoot Schreibgeschützt: Gibt das ShadowRoot-Objekt zurück, das mit diesem Element verknüpft ist.
ElementInternals.form Schreibgeschützt: Gibt das HTMLFormElement zurück, das mit diesem Element verknüpft ist.
ElementInternals.states Schreibgeschützt: Gibt das CustomStateSet zurück, das mit diesem Element verknüpft ist.
ElementInternals.willValidate Schreibgeschützt: Ein boolescher Wert, der true zurückgibt, wenn das Element ein submitfähiges Element ist, das für die Einschränkungsvalidierung in Frage kommt.
ElementInternals.validity Schreibgeschützt: Gibt ein ValidityState-Objekt zurück, das die verschiedenen Validierungszustände des Elements in Bezug auf die Einschränkungsvalidierung darstellt.
ElementInternals.validationMessage Schreibgeschützt: Ein String, der die Validierungsnachricht dieses Elements enthält.
ElementInternals.labels Schreibgeschützt: Gibt eine NodeList aller Label-Elemente zurück, die mit diesem Element verknüpft sind.

Instanz-Eigenschaften von ARIA inkludiert

Das ElementInternals-Interface enthält auch die folgenden Eigenschaften.

Hinweis: Diese sind enthalten, damit Standard-Zugänglichkeits-Semantiken für ein benutzerdefiniertes Element definiert werden können. Diese können durch benutzerdefinierte Attribute überschrieben werden, aber stellen Sie sicher, dass Standard-Semantiken beibehalten werden, falls der Autor diese Attribute löscht oder sie überhaupt nicht hinzufügt. Für weitere Informationen siehe den Accessibility Object Model explainer.

ElementInternals.ariaAtomic: Ein String, der das aria-atomic-Attribut widerspiegelt, das angibt, ob unterstützende Technologien alle oder nur Teile des geänderten Bereichs basierend auf den durch das aria-relevant-Attribut definierten Änderungsbenachrichtigungen präsentieren werden.
ElementInternals.ariaAutoComplete: Ein String, der das aria-autocomplete-Attribut widerspiegelt, das angibt, ob die Eingabe von Text das Anzeigen von einer oder mehreren Vorhersagen des beabsichtigten Werts eines Nutzers für ein Kombinationsfeld, Suchfeld oder Textfeld auslösen könnte und wie diese Vorhersagen präsentiert würden, falls sie gemacht werden.
ElementInternals.ariaBrailleLabel: Ein String, der das aria-braillelabel-Attribut widerspiegelt, welches die Braille-Beschriftung des Elements definiert.
ElementInternals.ariaBrailleRoleDescription: Ein String, der das aria-brailleroledescription-Attribut widerspiegelt, welches die ARIA Braille-Rollenbeschreibung des Elements definiert.
ElementInternals.ariaBusy: Ein String, der das aria-busy-Attribut widerspiegelt, das angibt, ob ein Element modifiziert wird, da unterstützende Technologien möglicherweise warten möchten, bis die Änderungen abgeschlossen sind, bevor sie dem Benutzer präsentiert werden.
ElementInternals.ariaChecked: Ein String, der das aria-checked-Attribut widerspiegelt, das den aktuellen „ausgewählten“ Zustand von Kontrollkästchen, Optionsfeldern und anderen Widgets, die einen ausgewählten Zustand haben, angibt.
ElementInternals.ariaColCount: Ein String, der das aria-colcount-Attribut widerspiegelt, das die Anzahl der Spalten in einer Tabelle, einem Raster oder Baumraster definiert.
ElementInternals.ariaColIndex: Ein String, der das aria-colindex-Attribut widerspiegelt, das den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtanzahl der Spalten innerhalb einer Tabelle, eines Rasters oder Baumrasters definiert.
ElementInternals.ariaColIndexText: Ein String, der das aria-colindextext-Attribut widerspiegelt, welches eine menschenlesbare Textalternative des aria-colindex definiert.
ElementInternals.ariaColSpan: Ein String, der das aria-colspan-Attribut widerspiegelt, das die Anzahl der Spalten definiert, die von einer Zelle oder Rasterzelle innerhalb einer Tabelle, eines Rasters oder Baumrasters überspannt werden.
ElementInternals.ariaCurrent: Ein String, der das aria-current-Attribut widerspiegelt, welches das Element angibt, das das aktuelle Element innerhalb eines Containers oder einer Gruppe verwandter Elemente darstellt.
ElementInternals.ariaDescription: Ein String, der das aria-description-Attribut widerspiegelt, welches einen String definiert, der den aktuellen ElementInternals beschreibt oder annotiert.
ElementInternals.ariaDisabled: Ein String, der das aria-disabled-Attribut widerspiegelt, das anzeigt, dass das Element wahrnehmbar, aber deaktiviert ist und daher nicht editierbar oder anderweitig bedienbar.
ElementInternals.ariaExpanded: Ein String, der das aria-expanded-Attribut widerspiegelt, welches angibt, ob ein Gruppen-Element, das von diesem Element besessen oder gesteuert wird, erweitert oder zusammengeklappt ist.
ElementInternals.ariaHasPopup: Ein String, der das aria-haspopup-Attribut widerspiegelt, das die Verfügbarkeit und den Typ eines interaktiven Popup-Elements, wie Menü oder Dialog, angibt, das durch ElementInternals ausgelöst werden kann.
ElementInternals.ariaHidden: Ein String, der das aria-hidden-Attribut widerspiegelt, welches angibt, ob das Element über eine Zugänglichkeits-API zugänglich gemacht wird.
ElementInternals.ariaKeyShortcuts: Ein String, der das aria-keyshortcuts-Attribut widerspiegelt, das Tastaturkurzbefehle angibt, die ein Autor implementiert hat, um ein ElementInternals zu aktivieren oder den Fokus darauf zu legen.
ElementInternals.ariaLabel: Ein String, der das aria-label-Attribut widerspiegelt, das einen String definiert, der das aktuelle ElementInternals beschriftet.
ElementInternals.ariaLevel: Ein String, der das aria-level-Attribut widerspiegelt, das die hierarchische Ebene eines Elements innerhalb einer Struktur definiert.
ElementInternals.ariaLive: Ein String, der das aria-live-Attribut widerspiegelt, das angibt, dass ein Element aktualisiert wird, und die Arten von Aktualisierungen beschreibt, die der Benutzeragent, unterstützende Technologien und der Benutzer von dem Live-Bereich erwarten können.
ElementInternals.ariaModal: Ein String, der das aria-modal-Attribut widerspiegelt, das angibt, ob ein Element beim Anzeigen modal ist.
ElementInternals.ariaMultiline: Ein String, der das aria-multiline-Attribut widerspiegelt, das angibt, ob ein Textfeld mehrere Zeilen von Eingaben akzeptiert oder nur eine einzelne Zeile.
ElementInternals.ariaMultiSelectable: Ein String, der das aria-multiselectable-Attribut widerspiegelt, das angibt, dass der Benutzer mehr als ein Element aus den aktuellen auswählbaren Nachkommen auswählen darf.
ElementInternals.ariaOrientation: Ein String, der das aria-orientation-Attribut widerspiegelt, das angibt, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.
ElementInternals.ariaPlaceholder: Ein String, der das aria-placeholder-Attribut widerspiegelt, das einen kurzen Hinweis zur Unterstützung des Benutzers bei der Dateneingabe definiert, wenn der Steuerung kein Wert zugewiesen ist.
ElementInternals.ariaPosInSet: Ein String, der das aria-posinset-Attribut widerspiegelt, das die Nummer oder Position eines Elements in der aktuellen Gruppe von Listenelementen oder Baumelementen definiert.
ElementInternals.ariaPressed: Ein String, der das aria-pressed-Attribut widerspiegelt, das den aktuellen „gedrückten“ Zustand von Umschaltschaltflächen angibt.
ElementInternals.ariaReadOnly: Ein String, der das aria-readonly-Attribut widerspiegelt, das angibt, dass das Element nicht editierbar, aber anderweitig operabel ist.
ElementInternals.ariaRelevant Nicht standardisiert: Ein String, der das aria-relevant-Attribut widerspiegelt, das angibt, welche Benachrichtigungen der Benutzeragent auslösen wird, wenn der Zugänglichkeitsbaum innerhalb eines Live-Bereichs modifiziert wird. Dies wird verwendet, um zu beschreiben, welche Änderungen in einem aria-live-Bereich relevant sind und angekündigt werden sollten.
ElementInternals.ariaRequired: Ein String, der das aria-required-Attribut widerspiegelt, das angibt, dass Benutzereingaben auf dem Element erforderlich sind, bevor ein Formular gesendet werden kann.
ElementInternals.role: Ein String, der eine ARIA-Rolle enthält. Eine vollständige Liste der ARIA-Rollen finden Sie auf der ARIA-Techniken-Seite.
ElementInternals.ariaRoleDescription: Ein String, der das aria-roledescription-Attribut widerspiegelt, welches eine menschenlesbare, vom Autor lokalisierte Beschreibung für die Rolle eines Elements definiert.
ElementInternals.ariaRowCount: Ein String, der das aria-rowcount-Attribut widerspiegelt, welches die Gesamtzahl der Zeilen in einer Tabelle, einem Raster oder Baumraster definiert.
ElementInternals.ariaRowIndex: Ein String, der das aria-rowindex-Attribut widerspiegelt, welches den Zeilenindex oder die Position eines Elements in Bezug auf die Gesamtanzahl der Zeilen innerhalb einer Tabelle, eines Rasters oder Baumrasters definiert.
ElementInternals.ariaRowIndexText: Ein String, der das aria-rowindextext-Attribut widerspiegelt, welches eine menschenlesbare Textalternative des aria-rowindex definiert.
ElementInternals.ariaRowSpan: Ein String, der das aria-rowspan-Attribut widerspiegelt, welches die Anzahl der Zeilen definiert, die von einer Zelle oder Rasterzelle innerhalb einer Tabelle, eines Rasters oder Baumrasters überspannt werden.
ElementInternals.ariaSelected: Ein String, der das aria-selected-Attribut widerspiegelt, welches den aktuellen „ausgewählten“ Zustand von Elementen angibt, die einen ausgewählten Zustand haben.
ElementInternals.ariaSetSize: Ein String, der das aria-setsize-Attribut widerspiegelt, welches die Anzahl der Elemente in der aktuellen Gruppe von Listenelementen oder Baumelementen definiert.
ElementInternals.ariaSort: Ein String, der das aria-sort-Attribut widerspiegelt, welches angibt, ob Elemente in einer Tabelle oder einem Raster in aufsteigender oder absteigender Reihenfolge sortiert sind.
ElementInternals.ariaValueMax: Ein String, der das aria-valueMax-Attribut widerspiegelt, welches den maximal zulässigen Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueMin: Ein String, der das aria-valueMin-Attribut widerspiegelt, welches den minimal zulässigen Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueNow: Ein String, der das aria-valueNow-Attribut widerspiegelt, welches den aktuellen Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueText: Ein String, der das aria-valuetext-Attribut widerspiegelt, welches die menschenlesbare Textalternative von aria-valuenow für ein Bereichs-Widget definiert.

Instanz-Methoden

ElementInternals.setFormValue(): Setzt den Übermittlungswert und Zustand des Elements und kommuniziert diese an den Benutzeragenten.
ElementInternals.setValidity(): Setzt die Gültigkeit des Elements.
ElementInternals.checkValidity(): Prüft, ob ein Element die auf es angewendeten Einschränkungsvalidierungs-Regeln erfüllt.
ElementInternals.reportValidity(): Prüft, ob ein Element die auf es angewendeten Einschränkungsvalidierungs-Regeln erfüllt und sendet außerdem eine Validierungsnachricht an den Benutzeragenten.

Beispiele

Das folgende Beispiel zeigt, wie ein benutzerdefiniertes formularbezogenes Element mit HTMLElement.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 it
form.appendChild(element);

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

Spezifikationen

Specification
HTML # the-elementinternals-interface