Extender elementos integrados

La especificación define elementos personalizados autónomos (que extienden HTMLElement y se usan como <my-card>) y elementos integrados personalizados (que extienden una clase integrada específica y se usan como <button is="my-button">). Los elementos integrados personalizados heredan gratuitamente la semántica del elemento integrado.

<my-button> autónomo no obtiene ninguno de los comportamientos integrados de <button>: no se activa con Intro o Espacio, no participa en formularios ni tiene role="button" para las tecnologías de asistencia. Un botón personalizado (is="my-button") hereda todo eso automáticamente.

Extienda la clase HTML específica en lugar de HTMLElement: class MyButton extends HTMLButtonElement {}. El elemento conserva todo el comportamiento integrado —envío de formularios, gestión del foco y estado deshabilitado— y usted puede añadir sus mejoras.

customElements.define("my-button", MyButton, { extends: "button" }). El tercer argumento indica al registro qué etiqueta integrada extiende el elemento. Sin él, el registro genera una excepción.

Use elementos integrados personalizados con el atributo is en la etiqueta existente: <button is="my-button">Click</button>. Escribir <my-button> en su lugar crearía un elemento autónomo y perdería el comportamiento integrado.

Safari se ha negado a implementar los elementos integrados personalizados por motivos relacionados con la accesibilidad. Funcionan en Chrome, Edge y Firefox; en Safari, el atributo is se ignora y el elemento se comporta como un <button> normal. Use el polyfill oficial cuando necesite compatibilidad con Safari.

El polyfill @ungap/custom-elements restablece la compatibilidad con los elementos integrados personalizados en Safari. Es pequeño y recibe un buen mantenimiento; inclúyalo cuando su equipo necesite compatibilidad entre navegadores sin abandonar el patrón del atributo is.

Si necesita admitir Safari sin un polyfill, cree un elemento autónomo y replique manualmente el comportamiento necesario: añada role="button", tabindex="0", manejadores de teclado para Enter y Space, y asociación con formularios mediante la API ElementInternals.

Los elementos autónomos pueden participar en el envío de formularios estableciendo static formAssociated = true y usando this.attachInternals(). El objeto ElementInternals devuelto proporciona setFormValue y setValidity para una integración completa con formularios.

Elija elementos integrados personalizados para componentes que se comporten principalmente como un elemento integrado (un botón mejorado o un campo de entrada inteligente) y cuando la plataforma de destino sea Chrome/Firefox o acepte usar el polyfill. Elija elementos autónomos para componentes completamente nuevos (tarjetas o cuadros de diálogo) que no tengan un equivalente integrado.

El error más común al crear componentes web es crear <my-button> como un elemento autónomo. No enviará formularios, no responderá a Intro ni a Espacio y no se anunciará como botón. Extienda HTMLButtonElement o replique cuidadosamente todos los comportamientos de un botón real.

¿Cuál es la ventaja práctica de extender HTMLButtonElement (elemento integrado personalizado) en lugar de extender HTMLElement (elemento autónomo) para un componente similar a un botón?

Los elementos integrados personalizados extienden una clase HTML específica (HTMLButtonElement, HTMLInputElement) y se usan mediante el atributo is, por lo que heredan todo el comportamiento nativo. Regístrelos con la opción { extends: "button" }. Safari no los admite de forma nativa: use un polyfill o elementos autónomos con una réplica manual del comportamiento cuando necesite compatibilidad completa entre navegadores.