Os elementos personalizados são HTML5 válidos?

Não consegui encontrar uma resposta definitiva para saber se as tags personalizadas são válidas no HTML5, assim:

<greeting>Hello!</greeting>

Não encontrei nada de uma forma ou de outra:

http://dev.w3.org/html5/spec/single-page.html

E as tags personalizadas parecem não validar com o validador W3C.

A especificação de elementos personalizados está disponível no Chrome e Opera e está disponível em outros navegadores . Ele fornece um meio de registrar elementos personalizados de maneira formal.

Elementos personalizados são novos tipos de elementos DOM que podem ser definidos pelos autores. Diferentemente dos decoradores , que são sem estado e efêmeros, os elementos personalizados podem encapsular o estado e fornecer interfaces de script.

Os elementos personalizados fazem parte de uma especificação W3 maior chamada Componentes da Web , juntamente com Modelos, Importação de HTML e Sombra DOM.

Os Componentes da Web permitem que os autores de aplicativos da Web definam widgets com um nível de riqueza visual e interatividade impossível apenas com CSS, e facilidade de composição e reutilização não é possível atualmente nas bibliotecas de scripts.

No entanto, a partir deste excelente artigo no Google Developers sobre o Custom Elements v1:

O nome de um elemento personalizado deve conter um hífen ( -). Assim <x-tags>, <my-element>e <my-awesome-app>são todos nomes válidos, enquanto <tabs>e <foo_bar>não são. Este requisito é para que o analisador HTML possa distinguir elementos personalizados de elementos regulares. Ele também garante compatibilidade direta quando novas tags são adicionadas ao HTML.

Alguns Recursos

• Exemplos de componentes da Web estão disponíveis em https://WebComponents.org
• O WebComponents.js serve como um polyfill para Web Components até que eles sejam suportados em todos os lugares. Consulte também a página de suporte do navegador da Web e página do github WebComponents.js .

É possível e permitido:

Os agentes de usuários devem tratar elementos e atributos que eles não entendem como semanticamente neutros; deixando-os no DOM (para processadores DOM) e estilizando-os de acordo com CSS (para processadores CSS), mas sem inferir nenhum significado deles.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Mas, se você deseja adicionar interatividade, precisará tornar seu documento inválido (mas ainda totalmente funcional) para acomodar os 7 e 8 do IE.

Consulte http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (meu blog)

NB A resposta abaixo estava correta quando foi escrita em 2012. Desde então, as coisas mudaram um pouco. A especificação HTML agora define dois tipos de elementos personalizados - "elementos personalizados autônomos" e "elementos internos personalizados". O primeiro pode ir a qualquer lugar onde se espera conteúdo de frases; que é a maioria dos lugares dentro do corpo, mas não por exemplo, filhos de elementos ul ou ol ou em elementos de tabela que não sejam elementos td, th ou caption. O último pode ir aonde quer que o elemento que eles estendem possa ir.

Isso é realmente uma consequência do acúmulo do modelo de conteúdo dos elementos.

Por exemplo, o elemento raiz deve ser um htmlelemento.

O htmlelemento pode conter apenas um elemento head seguido por um elemento body.

O bodyelemento pode conter apenas conteúdo de Fluxo onde o conteúdo de fluxo é definido como os elementos: a, abbr, endereço, área (se for um descendente de um elemento do mapa), artigo, aparte, áudio, b, bdi, bdo, blockquote, br, botão, tela, citar, código, comando, datalist, del, detalhes , dfn, div dl, em, embed, fieldset, figura, rodapé, formulário, h1, h2, h3, h4, h5, h6, cabeçalho, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etiqueta, mapa, marca, matemática, menu, medidor, nav, noscript, objeto, ol, saída, p, pré, progresso, q, rubi, s, samp, script, seção, selecionar, pequeno, extensão, forte, estilo ( se o atributo de escopo estiver presente), sub, sup, svg, table, textarea, time,u, ul, var, vídeo, wbr e texto

e assim por diante.

Em nenhum momento o modelo de conteúdo diz "você pode colocar quaisquer elementos que desejar neste", o que seria necessário para elementos / tags personalizados.

Elementos e atributos personalizados básicos

Os elementos e atributos personalizados são válidos em HTML, desde que:

• Os nomes dos elementos são minúsculos e começam com x-
• Os nomes dos atributos são minúsculos e começam com data-

Por exemplo, <x-foo data-bar="gaz"/>ou <br data-bar="gaz"/>.

Uma convenção comum para elementos é x-foo; x-vendor-featureé recomendado.

Isso lida com a maioria dos casos, pois é raro que um desenvolvedor precise de todo o poder necessário para registrar seus elementos. A sintaxe também é adequadamente válida e estável. Uma explicação mais detalhada está abaixo.

Atributos e elementos personalizados avançados

A partir de 2014, há uma maneira nova e muito aprimorada de registrar elementos e atributos personalizados. Ele não funciona em navegadores mais antigos, como o IE 9 ou o Chrome / Firefox 20. Mas permite que você use a HTMLElementinterface padrão , evite colisões, use nomes que x-*não sejam e que não sejam data-*nomes e defina comportamento e sintaxe personalizados para o navegador respeitar . Requer um pouco de JavaScript sofisticado, conforme detalhado nos links abaixo.

Rochas HTML5 - Definindo novos elementos em HTML
WebComponents.org - Introdução aos elementos personalizados
W3C - Componentes da Web: elementos personalizados

Sobre a validade da sintaxe básica

O uso data-*de nomes de atributos personalizados é perfeitamente válido há algum tempo e até funciona com versões mais antigas do HTML.

W3C - HTML5: extensibilidade

Quanto aos nomes de elementos personalizados (não registrados), o W3C recomenda fortemente contra eles e os considera não-conformes. Mas são necessários navegadores para suportá-los, e os x-*identificadores não entrarão em conflito com as especificações HTML futuras e os x-vendor-featureidentificadores não entrarão em conflito com outros desenvolvedores. Um DTD personalizado pode ser usado para solucionar qualquer navegador exigente.

Aqui estão alguns trechos relevantes dos documentos oficiais:

"As especificações aplicáveis ​​PODEM definir o novo conteúdo do documento (por exemplo, um elemento foobar) [...]. Se a sintaxe e a semântica de um documento HTML5 em conformidade não forem alteradas pelo uso das especificações aplicáveis, esse documento permanecerá um HTML5 em conformidade documento."

"Os agentes de usuários devem tratar elementos e atributos que eles não entendem como semanticamente neutros; deixando-os no DOM (para processadores DOM) e modelando-os de acordo com CSS (para processadores CSS), mas sem inferir nenhum significado deles."

"Os agentes do usuário não são livres para lidar com documentos não conformes como bem entenderem; o modelo de processamento descrito nesta especificação se aplica às implementações, independentemente da conformidade dos documentos de entrada."

"A interface HTMLUnknownElement deve ser usada para elementos HTML que não são definidos por esta especificação."

W3C - HTML5: conformidade de documentos
WhatWG - HTML Standard: Elementos DOM

Eu gostaria de salientar que a palavra "válido" pode ter dois significados diferentes nesse contexto, sendo que um deles é potencialmente, um, válido.

1. Um documento HTML com tags personalizadas deve ser considerado HTML5 válido? A resposta para isso é claramente "não". A especificação lista exatamente quais tags são válidas em quais contextos. É por isso que um validador HTML não aceita um documento com tags personalizadas ou com tags padrão nos lugares errados (como uma tag "img" no cabeçalho).

2. Um documento HTML com tags personalizadas será analisado e renderizado de maneira padrão e claramente definida nos navegadores? Aqui, talvez surpreendentemente, a resposta seja "sim". Embora o documento não seja tecnicamente considerado válido como HTML5 válido, a especificação HTML5 especifica exatamente o que os navegadores devem fazer quando virem uma tag personalizada: em resumo, a tag personalizada age como uma <span>- não significa nada e não faz nada por padrão, mas pode ser estilizado por HTML e acessado por javascript.

Os elementos HTML personalizados são um padrão emergente do W3 no qual tenho contribuído, permitindo que você declare e registre elementos personalizados com o analisador. Você pode ler as especificações aqui: Especificação de elementos personalizados do W3 Web Components . Além disso, a Microsoft suporta uma biblioteca (escrita por ex-desenvolvedores da Mozilla), chamada X-Tag - facilita ainda mais o trabalho com os Componentes da Web.

Para fornecer uma resposta atualizada, refletindo as páginas modernas.

Tags personalizadas são válidas se,

1) Eles contêm um traço

<my-element>

2) Eles são XML incorporados

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Isso pressupõe que você esteja usando o doctype HTML5 <!doctype html>

Considerando essas restrições simples, agora faz sentido fazer o possível para manter sua marcação HTML válida (pare de fechar as tags como <img>e <hr>, é tolo e incorreto, a menos que você use um doctype XHTML, do qual provavelmente não precisa).

Como o HTML5 define claramente as regras de análise, um navegador compatível poderá lidar com qualquer tag que você lançar, mesmo que não seja estritamente válida.

Citando a seção Extensibilidade da especificação HTML5 :

Para recursos no nível de marcação que podem ser limitados à serialização XML e não precisam ser suportados na serialização HTML, os fornecedores devem usar o mecanismo de espaço para nome para definir espaços para nome personalizados nos quais os elementos e atributos não padrão são suportados.

Portanto, se você estiver usando a serialização XML do HTML5, é legal fazer algo assim:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

No entanto, se você estiver usando a sintaxe HTML, ficará muito mais limitado no que poderá fazer.

Para os recursos em nível de marcação destinados ao uso com a sintaxe HTML, as extensões devem ser limitadas a novos atributos do formato "x-vendor-feature" [...] Novos nomes de elementos não devem ser criados.

Mas essas instruções são direcionadas principalmente aos fornecedores de navegadores, que supostamente forneceriam estilo visual e funcionalidade para quaisquer elementos personalizados que escolherem criar.

Para um autor, no entanto, embora possa ser legal incorporar um elemento personalizado na página (pelo menos na serialização XML), você não receberá nada além de um nó no DOM. Se você deseja que seu elemento personalizado realmente faça algo ou seja renderizado de alguma maneira especial, verifique a especificação de Elementos Personalizados .

Para obter uma cartilha mais suave sobre o assunto, leia a Introdução aos componentes da Web , que também inclui informações sobre o Shadow DOM e outras especificações relacionadas. Essas especificações ainda estão em rascunhos no momento - você pode ver o status atual aqui - mas estão sendo ativamente desenvolvidas.

Como exemplo, uma definição simples para um greetingelemento pode ser algo como isto:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Isso indica ao navegador para renderizar o conteúdo do elemento entre aspas e prefixado pelo texto "Simon says:", que é estilizado com a cor cinza. Normalmente, uma definição de elemento personalizada como essa seria armazenada em um arquivo html separado que você importaria com um link.

<link rel="import" href="greeting-definition.html" />

Embora você também possa incluí-lo em linha, se desejar.

Eu criei uma demonstração de trabalho da definição acima usando a biblioteca Polyfill Polyfill, que você pode ver aqui . Observe que isso está usando uma versão antiga da biblioteca Polymer - as versões mais recentes funcionam de maneira bastante diferente. No entanto, com as especificações ainda em desenvolvimento, isso não é algo que eu recomendaria usar no código de produção de qualquer maneira.

basta usar o que quiser, sem qualquer declaração dom

<container>content here</container>

adicione seu próprio estilo (display: block) e ele funcionará com qualquer navegador moderno

data-*atributos são válidos no HTML5 e, mesmo no HTML4, todos os navegadores usados ​​para respeitá-los. Adicionar novas tags é tecnicamente aceitável, mas não é recomendado apenas porque:

1. Pode entrar em conflito com algo adicionado no futuro e
2. Torna o documento HTML inválido, a menos que seja adicionado dinamicamente via JavaScript.

I usar tags personalizados apenas em locais que o Google não se importa, para ecample em um iframe motor de jogo, eu fiz um <log>tag que continha <msg>, <error>e <warning>- mas através de JavaScript somente. E foi totalmente válido, de acordo com o validador. Até funciona no Internet Explorer com seu estilo! ;]

Tags personalizadas não são válidas em HTML5. No entanto, atualmente, os navegadores oferecem suporte para analisá-los e você também pode usá-los usando o css. Portanto, se você quiser usar tags personalizadas para os navegadores atuais, poderá. Mas o suporte pode ser retirado quando os navegadores implementarem os padrões W3C estritamente para analisar o conteúdo HTML.

Sei que essa pergunta é antiga, mas tenho estudado esse assunto e, embora algumas das afirmações acima estejam corretas, elas não são a única maneira de criar elementos personalizados. Por exemplo:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

funcionaria perfeitamente bem (nas versões mais recentes do Google Chrome, IE, FireFox e Safari móvel até agora). Tudo o que você precisa é apenas de um caractere alfa (az, AZ) para iniciar a tag e, em seguida, você pode usar qualquer um dos caracteres não alfa depois. Se em CSS, você deve usar o "\" (barra invertida) para encontrar o elemento, como seria necessário Query \ ^ {...}. Mas em JS, você apenas chama como vê. Espero que isto ajude. Veja o exemplo aqui

-Mink CBOS