Les Custom Elements (ou Web Components) sont un moyen pour les développeurs Web de ne plus se repeter. Tout comme avec les variables, apparu dans les préprocesseurs CSS, et progressivement intégrés au CSS par le W3 C, les Web Components sont une simplification de ce qu'il est déjà possible de faire avec certains templates engine. Mais qu'est-ce qu'un web component précisément ?

Custom Elements

Les customs éléments sont une spécification permettant de créer ses propres éléments HTML, et de les manipuler en utilisant l'API Javascript standard. Cette spécification sera sans aucun doute une des plus grandes avancées que connaîtra le HTML, et permettra d'accélérer grandement l'intégration.

Cette fonctionnalité est encore malheureusement en draft. Plus d'infos sur la page dédiée du W3C.

Utilisation

La spécification est encore en draft, ce qui fait qu'elle n'est pas encore complètement intégré aux navigateurs, mais rassurez-vous, cela ne vos empêche pas de l'utiliser dès aujourd'hui grace à des librarys suivant l'évolution de la spécification. Je vous en propose deux.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Polymer

Polymer est l'interprétation des web-components par Google. Cette library est compatible avec tous les navigateurs récents (donc IE 10 ou supperieurs pour IE, et les versions à jour des autres navigateurs).

X-Tag

X-tag est l'interprétation de Mozilla, qui a elle l'avantage d'être compatible jusqu'à IE9.

Pour aller plus loin

Si vous avez envie d'essayer les web components sans pour autant vous intéresser à leur création, je vous conseille de jeter un oeil à Brick (a ne pas confondre avec Brick, le depot de fonts).

Brick est un pack de web-components fait par mozilla qui vous aideront à créer des applications Web. Des calendriers, sliders, decks, et bien d'autres éléments sont présents.

Je vous invite aussi à aller voir les sources de Brick sur Github si vous voulez un exemple de création de web component.