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 gibt Web-Entwicklern die Möglichkeit, benutzerdefinierte Elemente vollständig in HTML-Formulare zu integrieren. Es bietet Hilfsfunktionen, um mit diesen Elementen auf dieselbe Weise zu arbeiten, wie Sie mit jedem Standard-HTML-Formularelement arbeiten würden, und stellt auch 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.

Instanzeigenschaften

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 sendbares Element ist, das ein Kandidat für die Einschränkungsvalidierung ist.
ElementInternals.validity Schreibgeschützt: Gibt ein ValidityState-Objekt zurück, das die verschiedenen Gültigkeitszustä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 von allen Label-Elementen zurück, die mit diesem Element verbunden sind.

Instanzeigenschaften, die von ARIA enthalten sind

Das ElementInternals Interface enthält auch die folgenden Eigenschaften.

Hinweis: Diese sind enthalten, um sicherzustellen, dass Standard-Accessibility-Semantiken auf einem benutzerdefinierten Element definiert werden können. Diese können durch autorendefinierte Attribute überschrieben werden, stellen jedoch sicher, dass die Standardsemantiken erhalten bleiben, falls der Autor diese Attribute löscht oder gar nicht hinzufügt. Weitere Informationen finden Sie im Accessibility Object Model Explainer.

ElementInternals.ariaAtomic: Ein String, der das Attribut aria-atomic widerspiegelt, welches angibt, ob Hilfstechnologien den gesamten oder nur Teile des geänderten Bereichs basierend auf den durch das Attribut aria-relevant definierten Änderungsbenachrichtigungen präsentieren.
ElementInternals.ariaAutoComplete: Ein String, der das Attribut aria-autocomplete widerspiegelt, welches angibt, ob das Eingeben von Text die Anzeige einer oder mehrerer Vorhersagen des beabsichtigten Werts des Benutzers für eine Kombinationsbox, Suchbox oder Textbox auslösen könnte, und wie diese präsentiert würden, wenn sie gemacht werden.
ElementInternals.ariaBusy: Ein String, der das Attribut aria-busy widerspiegelt, welches angibt, ob ein Element modifiziert wird, da Hilfstechnologien möglicherweise warten möchten, bis die Änderungen abgeschlossen sind, bevor sie dem Benutzer sichtbar gemacht werden.
ElementInternals.ariaChecked: Ein String, der das Attribut aria-checked widerspiegelt, welches den aktuellen "überprüft"-Zustand von Kontrollkästchen, Optionsschaltflächen und anderen Widgets angibt, die einen geprüften Zustand haben.
ElementInternals.ariaColCount: Ein String, der das Attribut aria-colcount widerspiegelt, welches die Anzahl der Spalten in einer Tabelle, einem Raster oder Baumraster definiert.
ElementInternals.ariaColIndex: Ein String, der das Attribut aria-colindex widerspiegelt, welches 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 Attribut aria-colindextext widerspiegelt, welches eine menschenlesbare Textalternative von aria-colindex definiert.
ElementInternals.ariaColSpan: Ein String, der das Attribut aria-colspan widerspiegelt, welches die Anzahl der Spalten definiert, die von einer Zelle oder einem Raster im Inneren einer Tabelle, eines Rasters oder Baumrasters über spannt werden.
ElementInternals.ariaCurrent: Ein String, der das Attribut aria-current widerspiegelt, welches das Element angibt, das das aktuelle Element innerhalb eines Containers oder einer Gruppe verwandter Elemente darstellt.
ElementInternals.ariaDescription: Ein String, der das Attribut aria-description widerspiegelt, welches einen String-Wert definiert, der die aktuellen ElementInternals beschreibt oder annotiert.
ElementInternals.ariaDisabled: Ein String, der das Attribut aria-disabled widerspiegelt, welches angibt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig operiert werden kann.
ElementInternals.ariaExpanded: Ein String, der das Attribut aria-expanded widerspiegelt, welches angibt, ob ein von diesem Element gesteuertes oder besessenes Gruppenelement erweitert oder eingeklappt ist.
ElementInternals.ariaHasPopup: Ein String, der das Attribut aria-haspopup widerspiegelt, welches die Verfügbarkeit und den Typ eines interaktiven Popup-Elements, wie z.B. Menü oder Dialog, angibt, das von einem ElementInternals ausgelöst werden kann.
ElementInternals.ariaHidden: Ein String, der das Attribut aria-hidden widerspiegelt, welches angibt, ob das Element in einer Accessibility-API sichtbar ist.
ElementInternals.ariaKeyShortcuts: Ein String, der das Attribut aria-keyshortcuts widerspiegelt, welches Tastaturkürzel angibt, die ein Autor implementiert hat, um ein ElementInternals zu aktivieren oder den Fokus darauf zu legen.
ElementInternals.ariaLabel: Ein String, der das Attribut aria-label widerspiegelt, welches einen String-Wert definiert, der die aktuellen ElementInternals beschriftet.
ElementInternals.ariaLevel: Ein String, der das Attribut aria-level widerspiegelt, welches die hierarchische Ebene eines Elements innerhalb einer Struktur definiert.
ElementInternals.ariaLive: Ein String, der das Attribut aria-live widerspiegelt, welches angibt, dass ein Element aktualisiert wird, und die Arten von Updates beschreibt, die Benutzeragenten, Hilfstechnologien und Benutzer vom Live-Bereich erwarten können.
ElementInternals.ariaModal: Ein String, der das Attribut aria-modal widerspiegelt, welches angibt, ob ein Element modales Verhalten zeigt, wenn es angezeigt wird.
ElementInternals.ariaMultiline: Ein String, der das Attribut aria-multiline widerspiegelt, welches angibt, ob ein Textfeld mehrere Zeilen von Eingaben akzeptiert oder nur eine einzelne Zeile.
ElementInternals.ariaMultiSelectable: Ein String, der das Attribut aria-multiselectable widerspiegelt, welches angibt, dass der Benutzer mehr als einen Artikel aus den aktuellen auswählbaren Nachfahren auswählen kann.
ElementInternals.ariaOrientation: Ein String, der das Attribut aria-orientation widerspiegelt, welches angibt, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.
ElementInternals.ariaPlaceholder: Ein String, der das Attribut aria-placeholder widerspiegelt, welches einen kurzen Hinweis definiert, der dem Benutzer bei der Dateneingabe helfen soll, wenn das Steuerungselement keinen Wert hat.
ElementInternals.ariaPosInSet: Ein String, der das Attribut aria-posinset widerspiegelt, welches die Nummer oder Position eines Elements im aktuellen Satz von Listenelementen oder Baumknoten definiert.
ElementInternals.ariaPressed: Ein String, der das Attribut aria-pressed widerspiegelt, welches den aktuellen "gedrückt"-Zustand von Umschalt-Tasten angibt.
ElementInternals.ariaReadOnly: Ein String, der das Attribut aria-readonly widerspiegelt, welches angibt, dass das Element nicht bearbeitbar, aber dennoch operierbar ist.
ElementInternals.ariaRelevant Nicht standardisiert: Ein String, der das Attribut aria-relevant widerspiegelt, welches angibt, welche Benachrichtigungen der Benutzeragent auslösen wird, wenn der Accessibility-Baum innerhalb eines Live-Bereichs geändert 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 Attribut aria-required widerspiegelt, welches angibt, dass Benutzereingaben im Element erforderlich sind, bevor ein Formular eingereicht 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 Attribut aria-roledescription widerspiegelt, welches eine menschenlesbare, autorlokalisierte Beschreibung für die Rolle eines Elements definiert.
ElementInternals.ariaRowCount: Ein String, der das Attribut aria-rowcount widerspiegelt, welches die Gesamtanzahl der Zeilen in einer Tabelle, einem Raster oder Baumraster definiert.
ElementInternals.ariaRowIndex: Ein String, der das Attribut aria-rowindex 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 Attribut aria-rowindextext widerspiegelt, welches eine menschenlesbare Textalternative von aria-rowindex definiert.
ElementInternals.ariaRowSpan: Ein String, der das Attribut aria-rowspan widerspiegelt, welches die Anzahl der Zeilen definiert, die von einer Zelle oder einem Raster innerhalb einer Tabelle, eines Rasters oder Baumrasters über spannt werden.
ElementInternals.ariaSelected: Ein String, der das Attribut aria-selected widerspiegelt, welches den aktuellen "ausgewählt"-Zustand von Elementen angibt, die einen ausgewählten Zustand haben.
ElementInternals.ariaSetSize: Ein String, der das Attribut aria-setsize widerspiegelt, welches die Anzahl der Elemente im aktuellen Satz von Listenelementen oder Baumknoten definiert.
ElementInternals.ariaSort: Ein String, der das Attribut aria-sort widerspiegelt, welches angibt, ob Elemente in einer Tabelle oder einem Raster in aufsteigender oder absteigender Reihenfolge sortiert sind.
ElementInternals.ariaValueMax: Ein String, der das Attribut aria-valuemax widerspiegelt, welches den maximal erlaubten Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueMin: Ein String, der das Attribut aria-valuemin widerspiegelt, welches den minimal erlaubten Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueNow: Ein String, der das Attribut aria-valuenow widerspiegelt, welches den aktuellen Wert für ein Bereichs-Widget definiert.
ElementInternals.ariaValueText: Ein String, der das Attribut aria-valuetext widerspiegelt, welches die menschenlesbare Textalternative von aria-valuenow für ein Bereichs-Widget definiert.

Instanzmethoden

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

Beispiele

Das folgende Beispiel demonstriert, wie man ein benutzerdefiniertes formularassoziiertes Element mit HTMLElement.attachInternals erstellt.

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

Browser-Kompatibilität

BCD tables only load in the browser