Web Components

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

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

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Brouillon
Cette page n'est pas terminée.

Les Composants Web sont constitués de plusieurs technologies distinctes. Vous pouvez les voirs comme des composants d'interface graphique réutilisables,qui ont été crées en utilisants des technologies web libres . Ils font partie du navigateur, et donc ils ne nécessitent pas de bibliothèques externes 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 standards 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 elle laisse bien d'autres choses pour lesquelles les Composants Web pourraient être crées. Avec un Composant Web, vous pouvez faire presque tout ce qui peut être fait avec HTML, CSS et JavaScript, et il peut être un élément portable qui peut être réutilisé facilement.

Parfois, il y a 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 donc pour les utiliser dès maintenant dans la plupart des navigateurs (Janvier 2015), vous devrez probablement utiliser des polyfills(se sont des bibliothèques JavaScript destinée à émuler des fonctionnalités qui ne sont pas encore implémentées dans les navigateurs) . Les polyfills sont disponibles dans le projet Google Polymer. Pour savoir quels navigateurs implémentent les Composants Web, voir Somme-nous subdivisées encore?  

Les Composants Web sont constitués de ces quatre technologies ( bien que chacun peut être utilisé 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: squelettes pour des éléments HTML instanciables,
  • Shadow DOM: ce qui sera public ou privé dans vos éléments,
  • HTML Imports: pour packager ses composants (CSS, JavaScript, etc.)

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 tous les alertes qui appraissent. Cherchez ensuite la préférence nommée dom.webcomponents.enabled, et changez la à true par double click.

Firefox enable web components

Specifications

Specification Status Comment
Custom Elements Version de travail  
WHATWG HTML Living Standard
La définition de 'template element' dans cette spécification.
Standard évolutif No change
HTML5
La définition de 'template element' dans cette spécification.
Recommendation Initial definition
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 : oussama-jlassi, Zecat
 Dernière mise à jour par : oussama-jlassi,