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 greeting
elemento 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.