É 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 ou, 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 `` 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.: ,

Melhorando a legibilidade e a estrutura

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

Exemplo de código

• Forma tradicional

  
    Hello, World!
  
  

• Usando tag personalizada

  
    Hello, World!
  
  

  • 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 não é uma tag não reconhecida Apresenta seu [post no blog](https://dashed-html.github.io) e explica que é tratado como HTMLUnknownElement até que o WHATWG o adicione como novo elemento, mas é 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 é 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 (``) 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 no código de exemplo é excessiva Sugere que seria mais adequado usar **tags semânticas** como, e

  • 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 e Os subcomponentes são diferenciados com o atributo slot, como em `` 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 `` 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 para fazer o oposto de 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 ``, 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 ``, 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 `` 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 `` carrega significado demais para ser oferecido como simples elemento HTML, e por isso vê com bons olhos o seu desaparecimento

• Observa que exemplos como e podem ser substituídos por tags HTML reais Usar , e `` 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 ``, 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