Les composants Web sont de plus en plus compatibles avec les différents navigateurs, la communauté se développe à grande vitesse, et un tout nouveau catalogue de composants Web vous permet de trouver exactement le composant dont vous avez besoin.
Avez-vous déjà voulu 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 ? Les composants Web peuvent vous convenir.
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 avoir 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 et répondre à des événements, et même avoir un style encapsulé et des arbres DOM pour apporter leur propre apparence.
En fournissant un modèle de composant de bas niveau basé sur une plate-forme, les composants Web vous permettent de créer et de partager des éléments réutilisables, allant des boutons spécialisés aux vues complexes telles que les sélecteurs de date. Étant donné que les composants Web sont créés avec des API de plate-forme qui incluent des primitives d'encapsulation puissantes, vous pouvez même utiliser ces composants dans d'autres bibliothèques ou frameworks JavaScript comme s'ils étaient des éléments DOM standards.
Vous avez peut-être déjà entendu parler de Web Components. Une première version de la spécification Web Components (v0) a été publiée dans Chrome 33.
Aujourd'hui, grâce à une large collaboration entre les fournisseurs de navigateurs, la version 1 de la spécification Web Components est largement acceptée. Chrome est compatible avec les deux principales spécifications qui constituent les composants Web : le Shadow DOM et les éléments personnalisés, respectivement à partir de Chrome 53 et de Chrome 54. Safari a pris en charge Shadow DOM v1 dans Safari 10 et a terminé l'implémentation de Custom Elements v1 dans WebKit. Firefox développe actuellement la version 1 de Shadow DOM et des éléments personnalisés. Shadow DOM et éléments personnalisés figurent tous deux dans 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 auprès du navigateur:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Les nouvelles spécifications de la version 1 sont extrêmement puissantes. Nous avons créé des tutoriels sur l'utilisation de Custom Elements v1 et de Shadow DOM v1 pour vous aider à vous lancer.
webcomponents.org
La communauté des composants Web se développe également à une vitesse folle. Nous sommes ravis de lancer une version mise à jour du site webcomponents.org, point central de la communauté des composants Web, qui comprend un catalogue intégré permettant aux développeurs de partager leurs éléments.
Le site webcomponents.org contient des informations sur les specs Web Components, les mises à jour et le contenu de la communauté Web Components, et affiche la documentation des éléments Open Source et des 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 les API de composants Web de bas niveau. Ensuite, publiez votre élément sur webcomponents.org.
Bon travail !