É possível criar e usar tags HTML diretamente

• No HTML, mesmo usando nomes de tags não reconhecidos, o navegador os trata como elementos genéricos
• No CSS, é possível usar esse nome de tag como seletor para definir estilos e controlar a exibição
• Usar nomes com hífen (-) ajuda a evitar conflitos com futuros padrões do HTML
• Em vez de <div> ou <span>, usar tags personalizadas com significado melhora a legibilidade do código
• Mesmo em estruturas aninhadas complexas, fica mais fácil entender a estrutura só pelo nome das tags, o que facilita a manutenção

---

Como usar tags HTML personalizadas

• O navegador renderiza tags desconhecidas como elementos de bloco genéricos

  • Esse é um comportamento normal definido pelo padrão HTML, e é possível controlá-las visualmente com CSS
  • Por exemplo, você pode definir uma tag como <cool-thing> e estilizar no CSS com cool-thing { ... }

• Se o nome da tag incluir hífen (-), não haverá risco de conflito caso novos elementos sejam adicionados ao padrão HTML no futuro

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

Melhorando a legibilidade e a estrutura

• Em vez de <div> ou <span>, usar tags com nomes significativos torna o código mais fácil de entender
  • Por exemplo, em vez de <div class="article-header">, você pode usar <article-header>
• Em estruturas aninhadas com <div>, é difícil identificar onde cada tag de fechamento corresponde, mas com nomes de tags explícitos a estrutura fica mais clara
  • Se dentro de <main-article> houver elementos como <article-header> e <article-quote>, a estrutura do DOM fica intuitiva de entender

Exemplo de código

• Forma tradicional

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

• Usando tag personalizada

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

  • No CSS, você pode aplicar estilos como cool-thing { display: block; font-weight: bold; text-align: center; ... }

Conclusão

• Ao aproveitar a flexibilidade permitida pelo padrão HTML para definir tags,
  é possível escrever uma marcação estrutural com alta legibilidade
• Porém, se já existir uma tag semântica apropriada definida, o ideal é priorizar o uso da tag existente

[GN⁺]

Comentários do Hacker News

• Enfatiza que <tag-name> não é uma tag não reconhecida
  Apresenta seu post no blog e explica que <tagname> é tratado como HTMLUnknownElement até que o WHATWG o adicione como novo elemento, mas <tag-name> é um HTMLElement válido, útil para layout e estilização
  Se for atualizado com a JavaScript Custom Elements API, torna-se um elemento customizado definido
  Esse é o comportamento padrão em todos os navegadores, e o W3C HTML Validator também reconhece elementos customizados com hífen como HTMLElement
  No entanto, a regra [hidden]{display:none} da folha de estilos UA padrão não é herdada, então é preciso defini-la manualmente
  Como <DIV> é display:block por padrão graças à folha de estilos UA, em elementos customizados também é preciso definir a propriedade display manualmente
  É possível distinguir elementos definidos e não definidos com os seletores CSS :defined e :not(:defined)
  O Declarative Shadow DOM (<template shadowrootmode="open">) também cria da mesma forma elementos customizados não definidos

  • Responde que, no Chromium, isso não é um problema da folha de estilos UA, mas porque hidden é um atributo de apresentação HTML (presentation attribute)
    A folha de estilos UA se aplica igualmente aos elementos customizados, e a regra [hidden] não existe
    hidden é um exemplo de atributo que em si é interpretado como estilo, como align="right"
  • Lamenta que não tenha sido possível usar dois-pontos (:) em vez de hífen (-), o que teria permitido integrar namespaces XML de forma natural
    Menciona que seria até possível converter dois-pontos em hífens no nginx ou no apache
    Termina em tom nostálgico, dizendo que “não dá para voltar para 1999”
  • Questiona por que essa abordagem não é a prática padrão

• Aponta que a estrutura aninhada de <div> no código de exemplo é excessiva
  Sugere que seria mais adequado usar tags semânticas como <article>, <header> e <blockquote>

  • Observa que tags customizadas, ao contrário do atributo de classe, só podem ter um nome
    Classes podem ser múltiplas e não têm ordem, mas elementos customizados aninhados impõem ordem, o que dificulta expressar a mesma coisa
  • Analisa que o problema não é a “div soup”, mas o resultado de uma decisão de projeto do HTML que acopla fortemente estrutura e estilo
    Diz que isso fazia sentido em 1996, mas não hoje

• Compartilha a experiência de ter usado elementos customizados por 3 a 4 anos
  A ideia é inteligente, mas complicada na prática
  Usar tags customizadas demais prejudica a legibilidade e dificulta distinguir entre elementos de bloco e inline
  Como abordagem equilibrada, mantém as tags padrão e usa tags customizadas apenas para elementos em forma de componente, como <x-card> e <x-hero>
  Os subcomponentes são diferenciados com o atributo slot, como em <div slot="hero-blurb">
  Prefere limitar classes a modificações e customização, e representar a estrutura com slots

  • Diz ter muito interesse em uma abordagem equilibrada de Web Components e pede exemplos ou ferramentas
    Apresenta o Good.HTML, que criou, explicando que suporta autohook, interpolação baseada em template literals e estrutura ordenada de componentes
    Acrescenta que também implementou elementos customizados self-closing como < !app-header /> usando um truque com nós de comentário
  • Pergunta se, para selecionar com base no atributo slot em CSS, basta usar algo como div[slot="hero-blurb"]
  • Menciona que esse padrão lembra a estrutura block–element do BEM

• Por padrão, tags customizadas funcionam como <span>
  Se necessário, é possível definir comportamento com a Custom Element API

  • Diz que usou elementos customizados amplamente em 2014 e lamenta que o React tenha virado dominante
    Acredita que, para a maioria dos usuários, a combinação de HTML + elementos customizados teria sido melhor do que SPA
  • Afirma que é melhor priorizar elementos semânticos e usar elementos customizados apenas quando necessário
    Compartilha um exemplo do Hypalink que criou e aponta a subvalorização dos Web Components

• Apresenta uma tag customizada chamada <yes-script> para fazer o oposto de <noscript>
  Quando o JS está desativado, ela pode ocultar determinada área
  Compartilha o link do projeto

  • Sugere que o recurso @media (scripting) do CSS permite obter o mesmo efeito só com CSS puro
    Anexa um link para a documentação do MDN

• Compartilha a experiência de ter recriado manualmente a antiga tag <blink>, removida dos navegadores
  Implementou com jQuery e manipulação de visibility, e diz que se surpreendeu ao descobrir que o navegador aceitava tags arbitrárias
  Como o código tinha umas 10 linhas, não chegou a publicá-lo, mas supõe que deve haver muitas tentativas parecidas

  • Explica que, na prática, a maioria dos navegadores nunca implementou <blink>, e que apenas Firefox e Opera deram suporte até 2013
  • Diz que ainda sente falta do Flash
  • Compartilha um exemplo de código dizendo que também é possível obter o efeito <blink> só com CSS
    Afirma que, se usar o seletor blink em vez de .blink, ele será aplicado diretamente à tag
  • Declara que um comportamento como o de <blink> carrega significado demais para ser oferecido como simples elemento HTML, e por isso vê com bons olhos o seu desaparecimento

• Observa que exemplos como <main-article> e <article-header> podem ser substituídos por tags HTML reais
  Usar <article>, <header> e <blockquote> seria mais apropriado

  • Acrescenta que, ao usar tags HTML predefinidas, também se obtém o benefício da estilização padrão do navegador

• Tags customizadas são renderizadas como inline por padrão, como <span>, mas basta definir um valor padrão de display com CSS
  No passado isso era evitado por causa de problemas com namespaces, mas quando o padrão passou a permitir hífen (-), o risco de conflito desapareceu
  Também funcionam normalmente em seletores CSS e podem ser acessadas com querySelector
  Dá a entender que HTML moderno por si só já é expressivo o bastante, sem precisar de frameworks como Vue

  • Complementa que elementos não padrão com hífen são tratados como HTMLElement, e não HTMLUnknownElement
    Isso foi projetado para que, em uma futura atualização, a cadeia de protótipos possa ser estendida naturalmente

• Para definir um estilo padrão para todos os elementos customizados, basta fazer assim

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

  • Diz que estava procurando exatamente esse método e expressa admiração e agradecimento

• Lembra que o IE antigo não reconhecia tags HTML5, então resolveu isso com um script que criou por volta de 2010
  Bastava criar a tag uma vez com JS para que o IE passasse a reconhecê-la, e depois era possível removê-la sem problemas
  Diz que foi assim que percebeu que também era possível renderizar tags arbitrárias
  Compartilha junto um post antigo do blog

  • Acrescenta que o popular html5shim funcionava da mesma maneira