Web Components

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Brouillon
Cette page n'est pas terminée.

Les Composants Web sont constitués de plusieurs technologies distinctes. Vous pouvez les voir comme des composants d'interface graphique réutilisables, qui ont été créés en utilisant des technologies web libres. Ils font partie du navigateur, et donc ne nécessitent pas de bibliothèque externe comme jQuery ou Dojo. Un Composant Web existant peut être utilisé sans l'écriture de code, en ajoutant simplement une déclaration d'importation à une page HTML. Les Composants Web utilisent les nouvelles capacités standard de navigateur, ou celles en cours de développement.

Note: Il s'agit d'une technologie expérimentale. Le navigateur que vous l'utiliser doit supporter les Composants Web . Voir Autoriser les Composants Web dans Firefox.

La description ci-dessus fonctionne assez bien à l'heure actuelle, mais cela laisse de côté plusieurs choses pour lesquelles les Composants Web pourraient être utilisés. Avec un Composant Web, vous pouvez faire presque tout ce qui peut être fait en HTML, CSS et JavaScript, et peut devenir un élément réutilisable facilement.

Il y a parfois une certaine confusion concernant les Composants Web et Google Polymer. Polymer est un framework qui repose sur la technologie des Composants Web.  Vous pouvez faire et utiliser des Composants Web sans Polymer.

Les Composents Web ne sont pas encore pleinement mis en œuvre dans tous les navigateurs, et pour les utiliser dès maintenant dans la plupart des navigateurs (janvier 2015), vous devrez probablement utiliser des polyfills (ce sont des bibliothèques JavaScript destinées à émuler des fonctionnalités qui ne sont pas encore implémentées nativement dans les navigateurs). Les polyfills sont disponibles dans le projet Google Polymer. Pour savoir quels navigateurs implémentent les Composants Web, voir Are We Componentized Yet?  

Les Composants Web sont constitués de quatre technologies (bien que chacune puisse être utilisée séparément) :

  • Custom Elements: pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur.
  • HTML Templates: squelette pour créer des éléments HTML instanciables.
  • Shadow DOM: permet d'encapsuler le JavaScript et le CSS des éléments.
  • HTML Imports: pour packager ses composants (CSS, JavaScript, etc.) et permettre leur intégration dans d'autres pages.

Les spécifications des Composants Web définissent les éléments suivants :

Activer les Web Components dans Firefox

Les capacités des Web Components sont désactivées par défaut dans Firefox. Pour les activer, allez sur la page about:config page and rejetez toutes les alertes qui appraissent. Cherchez ensuite la préférence nommée dom.webcomponents.enabled, et changez la à true par un double clic.

Firefox enable web components

Spécifications

Spécification Statut Commentaire
Custom Elements Version de travail  
WHATWG HTML Living Standard
La définition de 'template element' dans cette spécification.
Standard évolutif Pas de changement
HTML5
La définition de 'template element' dans cette spécification.
Recommendation Définition initiale
Shadow DOM Version de travail  
HTML Imports Version de travail  
CSS Scoping Module Level 1 Version de travail  

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : linsolas, GtAntoine, paulguzda, oussama-jlassi, Zecat
 Dernière mise à jour par : linsolas,