Citant la section Extensibilité de la spécification HTML5 :
Pour les fonctionnalités au niveau du balisage qui peuvent être limitées à la sérialisation XML et qui n'ont pas besoin d'être prises en charge dans la sérialisation HTML, les fournisseurs doivent utiliser le mécanisme d'espace de noms pour définir des espaces de noms personnalisés dans lesquels les éléments et attributs non standard sont pris en charge.
Donc, si vous utilisez la sérialisation XML de HTML5, il est légal pour vous de faire quelque chose comme ceci:
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
Cependant, si vous utilisez la syntaxe HTML, vous êtes beaucoup plus limité dans ce que vous pouvez faire.
Pour les fonctionnalités de niveau balisage destinées à être utilisées avec la syntaxe HTML, les extensions doivent être limitées aux nouveaux attributs de la forme "x-vendor-feature" [...] Les nouveaux noms d'élément ne doivent pas être créés.
Mais ces instructions sont principalement destinées aux fournisseurs de navigateurs, qui fourniraient supposément un style visuel et des fonctionnalités pour les éléments personnalisés qu'ils choisiraient de créer.
Pour un auteur, cependant, même s'il peut être légal d'incorporer un élément personnalisé dans la page (au moins dans la sérialisation XML), vous n'obtiendrez rien de plus qu'un nœud dans le DOM. Si vous voulez que votre élément personnalisé fasse réellement quelque chose ou soit rendu d'une manière spéciale, vous devriez regarder la spécification des éléments personnalisés .
Pour une introduction plus douce sur le sujet, lisez l' introduction des composants Web , qui comprend également des informations sur Shadow DOM et d'autres spécifications associées. Ces spécifications sont encore en cours de rédaction pour le moment - vous pouvez voir l'état actuel ici - mais elles sont activement développées.
À titre d'exemple, une définition simple d'un greeting
élément peut ressembler à ceci:
<element name="greeting">
<template>
<style scoped>
span { color:gray; }
</style>
<span>Simon says:</span>
<q><content/></q>
</template>
</element>
Cela indique au navigateur de rendre le contenu de l'élément entre guillemets, et préfixé par le texte "Simon dit:" qui est de style gris. En règle générale, une définition d'élément personnalisée comme celle-ci serait stockée dans un fichier html distinct que vous importeriez avec un lien.
<link rel="import" href="greeting-definition.html" />
Bien que vous puissiez également l'inclure en ligne si vous le souhaitez.
J'ai créé une démonstration de travail de la définition ci-dessus en utilisant la bibliothèque Polymer polyfill que vous pouvez voir ici . Notez que cela utilise une ancienne version de la bibliothèque Polymer - les versions plus récentes fonctionnent assez différemment. Cependant, avec la spécification toujours en développement, ce n'est pas quelque chose que je recommanderais de toute façon d'utiliser dans le code de production.