Se vc testar um custom elements
desses no validador de código da própria W3C vc vai ver que vai retornar um erro:
Link para vc mesmo testar: https://validator.w3.org/#validate_by_input
Propriedades do user-agent
A maioria das tag como <div>
, <label>
, etc possuem atributos default definidos pelo próprio user-agent
como por exemplo display:block
na div
. Já um custom elemen
t como <teste>
não vai receber estilo algum do user-agent
, o que na maioria dos casos tb não é muito útil...
Não normativo
Custom Elements ainda são um Draft na especificações do HTML5 como vc pode consultar aqui http://w3c.github.io/webcomponents/spec/custom/
"Embora os autores sempre possam usar elementos não padrão em seus documentos, com o comportamento específico do aplicativo adicionado após o fato por script ou similar, esses elementos têm sido historicamente não-conformes e não muito funcionais."
Boas práticas e Semântica
"Em geral, o nome do elemento a ser alargada não pode ser determinado simplesmente por olhar para o interface do elemento estende-se, como muitos elementos partilham a mesma interface (por exemplo, q
e blockquote
ambos compartilhando HTMLQuoteElement
)."
Para usar nosso elemento interno personalizado, usamos o atributo is
em um elemento button
:
<button is="plastic-button">Click Me!</button>
Desvantagem de se usar esse tipo de elemento: http://w3c.github.io/webcomponents/spec/custom/#drawbacks-of-autonomous-custom-elements
- Mal gerenciamento do
tabindex
- Semântica comprometida, necessita de
role
e aria atributos
, diferente de um article
, section
, etc que já têm uma semântica intrínseca da própria tag
- Não tem os estilos do
user-agent