---
title: Web Components
slug: Web/Web_Components
tags:
  - Composants Web
translation_of: Web/Web_Components
---
<p>{{DefaultAPISidebar("Web Components")}}{{ draft }}</p>

<p>Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d'interface graphique personnalisés et 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.</p>

<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>

<p>En tant que développeurs, nous savons tous à quel point la réutilisation de code est une bonne chose. Malgré cela, historiquement, il a toujours été difficile de réutiliser les languages balisés. Prenez par exemple tous ces éléments complexes en HTML que vous avez créés et dû répéter dans vos applications avec le risque que votre code devienne incompréhensible.</p>

<p>Les composants Web ont pour but de résoudre ce problème et consistent en 3 technologies qui peuvent être utilisées ensemble pour créer des éléments réutilisables, encapsulés, versatiles et sans risquer une collision avec d'autre morceaux de code.</p>

<ul>
 <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Custom Elements: </a> pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur.</li>
 <li><a href="/fr/docs/Web/HTML/Element/template">HTML Templates: </a> squelette pour créer des éléments HTML instanciables.</li>
 <li><a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM: </a>permet d'encapsuler le JavaScript et le CSS des éléments.</li>
</ul>

<p>Au début de la spécification, il y avait aussi la technologie <a href="/fr/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>. Celle-ci servait à packager ses composants (CSS, JavaScript, etc.) et permettre leur intégration dans d'autres pages. Elle a néanmoins été abandonnée au profit des imports javascript qui permettent la même chose en utilisant une syntaxe plus moderne.</p>

<p>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 celui-ci peut devenir un élément réutilisable facilement.</p>

<p>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.</p>

<p>Généralement, l'approche basique pour la création d'un composant Web est la suivante:</p>

<ol>
 <li>Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les <a href="/fr/docs/Web/JavaScript/Reference/Classes">Classes</a> pour de plus amples informations).</li>
 <li>Enregistrer le nouvel élément personnalisé en utilisant la méthode {{domxref("CustomElementRegistry.define()")}}, avec en paramètre le nom de l'élément à définir, la classe ou la fonction dans laquelle la fonctionnalité est spécifiée, et optionnellement, de quel élément celui-ci hérite-t-il.</li>
 <li>Si nécessaire, connecter un shadow DOM à l'élément personnalisé en utilisant la méthode {{domxref("Element.attachShadow()")}}. Ajouter les éléments-fils, les écouteurs d'événements, etc., au shadow DOM en utilisant les méthodes DOM usuelles.</li>
 <li>Si nécessaire, définir un template HTML en utilisant {{htmlelement("template")}} et {{htmlelement("slot")}}. Toujours en utilisant les méthodes DOM usuelles pour cloner le template et le connecter au shadow DOM.</li>
 <li>Utiliser l'élément personnalisé à l'endroit désiré sur la page, comme tous les autres éléments HTML.</li>
</ol>

<div class="note">
<p><strong>Note :</strong> Les Composants 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 <a href="http://www.polymer-project.org/">projet Google Polymer</a>. Pour savoir quels navigateurs implémentent les Composants Web, voir <a href="http://jonrimmer.github.io/are-we-componentized-yet/">Are We Componentized Yet?</a></p>
</div>


<p>Les spécifications des Composants Web définissent les éléments suivants :</p>

<ul>
 <li>De nouveaux éléments HTML : {{HTMLElement("template")}}, {{HTMLElement("content")}} et {{HTMLElement("shadow")}} ({{HTMLElement("element")}} et {{HTMLElement("decorator")}} ont été retirés).</li>
 <li>Les interfaces d'API associées pour les nouveaux éléments: {{domxref("HTMLTemplateElement")}}, {{domxref("HTMLContentElement")}} et {{domxref("HTMLShadowElement")}}.</li>
 <li>Des extensions à l'interface {{domxref("HTMLLinkElement")}} et l'élément {{HTMLElement("link")}}.</li>
 <li>Une API pour enregistrer les custom elements, {{domxref("Document.registerElement()")}}, et des modifications de {{domxref("Document.createElement()")}} et {{domxref("Document.createElementNS()")}}.</li>
 <li>De nouvelles fonctions liées au cycle de vie ("<em>lifecycle callbacks</em>") peuvent être ajoutées à un prototype sur lequel est basé un custom element.</li>
 <li>Une nouvelle pseudo-classe CSS pour les éléments de style par defaut, {{cssxref(":unresolved")}}.</li>
 <li>Le Shadow DOM : {{domxref("ShadowRoot")}} et {{domxref("Element.createShadowRoot()")}}, {{domxref("Element.getDestinationInsertionPoints()")}}, {{domxref("Element.shadowRoot")}}.</li>
 <li>Une extension à l'interface {{domxref("Event")}}, {{domxref("Event.path")}}.</li>
 <li>Une extension à l'interface {{domxref("Document")}}.</li>
 <li>Pour le style des Composants Web:
  <ul>
   <li>de nouvelles pseudo-classes : {{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}.</li>
   <li>de nouveaux pseudo-elements : {{cssxref("::shadow")}} et {{cssxref("::content")}}.</li>
   <li>un nouveau combinateur, <code>/deep/</code>.</li>
  </ul>
 </li>
</ul>

<h2 id="Activer_les_Web_Components_dans_Firefox">Activer les Web Components dans Firefox</h2>

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

<p><img alt="Firefox enable web components" src="https://mdn.mozillademos.org/files/10145/enable-wc.png"></p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('Custom Elements', "", "")}}</td>
   <td>{{Spec2('Custom Elements')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Pas de changement</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Définition initiale</td>
  </tr>
  <tr>
   <td>{{SpecName('Shadow DOM', "", "")}}</td>
   <td>{{Spec2('Shadow DOM')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML Imports', "", "")}}</td>
   <td>{{Spec2('HTML Imports')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS Scope", "", "")}}</td>
   <td>{{Spec2('CSS Scope')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>