Se pueden crear y usar etiquetas HTML directamente

• En HTML, incluso si se usan nombres de etiquetas no reconocidos, el navegador los trata como elementos genéricos
• Si ese nombre de etiqueta se especifica como selector en CSS, es posible aplicar estilos y controlar su visualización
• Usar nombres que incluyan un guion (-) ayuda a evitar conflictos con futuros estándares de HTML
• En lugar de <div> o <span>, usar etiquetas personalizadas con significado mejora la legibilidad del código
• Incluso en estructuras anidadas complejas, es más fácil entender la estructura solo con los nombres de las etiquetas, lo que facilita el mantenimiento

---

Uso de etiquetas HTML personalizadas

• El navegador renderiza las etiquetas desconocidas como elementos de bloque genéricos

  • Este es un comportamiento normal especificado en el estándar HTML, y se pueden controlar visualmente si se les aplican estilos en CSS
  • Por ejemplo, se puede definir una etiqueta como <cool-thing> y darle estilo en CSS con cool-thing { ... }

• Si el nombre de la etiqueta incluye un guion (-), no habrá riesgo de conflicto con posibles adiciones futuras al estándar HTML

  • Ej.: <main-article>, <quote-body>

Mejora de legibilidad y estructura

• Si se usan etiquetas con nombres significativos en lugar de <div> o <span>, el código se vuelve más fácil de entender
  • Por ejemplo, se puede usar <article-header> en lugar de <div class="article-header">
• En estructuras anidadas de <div>, puede ser difícil ubicar qué etiqueta de cierre corresponde a qué parte, pero con nombres de etiqueta explícitos la estructura queda clara
  • Si dentro de <main-article> se organiza con <article-header>, <article-quote>, etc., la estructura del DOM se entiende de forma intuitiva

Código de ejemplo

• Forma tradicional

  <div class="cool-thing">
    Hello, World!
  </div>
  

• Forma con etiqueta personalizada

  <cool-thing>
    Hello, World!
  </cool-thing>
  

  • En CSS, se puede aplicar estilo con algo como cool-thing { display: block; font-weight: bold; text-align: center; ... }

Conclusión

• Si se aprovecha la flexibilidad para definir etiquetas que permite el estándar HTML,
  se puede escribir un marcado estructurado con alta legibilidad
• Aun así, si ya existe una etiqueta semántica adecuada definida, debe priorizarse el uso de esa etiqueta existente

[GN⁺]

Comentarios de Hacker News

• Se enfatiza que <tag-name> no es una etiqueta no reconocida
  Presenta su publicación de blog y explica que, hasta que WHATWG agregue <tagname> como nuevo elemento, este se trata como HTMLUnknownElement, mientras que <tag-name> es un HTMLElement válido, útil para maquetación y estilos
  Si se actualiza con la JavaScript Custom Elements API, se convierte en un elemento personalizado definido
  Es un comportamiento estándar en todos los navegadores, y el W3C HTML Validator también reconoce los elementos personalizados con guion como HTMLElement
  Sin embargo, la regla [hidden]{display:none} de la hoja de estilos UA predeterminada no se hereda, así que hay que declararla manualmente
  Como <DIV> tiene display:block por defecto gracias a la hoja de estilos UA, en los elementos personalizados hay que establecer la propiedad display directamente
  Los selectores :defined y :not(:defined) de CSS permiten distinguir entre elementos definidos y no definidos
  Declarative Shadow DOM (<template shadowrootmode="open">) también crea elementos personalizados no definidos de la misma forma

  • Replica que, en Chromium, no es un problema de la hoja de estilos UA, sino de que hidden es un atributo de presentación HTML (presentation attribute)
    La hoja de estilos UA se aplica igual a los elementos personalizados, y la regla [hidden] no existe
    hidden es un ejemplo de atributo que se interpreta como estilo, como align="right"
  • Lamenta que no se haya podido usar dos puntos (:) en lugar de guion (-), porque habría permitido integrar de forma natural los espacios de nombres XML
    Menciona que también habría sido posible convertir dos puntos en guiones en nginx o apache
    Cierra con un tono nostálgico: “no podemos volver a 1999”
  • Se pregunta por qué esta forma de trabajar no es la práctica predeterminada

• Señala que la estructura anidada de <div> en el código de ejemplo es excesiva
  Propone que sería más apropiado usar etiquetas semánticas como <article>, <header> y <blockquote>

  • Indica que, a diferencia del atributo class, una etiqueta personalizada solo puede tener un nombre
    Las clases pueden ser varias y no tienen orden, pero los elementos personalizados anidados fuerzan un orden, así que es difícil expresar lo mismo
  • Analiza que el problema no es el “div soup”, sino que es resultado de una decisión de diseño de HTML que acopla fuertemente estructura y estilo
    Considera que eso tenía sentido en 1996, pero ya no ahora

• Comparte su experiencia usando elementos personalizados durante 3 o 4 años
  La idea es ingeniosa, pero complicada en la práctica
  Usar demasiadas etiquetas personalizadas reduce la legibilidad y dificulta distinguir entre bloques e inline
  Como enfoque equilibrado, deja las etiquetas base tal como están y usa etiquetas personalizadas solo para elementos tipo componente como <x-card> o <x-hero>
  Los subcomponentes se distinguen con el atributo slot, como en <div slot="hero-blurb">
  Prefiere limitar las clases a modificaciones o personalización, y expresar la estructura mediante slots

  • Dice que le interesan mucho los enfoques equilibrados de Web Components y pide ejemplos o toolkits
    Presenta Good.HTML, que creó él mismo, y explica que soporta autohook, interpolación basada en template literals y estructura de componentes ordenada
    Añade que también implementó elementos personalizados self-closing como < !app-header /> mediante un truco con nodos de comentario
  • Pregunta si, para seleccionar por el atributo slot en CSS, habría que usar algo como div[slot="hero-blurb"]
  • Menciona que este patrón le recuerda a la estructura block–element de BEM

• Por defecto, las etiquetas personalizadas se comportan como <span>
  Si hace falta, se puede definir su comportamiento con la Custom Element API

  • Cuenta que en 2014 usó elementos personalizados de forma extensiva y expresa su pena por que React se haya vuelto dominante
    Cree que, para la mayoría de usuarios, la combinación de HTML + elementos personalizados habría sido mejor que una SPA
  • Dice que es mejor priorizar los elementos semánticos y usar elementos personalizados solo cuando haga falta
    Comparte un ejemplo de Hypalink que creó él mismo y señala la subvaloración de Web Components

• Presenta una etiqueta personalizada llamada <yes-script> que implementa lo contrario de <noscript>
  Permite ocultar cierta área cuando JS está desactivado
  Comparte el enlace del proyecto

  • Sugiere que con la función @media (scripting) de CSS se puede lograr el mismo efecto solo con CSS puro
    Adjunta un enlace a la documentación de MDN

• Comparte que en el pasado recreó por su cuenta la etiqueta eliminada <blink>
  La implementó con jQuery y manipulando visibility, y dice que le sorprendió que el navegador permitiera etiquetas arbitrarias
  No publicó el código porque eran apenas unas 10 líneas, aunque supone que hubo muchos intentos parecidos

  • Explica que, en realidad, la mayoría de navegadores nunca implementó <blink>, y que solo Firefox y Opera la soportaron hasta 2013
  • Expresa que todavía extraña la desaparición de Flash
  • Comparte un código de ejemplo diciendo que el efecto <blink> también puede lograrse solo con CSS
    Añade que, si se usa el selector blink en lugar de .blink, se aplica directamente a la etiqueta
  • Señala que un comportamiento como el de <blink> tiene demasiado peso semántico como para ofrecerse como un simple elemento HTML, y dice alegrarse de que haya desaparecido

• Señala que ejemplos como <main-article> y <article-header> pueden sustituirse por etiquetas HTML reales
  Sería más apropiado usar <article>, <header> y <blockquote>

  • Añade que, al usar etiquetas HTML predefinidas, también se obtienen las ventajas del estilo predeterminado del navegador

• Los elementos personalizados por defecto se renderizan inline como <span>, pero basta con definir una propiedad display predeterminada con CSS
  Antes se evitaban por problemas de espacios de nombres, pero al permitir el estándar el guion (-), el riesgo de conflicto desapareció
  También funcionan sin problema en selectores CSS y se puede acceder a ellos con querySelector
  Siente que incluso sin frameworks como Vue, el HTML moderno ya es suficientemente expresivo

  • Añade que los elementos no estándar con guion se tratan como HTMLElement y no como HTMLUnknownElement
    Esto está diseñado para que, al actualizarse en el futuro, la cadena de prototipos se extienda de forma natural

• Para asignar estilos predeterminados a todos los elementos personalizados, basta con hacer algo así

  :where(:not(:defined)) {
    display: block;
  }
  

  • Dice que justo estaba buscando este método y expresa asombro y agradecimiento

• Recuerda que el IE antiguo no reconocía las etiquetas HTML5, así que lo resolvió con un script que hizo alrededor de 2010
  Si se creaba una vez la etiqueta con JS, IE pasaba a reconocerla, y luego ya no importaba borrarla
  Dice que así se dio cuenta de que también se podían renderizar etiquetas arbitrarias
  Comparte una entrada de blog de esa época

  • Añade que el popular html5shim funcionaba del mismo modo