¿Cómo afectan los «custom elements» (parte de Web Components) a la escritura de HTML?

Los «custom elements» (elementos personalizados), una parte fundamental de la tecnología de Web Components, transforman la manera de escribir HTML al permitirte extender el vocabulario de HTML con tus propias etiquetas. Esto conduce a un HTML más semántico, modular y reutilizable.

Así es como afectan la escritura de HTML:

1. HTML más declarativo y semántico:
   En lugar de anidar múltiples <div> con clases complejas para crear un componente de interfaz de usuario (UI), puedes definir una etiqueta personalizada que encapsule esa estructura y lógica. Tu HTML se vuelve más legible y auto-descriptivo.
   • Antes (sin Custom Elements): <div class="tarjeta-usuario perfil-compacto"> <img src="avatar.jpg" alt="Avatar de Usuario" class="tarjeta-usuario-avatar"> <div class="tarjeta-usuario-info"> <h3 class="tarjeta-usuario-nombre">Nombre Usuario</h3> <p class="tarjeta-usuario-detalle">Detalles adicionales...</p> </div> </div>
   • Con Custom Elements: HTML<tarjeta-usuario nombre="Nombre Usuario" avatar="avatar.jpg" detalle="Detalles adicionales..." layout="compacto"> </tarjeta-usuario>
   Los nombres de los «custom elements» deben contener un guion (ej. mi-etiqueta).
2. Reusabilidad y Modularidad:
   Puedes definir un «custom element» una vez (con su estructura interna, estilos encapsulados con Shadow DOM y comportamiento con JavaScript) y luego reutilizarlo simplemente escribiendo su etiqueta personalizada donde lo necesites en tu HTML. Esto reduce la duplicación de código y facilita el mantenimiento.
3. Configuración mediante atributos:
   Los «custom elements» se configuran a través de atributos HTML, de manera similar a los elementos estándar. Estos atributos pueden ser leídos por el JavaScript del componente para modificar su comportamiento o apariencia.
4. Composición con Slots (<slot>):
   Dentro de la definición de un «custom element» (específicamente en su Shadow DOM), puedes usar la etiqueta <slot>. Esto permite que el HTML que escribes dentro de tu etiqueta personalizada en la página principal se inserte (o «proyecte») en lugares específicos dentro de la estructura interna del componente.
   • Uso en HTML: <dialogo-modal titulo="Confirmación"> <p>¿Estás seguro de que quieres continuar?</p> <button slot="acciones">Aceptar</button> </dialogo-modal>
   Esto hace que tus componentes sean flexibles y personalizables desde fuera.
5. Encapsulación (Shadow DOM):
   Aunque es una tecnología separada dentro de Web Components, el Shadow DOM se usa a menudo con «custom elements» para encapsular su HTML interno y CSS. Esto significa que la estructura y los estilos del componente no afectan al resto de la página, y viceversa, lo que simplifica la escritura del HTML principal, ya que no tienes que preocuparte por los detalles internos del componente.

En resumen:

Los «custom elements» te permiten escribir un HTML más limpio, expresivo y semántico al crear tus propias etiquetas que representan componentes complejos de manera sencilla y declarativa.

Fomentan un enfoque de desarrollo basado en componentes, lo que mejora la organización, la reutilización y el mantenimiento de tu código HTML.

Sin embargo, es importante recordar que los «custom elements» requieren JavaScript para definir su comportamiento y «actualizar» las etiquetas personalizadas en el navegador.