Integrierte Elemente erweitern

Die Spezifikation definiert autonomous custom elements (die HTMLElement erweitern und als <my-card> verwendet werden) sowie customized built-in elements (die eine bestimmte eingebaute Klasse erweitern und als <button is="my-button"> verwendet werden). Customized built-ins erben die Semantik eingebauter Elemente automatisch.

Ein autonomes <my-button> erhält keinerlei Verhalten des eingebauten <button> – keine Aktivierung durch Enter oder die Leertaste, keine Teilnahme an Formularen und kein role="button" für assistive Technologien. Ein customized button (is="my-button") erbt all das automatisch.

Erweitern Sie die spezifische HTML-Klasse statt HTMLElement: class MyButton extends HTMLButtonElement {}. Das Element behält alle eingebauten Funktionen – Formularübermittlung, Fokusverwaltung und den deaktivierten Zustand – und Sie können darauf Ihre Erweiterungen aufbauen.

customElements.define("my-button", MyButton, { extends: "button" }). Das dritte Argument teilt der Registry mit, welches eingebaute Tag das Element erweitert. Ohne dieses Argument schlägt die Registrierung fehl.

Verwenden Sie customized built-ins mit dem is-Attribut am vorhandenen Tag: <button is="my-button">Click</button>. Wenn Sie stattdessen <my-button> schreiben, würden Sie ein autonomes Element erstellen und das eingebaute Verhalten verlieren.

Safari hat die Implementierung von customized built-in elements unter Berufung auf Bedenken hinsichtlich der Barrierefreiheit abgelehnt. Sie funktionieren in Chrome, Edge und Firefox; in Safari wird das is-Attribut ignoriert und das Element verhält sich wie ein gewöhnliches <button>. Verwenden Sie das offizielle Polyfill, wenn Safari unterstützt werden muss.

Das @ungap/custom-elements-Polyfill stellt die Unterstützung für customized built-in elements in Safari wieder her. Es ist klein und wird gut gepflegt; binden Sie es ein, wenn Ihr Team browserübergreifende Unterstützung benötigt, ohne auf das is-Attribut-Muster zu verzichten.

Wenn Safari ohne Polyfill relevant ist, erstellen Sie stattdessen ein autonomes Element und bilden Sie das benötigte Verhalten manuell nach: Fügen Sie role="button", tabindex="0", Tastatur-Handler für Enter und die Leertaste sowie die Formularanbindung über die ElementInternals API hinzu.

Autonome Elemente können an der Formularübermittlung teilnehmen, indem Sie static formAssociated = true setzen und this.attachInternals() verwenden. Das zurückgegebene ElementInternals-Objekt stellt setFormValue und setValidity für eine vollständige Formularintegration bereit.

Wählen Sie customized built-ins für Komponenten, die sich weitgehend wie ein eingebautes Element verhalten (etwa ein aufwendiger Button oder ein intelligentes Eingabefeld) und wenn Ihre Plattformunterstützung Chrome und Firefox umfasst oder Sie das Polyfill akzeptieren. Wählen Sie autonome Elemente für völlig neue Komponenten (Karten, Dialoge) ohne eingebautes Gegenstück.

Der häufigste Fehler bei Web Components ist, <my-button> als autonomes Element zu erstellen. Es kann keine Formulare absenden, reagiert nicht auf Enter oder die Leertaste und wird nicht als Button angekündigt. Erweitern Sie entweder HTMLButtonElement oder bilden Sie sorgfältig jedes Verhalten eines echten Buttons nach.

Welchen praktischen Vorteil bietet das Erweitern von HTMLButtonElement (customized built-in) gegenüber dem Erweitern von HTMLElement (autonom) bei einer buttonähnlichen Komponente?

Customized built-in elements erweitern eine bestimmte HTML-Klasse (HTMLButtonElement, HTMLInputElement) und werden über das is-Attribut verwendet, wodurch sie das gesamte native Verhalten erben. Registrieren Sie sie mit der Option { extends: "button" }. Safari unterstützt sie nicht nativ – verwenden Sie ein Polyfill oder autonome Elemente mit manuell nachgebildetem Verhalten, wenn vollständige browserübergreifende Unterstützung erforderlich ist.