Ingebouwde elementen uitbreiden

Breid de specifieke HTML-klasse uit in plaats van HTMLElement: class MyButton extends HTMLButtonElement {}. Het element behoudt alle ingebouwde functionaliteit — formulierverzending, focusbeheer en uitgeschakelde toestand — en je voegt daar je uitbreidingen aan toe.

customElements.define("my-button", MyButton, { extends: "button" }). Het derde argument vertelt het register welke ingebouwde tag het element uitbreidt. Zonder dit argument mislukt de registratie.

Gebruik aangepaste ingebouwde elementen met het is-attribuut op de bestaande tag: <button is="my-button">Click</button>. Als je in plaats daarvan <my-button> schrijft, maak je een autonoom element en gaat het ingebouwde gedrag verloren.

Safari heeft geweigerd aangepaste ingebouwde elementen te implementeren vanwege toegankelijkheidsproblemen. Ze werken in Chrome, Edge en Firefox; in Safari wordt het is-attribuut genegeerd en gedraagt het element zich als een gewone <button>. Gebruik de officiële polyfill wanneer ondersteuning voor Safari vereist is.

De @ungap/custom-elements-polyfill herstelt ondersteuning voor aangepaste ingebouwde elementen in Safari. De polyfill is klein en wordt goed onderhouden; voeg hem toe wanneer je team ondersteuning voor meerdere browsers nodig heeft zonder het patroon met het is-attribuut los te laten.

Als Safari zonder polyfill belangrijk is, maak je in plaats daarvan een autonoom element en boots je het benodigde gedrag handmatig na: voeg role="button" en tabindex="0" toe, gebruik toetsenbordhandlers voor Enter en Spatie en koppel het element aan formulieren via de ElementInternals-API.

Autonome elementen kunnen deelnemen aan het verzenden van formulieren door static formAssociated = true in te stellen en this.attachInternals() te gebruiken. Het geretourneerde ElementInternals-object biedt setFormValue en setValidity voor volledige integratie met formulieren.

Kies aangepaste ingebouwde elementen voor componenten die zich grotendeels gedragen als een ingebouwd element (een fraaie knop, een slimme invoer) en je platform Chrome/Firefox ondersteunt of je de polyfill accepteert. Kies autonome elementen voor volledig nieuwe componenten (kaarten, dialoogvensters) zonder ingebouwd equivalent.

De meest voorkomende fout bij webcomponenten is <my-button> als autonoom element maken. Het verzendt geen formulieren, reageert niet op Enter of Spatie en wordt niet als knop aangekondigd. Breid dus HTMLButtonElement uit of boots zorgvuldig elk gedrag van een echte knop na.

Aangepaste ingebouwde elementen breiden een specifieke HTML-klasse uit (HTMLButtonElement, HTMLInputElement) en worden gebruikt via het is-attribuut, waarbij ze alle ingebouwde functionaliteit erven. Registreer ze met de optie { extends: "button" }. Safari ondersteunt ze niet standaard — gebruik een polyfill of autonome elementen met handmatig nagebouwd gedrag als volledige ondersteuning voor meerdere browsers vereist is.