Estendere gli elementi integrati

La specifica definisce i custom element autonomi (che estendono HTMLElement e si usano come <my-card>) e i customized built-in (che estendono una classe built-in specifica e si usano come <button is="my-button">). I customized built-in ereditano automaticamente la semantica degli elementi nativi.

Un elemento autonomo <my-button> non riceve alcun comportamento dell'elemento nativo <button>: nessuna attivazione con Invio o Spazio, nessuna partecipazione ai moduli e nessun role="button" per le tecnologie assistive. Un button personalizzato (is="my-button") eredita tutto questo automaticamente.

Estenda la classe HTML specifica invece di HTMLElement: class MyButton extends HTMLButtonElement {}. L'elemento conserva tutti i comportamenti nativi, tra cui l'invio dei moduli, la gestione dello stato attivo e lo stato disabilitato, mentre Lei può aggiungere i propri miglioramenti.

customElements.define("my-button", MyButton, { extends: "button" }). Il terzo argomento indica al registro quale tag nativo estende l'elemento. Senza questo argomento, la registrazione genera un'eccezione.

Usi i customized built-in con l'attributo is sul tag esistente: <button is="my-button">Click</button>. Scrivendo invece <my-button> si creerebbe un elemento autonomo, perdendo il comportamento nativo.

Safari ha scelto di non implementare i customized built-in per motivi legati all'accessibilità. Funzionano in Chrome, Edge e Firefox; in Safari l'attributo is viene ignorato e l'elemento si comporta come un semplice <button>. Usi il polyfill ufficiale quando è necessario supportare Safari.

Il polyfill @ungap/custom-elements ripristina il supporto ai customized built-in in Safari. È piccolo e ben mantenuto; lo includa quando il team ha bisogno del supporto multipiattaforma senza abbandonare il modello basato sull'attributo is.

Se è importante supportare Safari senza un polyfill, crei invece un elemento autonomo e replichi manualmente i comportamenti necessari: aggiunga role="button", tabindex="0", gestori da tastiera per Invio e Spazio e l'associazione ai moduli tramite l'API ElementInternals.

Gli elementi autonomi possono partecipare all'invio dei moduli impostando static formAssociated = true e usando this.attachInternals(). L'oggetto ElementInternals restituito fornisce setFormValue e setValidity per un'integrazione completa con i moduli.

Scelga i customized built-in per componenti che si comportano soprattutto come un elemento nativo, ad esempio un pulsante avanzato o un campo di input intelligente, quando il supporto della piattaforma è limitato a Chrome e Firefox oppure può accettare il polyfill. Scelga gli autonomi per componenti completamente nuovi, come schede e finestre di dialogo, che non hanno un equivalente nativo.

L'errore più comune nello sviluppo di web component consiste nel creare <my-button> come elemento autonomo. Non invierà i moduli, non risponderà a Invio o Spazio e non verrà annunciato come pulsante. Estenda HTMLButtonElement oppure replichi con attenzione ogni comportamento di un pulsante reale.

Qual è il vantaggio pratico di estendere HTMLButtonElement, creando un customized built-in, invece di estendere HTMLElement, creando un elemento autonomo, per un componente simile a un pulsante?

I customized built-in estendono una classe HTML specifica, come HTMLButtonElement o HTMLInputElement, e vengono usati tramite l'attributo is, ereditando tutti i comportamenti nativi. Li registri con l'opzione { extends: "button" }. Safari non li supporta nativamente: usi un polyfill oppure elementi autonomi con replica manuale dei comportamenti quando è necessario il pieno supporto multipiattaforma.