Les composants Web sont désormais compatibles avec plusieurs navigateurs, la communauté ne cesse de s'agrandir, et il existe un tout nouveau catalogue Web Component pour trouver exactement le composant dont vous avez besoin.
Vous souhaitez créer votre propre composant JavaScript autonome, que vous pouvez facilement utiliser dans plusieurs projets ou partager avec d'autres développeurs, quel que soit le framework JavaScript qu'ils utilisent ? Web Components est peut-être fait pour vous.
Les composants Web sont un ensemble de nouvelles fonctionnalités de plate-forme Web qui vous permettent de créer vos propres éléments HTML. Chaque nouvel élément personnalisé peut être associé à une balise personnalisée comme <my-button> et bénéficier de tous les avantages des éléments intégrés. Les éléments personnalisés peuvent avoir des propriétés et des méthodes, déclencher des événements et y répondre, et même avoir un style encapsulé et des arborescences DOM pour donner leur propre apparence.
En fournissant un modèle de composants de bas niveau basé sur la plate-forme, les composants Web vous permettent de créer et de partager des éléments réutilisables pour tout, des boutons spécialisés aux vues complexes telles que les sélecteurs de date. Étant donné que les composants Web sont conçus avec des API de plate-forme qui incluent de puissantes primitives d'encapsulation, vous pouvez même utiliser ces composants dans d'autres bibliothèques ou frameworks JavaScript comme s'il s'agissait d'éléments DOM standards.
Vous avez peut-être déjà entendu parler des composants Web. Une première version de la spécification Web Components (v0) a été expédiée dans Chrome 33.
Aujourd'hui, grâce à une collaboration étendue entre les fournisseurs de navigateurs, la nouvelle génération de la spécification Web Components v1 est désormais largement prise en charge. Chrome est compatible avec les deux principales spécifications des composants Web (Shadow DOM et Éléments personnalisés) à partir de Chrome 53 et de Chrome 54 respectivement. Safari est compatible avec Shadow DOM v1 dans Safari 10 et a terminé l'implémentation de Custom Elements v1 dans WebKit. Firefox développe actuellement l'outil Shadow DOM et les éléments personnalisés v1, et les éléments Shadow DOM et éléments personnalisés figurent sur la feuille de route d'Edge.
Pour définir un nouvel élément personnalisé à l'aide de l'implémentation v1, il vous suffit de créer une classe qui étend HTMLElement à l'aide de la syntaxe ES6 et de l'enregistrer dans le navigateur:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Les nouvelles spécifications de la version 1 sont extrêmement utiles. Nous avons créé des tutoriels sur l'utilisation des éléments personnalisés v1 et Shadow DOM v1 pour vous aider à démarrer.
webcomponents.org
La communauté Web Component ne cesse de se développer. Nous sommes ravis de lancer la mise à jour du site webcomponents.org, le point central de la communauté des composants Web, qui inclut un catalogue intégré permettant aux développeurs de partager leurs éléments.
Le site webcomponents.org contient des informations sur les spécifications des composants Web, les mises à jour et le contenu de la communauté des composants Web. Il affiche également la documentation sur les éléments Open Source et les collections d'éléments créés par d'autres développeurs.
Vous pouvez commencer à créer votre premier élément à l'aide d'une bibliothèque telle que Polymer de Google, ou simplement utiliser directement l'API Web Component de bas niveau. Ensuite, publiez votre élément sur webcomponents.org.
À vous de jouer !