initial commit

5 files changed, 972 insertions, 0 deletions

diff --git a/files/fr/web/web_components/html_imports/index.html b/files/fr/web/web_components/html_imports/index.html
new file mode 100644
index 0000000000..7f73f8303d
--- /dev/null
+++ b/files/fr/web/web_components/html_imports/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML Imports
+slug: Web/Web_Components/HTML_Imports
+tags:
+  - Composants Web
+translation_of: Web/Web_Components/HTML_Imports
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolète depuis Google Chrome 73</strong><br>
+ Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p>
+</div>
+
+<div class="warning">
+<p>Firefox ne va pas supporter <em>HTML Imports</em> dans sa forme actuelle. Voir cet article en anglais "<a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">status update</a>" pour plus d'informations. Tant qu'aucun consensus sur le standard ou aucun mécanisme alternatif n'aura émergé, il est possible d'utiliser le polyfill <code><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a></code> de Google.</p>
+</div>
+
+<p><em>HTML Imports</em> est censé être un moyen de livrer des <a href="/fr/docs/Web/Web_Components">Composants Web</a> dans une page, mais il est aussi possible d'utiliser HTML Imports seul.</p>
+
+<div>On importe un fichier HTML cible à l'aide de la balise <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> dans un document HTML source de la manière suivante : </div>
+
+<div></div>
+
+<pre>&lt;link rel="import" href="myfile.html"&gt;</pre>
+
+<p><span style="line-height: 1.5;">La valeur d'attribut </span><code style="font-style: normal; line-height: 1.5;">import</code><span style="line-height: 1.5;"> de la balise </span><span style="line-height: 1.5;">link est nouveau</span><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Imports', "", "")}}</td>
+   <td>{{Spec2('HTML Imports')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.link.rel.import")}}</p>
diff --git a/files/fr/web/web_components/index.html b/files/fr/web/web_components/index.html
new file mode 100644
index 0000000000..bb4fba0dcb
--- /dev/null
+++ b/files/fr/web/web_components/index.html
@@ -0,0 +1,116 @@
+---
+title: Web Components
+slug: Web/Web_Components
+tags:
+  - Composants Web
+translation_of: Web/Web_Components
+---
+<p>{{DefaultAPISidebar("Web Components")}}{{ draft }}</p>
+
+<div class="summary">
+<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>
+</div>
+
+<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="https://wiki.developer.mozilla.org/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 <span id="p3">optionnellement</span>, 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>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>
+
+<ul>
+</ul>
+
+<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>
diff --git a/files/fr/web/web_components/using_custom_elements/index.html b/files/fr/web/web_components/using_custom_elements/index.html
new file mode 100644
index 0000000000..961cd5f517
--- /dev/null
+++ b/files/fr/web/web_components/using_custom_elements/index.html
@@ -0,0 +1,251 @@
+---
+title: Utilisation d'éléments personnalisés
+slug: Web/Web_Components/Using_custom_elements
+tags:
+  - Classes
+  - Guide
+  - Web Components
+  - autonomous
+  - custom elements
+  - customized
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">L'un des aspects les plus importants des composants web est la possibilité de créer des éléments personnalisés qui encapsulent bien vos fonctionnalités sur une page HTML, plutôt que de devoir se contenter d'une soupe de balises définissant des fonctionnalités personnalisées. Cet article passe en revue les bases de l'utilisation d'éléments personnalisés.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les éléments personnalisés sont pris en charge par défaut dans Chrome et Opera. Firefox en est très proche, ils sont disponibles si vous mettez les préférences dom.webcomponents.enabled et dom.webcomponents.customelements.enabled à true, leur implémentation étant prévue pour être activée par défaut dans la version 60/61. Safari ne prend en charge que les éléments personnalisés indépendants pour l'instant, et Edge travaille de même sur une implémentation.</p>
+</div>
+
+<h2 id="Vue_d'ensemble">Vue d'ensemble</h2>
+
+<p>Le contrôleur des éléments personnalisés d'un document Web est l'objet {{domxref("CustomElementRegistry")}} ; cet objet vous permet d'enregistrer un élément personnalisé sur une page, de renvoyer des informations sur les éléments personnalisés enregistrés, etc..</p>
+
+<p>Pour enregistrer un élément personnalisé sur la page, vous utilisez la méthode {{domxref ("CustomElementRegistry.define()")}}. Elle prend comme arguments :</p>
+
+<ul>
+ <li>une {{domxref("DOMString")}} représentant le nom que vous donnez à l'élément ; notez que les noms d'éléments personnalisés doivent comprendre un tiret ; ils ne peuvent pas être des mots simples ;</li>
+ <li>un objet de classe définissant le comportement de l'élément ;</li>
+ <li>facultativement, un objet d'options contenant une propriété extends, qui indique l'élément intégré dont votre élément hérite, le cas échéant.</li>
+</ul>
+
+<p>Ainsi, par exemple, la définition de notre <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">élément word-count</a> personnalisé ressemble à ce qui suit :</p>
+
+<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>L'élément est appelé <code>word-count</code>, son objet de classe est <code>WordCount</code>, et il étend l'élément {{htmlelement("p")}}.</p>
+
+<p>L'objet de classe d'un élément personnalisé est écrit en utilisant la syntaxe de classe ES 2015 standard. Par exemple, <code>WordCount</code> est structuré comme suit :</p>
+
+<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>C'est juste un exemple simple, mais vous pouvez faire plus ici. Il est possible de définir des rappels de cycle de vie particuliers dans le constructeur, rappels qui s'exécutent à des points particuliers du cycle de vie de l'élément. Par exemple, <code>connectedCallback</code> est appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document, tandis que <code>attributeChangedCallback</code> est appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</p>
+
+<p>Vous en apprendrez plus à ce sujet dans notre section {{anch("Using the lifecycle callbacks")}} ci-dessous.</p>
+
+<p>Il existe deux types d'éléments personnalisés :</p>
+
+<ul>
+ <li>les <strong>éléments personnalisés autonomes</strong> sont indépendants : ils n'héritent pas des éléments HTML standard ; vous les utilisez sur une page en les écrivant littéralement en tant qu'élément HTML ; par exemple <code>&lt;popup-info&gt;</code>, ou <code>document.createElement("popup-info")</code> ;</li>
+ <li>les <code>éléments intégrés personnalisés</code> héritent des éléments HTML de base. Pour en créer un, vous devez spécifier quel élément ils étendent (comme indiqué dans les exemples ci-dessus), et ils sont utilisés en écrivant l'élément de base, mais en indiquant le nom de l'élément personnalisé dans l'attribut (ou la propriété) {{htmlattrxref("is" )}} ; par exemple &lt;p is="word-count"&gt; ou document.createElement("p", {is: "word-count"}).</li>
+</ul>
+
+<h2 id="Passage_en_revue_de_quelques_exemples_simples">Passage en revue de quelques exemples simples</h2>
+
+<p>À ce stade, examinons quelques exemples plus simples pour vous montrer plus en détail comment des éléments personnalisés sont créés.</p>
+
+<h3 id="Éléments_personnalisés_indépendants">Éléments personnalisés indépendants</h3>
+
+<p>Jetons un coup d'oeil à un élément personnalisé indépendant : <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a> (voir un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple en direct</a>). Il prend une icône d'image et une chaîne de texte, et intègre l'icône dans la page.</p>
+
+<p>Lorsque l'icône reçoit la focalisation, elle affiche le texte dans une boîte d'information contextuelle pour fournir d'autres informations contextuelles.</p>
+
+<p>Pour commencer, dans notre fichier JavaScript, nous définissons une classe appelée <code>PopUpInfo</code> qui étend {{domxref("HTMLElement")}}. Les éléments personnalisés indépendants étendent presque toujours <code>HTMLElement</code>.</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+    ...
+  }
+}</pre>
+
+<p>On y trouve la définition {{jsxref("Classes.constructor","constructor")}} de la classe, qui commence comme toujours par appeler super(), afin que la chaîne de prototype correcte soit définie.</p>
+
+<p>Dans le constructeur, nous définissons toutes les fonctionnalités que l'élément aura lorsqu'une instance de celui-ci sera instanciée. Dans ce cas, nous attachons une racine fantôme à l'élément personnalisé, nous utilisons une manipulation DOM pour créer la structure DOM interne de l'élément - qui est ensuite attachée à la racine fantôme ; et finalement, nous attachons du CSS à la racine fantôme pour la mettre en forme.</p>
+
+<pre class="brush: js">// Création d'une racine fantôme
+var shadow = this.attachShadow({mode: 'open'});
+
+// Création des spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Prendre le contenu de l'attribut et le mettre dans le span d'info
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insérer l'icône
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Création du CSS à appliquer au dom fantôme
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS tronqué pour la concision
+
+// Attacher les éléments créés au dom fantôme
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Enfin, nous enregistrons notre élément personnalisé dans le <code>CustomElementRegistry</code> à l'aide de la méthode <code>define()</code> mentionnée précédemment ; dans les paramètres, nous spécifions le nom de l'élément, puis le nom de la classe qui définit sa fonctionnalité :</p>
+
+<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>Il est maintenant disponible pour utilisation dans notre page. Dans notre code HTML, nous l'utilisons comme ceci :</p>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">full JavaScript source code</a> ici.</p>
+</div>
+
+<h3 id="Eléments_intégrés_personnalisés">Eléments intégrés personnalisés</h3>
+
+<p>Jetons maintenant un coup d'œil à un autre exemple d'élément intégré - <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">voir aussi en direct</a>). Cela transforme n'importe quelle liste non ordonnée en un menu déployable/refermable.</p>
+
+<p>Tout d'abord, nous définissons la classe de notre élément, de la même manière que précédemment :</p>
+
+<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>Nous n'expliquerons pas en détail la fonctionnalité de l'élément ici, mais vous pouvez découvrir comment elle fonctionne en regardant le code source. La seule vraie différence ici est que notre élément étend l'interface {{domxref("HTMLUListElement")}}, et non {{domxref("HTMLElement")}}. Il a donc toutes les caractéristiques d'un élément {{htmlelement ("ul")}} avec la fonctionnalité que nous définissons par dessus, plutôt que d'être un élément indépendant. C'est ce qui en fait un élément intégré personnalisé plutôt qu'un élément indépendant.</p>
+
+<p>Ensuite, nous enregistrons l'élément en utilisant la méthode <code>define()</code> comme précédemment, sauf que cette fois, il comprend également un objet options qui détaille l'élément dont notre élément personnalisé hérite :</p>
+
+<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>L'utilisation de l'élément intégré dans un document web se présente également de façon quelque peu différente :</p>
+
+<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>Vous utilisez l'élément <code>&lt;ul&gt;</code> comme d'habitude, mais vous spécifiez le nom de l'élément personnalisé dans l'attribut <code>is</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: à nouveau, vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> complet ici.</p>
+</div>
+
+<h2 id="Utilisation_des_rappels_de_cycle_de_vie">Utilisation des rappels de cycle de vie</h2>
+
+<p>Vous pouvez définir plusieurs rappels différents dans le constructeur d'un élément personnalisé, qui se déclenchent à différents points du cycle de vie de l'élément :</p>
+
+<ul>
+ <li>connectedCallback : appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document ;</li>
+ <li>disconnectedCallback : appelé lorsque l'élément personnalisé est déconnecté du DOM du document ;</li>
+ <li>adoptedCallback : appelé lorsque l'élément personnalisé est déplacé vers un nouveau document ;</li>
+ <li>attributeChangedCallback : appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</li>
+</ul>
+
+<p>Jetons un coup d'œil à un exemple de ceux-ci en cours d'utilisation. Le code ci-dessous est tiré de notre exemple de <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">rappels de cycle de vie</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">le voir s'exécuter en direct</a>). C'est un exemple trivial qui génère simplement un carré coloré de taille fixe sur la page. L'élément personnalisé ressemble à ceci :</p>
+
+<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>Le constructeur de classe est vraiment simple - ici, nous attachons un DOM à l'élément, puis nous attachons les éléments vides {{htmlelement("div")}} et {{htmlelement("style")}} à la racine fantôme :</p>
+
+<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>La fonction clé dans cet exemple est <code>updateStyle()</code> : elle prend un élément, récupère sa racine fantôme, retrouve son élément <code>&lt;style&gt;</code>, et ajoute {{cssxref("width")}}, {{cssxref("height")}}, et {{cssxref("background-color")}} au style.</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}</pre>
+
+<p>Les mises à jour réelles sont toutes gérées par les rappels du cycle de vie, qui sont placés dans le constructeur. Le <code>connectedCallback()</code> s'exécute quand l'élément est ajouté au DOM : ici, nous exécutons la fonction <code>updateStyle()</code> pour nous assurer que le carré est mis en forme comme défini dans ses attributs :</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>Les rappels <code>disconnectedCallback()</code> et <code>adoptedCallback()</code> enregistrent des messages simples sur la console pour nous informer lorsque l'élément est supprimé du DOM ou déplacé vers une autre page :</p>
+
+<pre class="brush: js">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>Le rappel <code>attributeChangedCallback()</code> est exécuté chaque fois que l'un des attributs de l'élément est modifié d'une façon ou d'une autre. Comme vous pouvez le voir à partir de ses propriétés, il est possible d'agir sur les attributs individuellement, en regardant leur nom ainsi que les anciennes et nouvelles valeurs des attributs. Dans ce cas cependant, nous exécutons juste la fonction <code>updateStyle()</code> pour nous assurer à nouveau que la mise en forme du carré est mise à jour selon les nouvelles valeurs :</p>
+
+<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Notez que, pour déclencher le rappel <code>attributeChangedCallback()</code> lorsqu'un attribut change, vous devez observer les attributs. Cela est réalisé en appelant le getter <code>observedAttributes()</code> dans le constructeur, en incluant à l'intérieur une instruction return qui retourne un tableau contenant les noms des attributs que vous voulez observer :</p>
+
+<pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre>
+
+<p>Dans notre exemple, cela est mis au tout début du constructeur.</p>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez trouver le <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> .</p>
+</div>
diff --git a/files/fr/web/web_components/using_shadow_dom/index.html b/files/fr/web/web_components/using_shadow_dom/index.html
new file mode 100644
index 0000000000..2b534f8358
--- /dev/null
+++ b/files/fr/web/web_components/using_shadow_dom/index.html
@@ -0,0 +1,223 @@
+---
+title: Utiliser le shadow DOM
+slug: Web/Web_Components/Using_shadow_DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - Web Components
+  - shadow dom
+translation_of: Web/Web_Components/Using_shadow_DOM
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Un aspect important des composants web est l'encapsulation — être capable de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page tel que différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre. L'API Shadow DOM est un moyen d'y parvenir, fournissant une manière d'associer à un élément un DOM séparé et caché. Cet article couvre les bases de l'utilisation du DOM fantôme.</p>
+
+<div class="note">
+<p><strong>Note</strong>: l'API Shadow DOM est supportée par défaut dans Firefox (63 et suivants), Chrome, Opera, et Safari. Le nouveau Edge basé sur Chromium (75 et suivants) le supportent aussi; le vieux Edge ne le supporte.</p>
+</div>
+
+<h2 id="Vue_de_haut_niveau">Vue de haut niveau</h2>
+
+<p>Cet article suppose que vous êtes déjà familier avec le concept de <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> — une structure arborescente de nœuds connectés représentant les différents éléments et chaines de textes apparaissant dans un document balisé (généralement un document HTML dans le cas de documents web). Par exemple, considérez le fragment HTML suivant :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple exemple de DOM&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;section&gt;
+        &lt;img src="dinosaur.png" alt="Un tyrannosaurus Rex rouge : un dinosaure bipède se tenant debout comme un humain, avec de petits bras et une large gueule à nombreuses dents tranchantes."&gt;
+        &lt;p&gt;Nous ajouterons ici un lien vers la &lt;a href="https://www.mozilla.org/"&gt;page d'accueil de Mozilla&lt;/a&gt;&lt;/p&gt;
+      &lt;/section&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ce fragment produit la structure DOM suivante :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Le DOM fantôme permet à des arbres DOM cachés d'être associés à des éléments de l'arbre DOM principal — cet arbre DOM fantôme s'ouvre avec une racine fantôme placée sous n'importe quel élément voulu, de la même manière que dans le DOM normal.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15788/shadow-dom.png" style="height: 543px; width: 1138px;"></p>
+
+<p>Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre :</p>
+
+<ul>
+ <li><strong>Hôte fantôme </strong>: le nœud du DOM principal auquel le DOM fantôme est associé.</li>
+ <li><strong>Arbre fantôme</strong>: l'arbre DOM au sein du DOM fantôme.</li>
+ <li><strong>Frontière fantôme</strong>: la limite où le DOM fantôme se termine et où le DOM principal commence.</li>
+ <li><strong>Racine fantôme</strong>: le nœud racine de l'arbre fantôme.</li>
+</ul>
+
+<p>Vous pouvez affecter les nœuds du DOM fantôme exactement de la même manière que pour les nœuds du DOM principal — par exemple en leur ajoutant des éléments enfants ou en leur définissant des atributs, en stylisant des nœuds individuels au moyen de <code>element.style.propriete</code>, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise {{htmlelement("style")}}. La différence est que le code au sein du DOM fantôme ne peut affecter aucun élément en-dehors de son arbre, permettant de mettre en œuvre une encapsulation très commode.</p>
+
+<p>Notez que le DOM fantôme n'est pas une nouvelle chose du tout — les navigateurs l'ont utilisé depuis longtemps pour encapsuler la structure interne d'un élément. Pensez par exemple à un élément {{htmlelement("video")}}, avec les contrôles par défaut du navigateur apparents. Tout ce que vous voyez dans le DOM est l'élément <code>&lt;video&gt;</code>, mais il contient plusieurs boutons et autres contrôles au sein de son DOM fantôme. La spécification du DOM fantôme a été conçue de telle manière que vous êtes autorisés à manipuler le DOM fantôme de vos propres éléments personnalisés.</p>
+
+<h2 id="Usage_basique">Usage basique</h2>
+
+<p>Vous pouvez associer une racine fantôme à tout élément en utilisant la méthode {{domxref("Element.attachShadow()")}}. Elle prend en paramètres un objet d'options contenant une option — <code>mode</code> — ayant pour valeur <code>open</code> (ouvert) ou <code>closed</code> (fermé) :</p>
+
+<pre class="brush: js">let fantome = element.attachShadow({mode: 'open'});
+let fantome = element.attachShadow({mode: 'closed'});</pre>
+
+<p><code>open</code> signifie que vous pouvez accéder au DOM fantôme en utilisant du JavaScript écrit dans le contexte de la page principale, par exemple en utilisant la propriété {{domxref("Element.shadowRoot")}} :</p>
+
+<pre class="brush: js">let monDomFantome = monElementPerso.shadowRoot;</pre>
+
+<p>Si vous associez une racine fantôme à un élément personnalisé avec la propriété <code>mode</code> définie à <code>closed</code>, vous ne serez pas autorisé à acéder au DOM fantôme depuis l'extérieur — <code>monElementPerso.shadowRoot</code> retournera <code>null</code>. C'est le casavec les éléments natifs contenant des DOM fantômes tels que <code>&lt;video&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Comme montre <a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">cet article de blog</a>, il est actuellement assez simple de pénétrer les DOM fantômes fermés, et les cacher complètement n'en vaut souvent pas la peine.</p>
+</div>
+
+<p>Si vous voulez associer un DOM fantôme à un élément personnalisé en tant que partie de son constructeur (de loin la plus utile application du DOM fantôme), vous devriez utiliser quelque instruction comme :</p>
+
+<pre class="brush: js">let fantome = this.attachShadow({mode: 'open'});</pre>
+
+<p>Lorsque vous avez associé un DOM fantôme à un élément, le manipuler consiste seulement à utiliser les API du DOM telles que vous les utilisez pour manipuler le DOM principal :</p>
+
+<pre class="brush: js">let paragraphe = document.createElement('p');
+fantome.appendChild(paragraphe);
+// etc.</pre>
+
+<h2 id="Démonstration_au_travers_dun_exemple_simple">Démonstration au travers d'un exemple simple</h2>
+
+<p>Maintenant, visitons un exemple simple pour faire une démonstration du DOM fantôme en action au sein d'un élément personnalisé — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (en voir aussi un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple dynamique</a>). Il prend un icône et une chaine de caractères et intègre l'image dans la page. Quand l'icône obtient l'attention (<code>:focus</code>), le texte s'affiche dans une fenêtre indépendante pour fournir plus d'informations contextuelles. Pour commencer, nous définissons dans notre fichier JavaScript une classe appelée <code>PopUpInfo</code>, qui étend <code>HTMLElement</code>:</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Toujours appeler super en premier dans le constructeur
+    super();
+
+    // Écrire les fonctionnalités de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>Au sein de la définition de la classe, nous créons le constructeur de l'élément, qui définit toutes les fonctionnalités que l'élément aura lorsqu'une instance est créée.</p>
+
+<h3 id="Créer_la_racine_fantôme">Créer la racine fantôme</h3>
+
+<p>Nous associns d'abord une racine fantôme à l'élément personnalisé :</p>
+
+<pre class="brush: js">// Créer une racine fantome
+var fantome = this.attachShadow({mode: 'open'});</pre>
+
+<h3 class="brush: js" id="Créer_la_structure_du_DOM_fantôme">Créer la structure du DOM fantôme</h3>
+
+<p class="brush: js">Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément:</p>
+
+<pre class="brush: js">// Créer les &lt;span&gt;
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+</pre>
+
+<h3 class="brush: js" id="Styliser_le_DOM_fantôme">Styliser le DOM fantôme</h3>
+
+<p class="brush: js">Après celà, nous créons un élément {{htmlelement("style")}} et nous l'emplissons avec du CSS pour personnaliser notre arbre DOM :</p>
+
+<pre class="brush: js">// Créer quelque CSS à appliquer au dom fantôme
+var style = document.createElement('style');
+
+style.textContent = `
+.wrapper {
+  position: relative;
+}
+
+.info {
+  font-size: 0.8rem;
+  width: 200px;
+  display: inline-block;
+  border: 1px solid black;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  opacity: 0;
+  transition: 0.6s all;
+  position: absolute;
+  bottom: 20px;
+  left: 10px;
+  z-index: 3;
+}
+
+img {
+  width: 1.2rem;
+}
+
+.icon:hover + .info, .icon:focus + .info {
+  opacity: 1;
+}`;
+
+</pre>
+
+<h3 id="Associer_le_DOM_fantôme_à_la_racine_fantôme">Associer le DOM fantôme à la racine fantôme</h3>
+
+<p>L'étape finale est d'associer tous les éléments créés à la racine fantôme :</p>
+
+<pre class="brush: js">// Associer les éléments créés au dom fantôme
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<h3 id="Utiliser_notre_élément_personnalisé">Utiliser notre élément personnalisé</h3>
+
+<p>Une fois que la classe est définie, utiliser l'élément est aussi simple que de le définir, et l'ajouter sur la page, comme expliqué dans <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a> :</p>
+
+<pre class="brush: js">// Définit le nouvel élément
+customElements.define('popup-info', PopUpInfo);</pre>
+
+<pre class="brush: html">&lt;<span class="pl-ent">popup-info</span> <span class="pl-e">img</span>=<span class="pl-s"><span class="pl-pds">"</span>img/alt.png<span class="pl-pds">"</span></span> <span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.<span class="pl-pds">"</span></span>&gt;</pre>
+
+<div>
+<h3 id="Styles_internes_ou_styles_externes">Styles internes ou styles externes</h3>
+
+<p>Dans l'exemple précédent, nous appliquons du style au DOM fantôme en utilisant l'élément {{htmlelement("style")}}, mais il est parfaitement possible de le faire en référençant une feuille de style externe avec un élément {{htmlelement("link")}} si vous le préférez.</p>
+
+<p>Par exemple, regardez ce code tiré de l'exemple <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> (voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">code source</a>):</p>
+
+<pre class="brush: js">// Appliquer les styles externes au dom fantôme
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Associer l'élément créé au dom fantôme
+shadow.appendChild(linkElem);</pre>
+
+<p>Notez que les éléments {{htmlelement("link")}} ne bloquent pas les repeinturages de la racine fantôme, donc il pourrait y avoir une latence où le contenu serait sans style (FOUC) pendant que la feuille de style se charge.</p>
+
+<p>De nombreux navigateurs modernes implantent une optimisation pour les balises {{htmlelement("style")}} clonées depuis un nœud commun ou qui ont des contenus identiques à fin de leur permettre de partager une unique liste de retour. Avec cette optimisation, la performance des styles externes et internes doivent être similaires.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a></li>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (templates) et les emplacements (slots)</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html b/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html
new file mode 100644
index 0000000000..b23a8c9632
--- /dev/null
+++ b/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html
@@ -0,0 +1,332 @@
+---
+title: Utilisation des templates et des slots
+slug: Web/Web_Components/Utilisation_des_templates_et_des_slots
+tags:
+  - Composant web
+  - HTML
+  - Template
+  - shadow dom
+  - slot
+translation_of: Web/Web_Components/Using_templates_and_slots
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Cet article explique comment vous pouvez utiliser les éléments {{htmlelement("template")}} et {{htmlelement("slot")}} pour créer un template flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant Web.</p>
+
+<h2 id="La_vérité_sur_les_templates">La vérité sur les templates</h2>
+
+<p>Lorsqu'une structure de balises se répète sur une page Web, il est judicieux d'utiliser un template plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML {{htmlelement("template")}} (bien supporté par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript.</p>
+
+<p>Voyons un exemple simple:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>Le tag <code>&lt;template&gt;</code> et ce qu'il contient restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple:</p>
+
+<pre class="brush: js">let template = document.getElementById('my-paragraph');
+let templateContent = template.content;
+document.body.appendChild(templateContent);</pre>
+
+<p>Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des templates.</p>
+
+<h2 id="Accorder_templates_et_composants_Web">Accorder templates et composants Web</h2>
+
+<p>Les templates sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants Web. Créons un composant Web qui utilise notre template comme contenu de son Shadow DOM. Nous l'appellerons <code>&lt;my-paragraph&gt;</code>:</p>
+
+<pre class="brush: js">customElements.define('my-paragraph',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('my-paragraph');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>Le point important à noter est que l'on ajoute un clone du contenu du template à la racine du DOM, créé à l'aide de la méthode {{domxref("Node.cloneNode()")}}.</p>
+
+<p>Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mises en forme à l'intérieur du template dans d'un élément {{htmlelement("style")}}, qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard.</p>
+
+<p>Par exemple:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: #666;
+      padding: 5px;
+    }
+  &lt;/style&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>On peut maintenent utiliser le template dans le document HTML:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Les templates sont bien supportés par les navigateurs; l'API Shadow DOM est pris en charge par défaut dans Firefox (version 63 onwards), Chrome, Opera, et Safari. Edge travail également sur une implémentation.</p>
+</div>
+
+<h2 id="Plus_de_flexibilité_avec_les_slots">Plus de flexibilité avec les slots</h2>
+
+<p>Jusque là, nous avons vu une première utilisation du tag template. Cette implémentation n'est pas très fexible; elle ne permet d'afficher que du texte, c'est à dire que son utilité est presque nulle! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à {{htmlelement("slot")}}. Cette fonction est moins bien prise en charge que {{htmlelement("template")}}, disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59, mais pas encore sur Edge.</p>
+
+<p>Les slots sont identifiés par leur attribut <code>name</code>, et permettent de définir des champs dans le template qui peuvent être alimentés avec n'importe quelle structure HTML.</p>
+
+<p>Donc, si on souhaite ajouter un slot dans le précédent exemple sur les templates, on peut modifier l'élément paragraphe de cette façon:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;slot name="my-text"&gt;My default text&lt;/slot&gt;&lt;/p&gt;</pre>
+
+<p>Si le contenu du slot n'est pas défini quand l'élément est inclu dans la page, ou si les slots ne sont pas supportés par le navigateur, <code>&lt;my-paragraph&gt;</code>  contient simplement le texte statique précisé dans le template.</p>
+
+<p>Pour définir le contenu du slot, on insère une structure HTML dans <code>&lt;my-paragraph&gt;</code> avec un attribut {{htmlattrxref("slot")}} dont la valeur est égale au nom du slot que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;span slot="my-text"&gt;Let's have some different text!&lt;/span&gt;
+&lt;/my-paragraph&gt;</pre>
+
+<p>ou</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;ul slot="my-text"&gt;
+    &lt;li&gt;Let's have some different text!&lt;/li&gt;
+    &lt;li&gt;In a list!&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Les éléments qui peuvent être insérés dans un slot sont dits {{domxref("Slotable")}}; quand un élément a été inséré dans un slot, il est dit <em>slotted</em>.</p>
+</div>
+
+<p>Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les slots, vous pouvez <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">voir la page sur GitHub</a> (voir aussi <a href="https://mdn.github.io/web-components-examples/simple-template/">le résultat</a>).</p>
+
+<h2 id="Un_exemple_plus_complexe">Un exemple plus complexe</h2>
+
+<p>Pour finir, voyons un exemple un peu moins trivial.</p>
+
+<p>The following set of code snippets show how to use {{HTMLElement("slot")}} together with {{HTMLElement("template")}} and some JavaScript to:</p>
+
+<ul>
+ <li>create a <strong><code>&lt;element-details&gt;</code></strong> element with <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+ <li>design the <strong><code>&lt;element-details&gt;</code></strong> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>—that is, pieces of the element’s content are used to fill in <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+</ul>
+
+<p>Note that it is technically possible to use {{HTMLElement("slot")}} element without a {{HTMLElement("template")}} element, e.g., within say a regular {{HTMLElement("div")}} element, and still take advantage of the place-holder features of {{HTMLElement("slot")}} for Shadow DOM content, and doing so may indeed avoid the small trouble of needing to first access the template element's <code>content</code> property (and clone it). However, it is generally more practical to add slots within a {{HTMLElement("template")}} element, since you are unlikely to need to define a pattern based on an already-rendered element.</p>
+
+<p>In addition, even if it is not already rendered, the purpose of the container as a template should be more semantically clear when using the {{HTMLElement("template")}}. In addition, {{HTMLElement("template")}} can have items directly added to it, like {{HTMLElement("td")}}, which would disappear when added to a {{HTMLElement("div")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this complete example at <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">element-details</a> (see it <a href="https://mdn.github.io/web-components-examples/element-details/">running live</a> also).</p>
+</div>
+
+<h3 id="Creating_a_template_with_some_slots">Creating a template with some slots</h3>
+
+<p>First of all, we use the {{HTMLElement("slot")}} element within a {{HTMLElement("template")}} element to create a new "element-details-template" <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> containing some <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a>:</p>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+  details {font-family: "Open Sans Light",Helvetica,Arial}
+  .name {font-weight: bold; color: #217ac0; font-size: 120%}
+  h4 { margin: 10px 0 -8px 0; }
+  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+  h4 span { color: white }
+  .attributes { margin-left: 22px; font-size: 90% }
+  .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;span&gt;
+        &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+        &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+      &lt;/span&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;&lt;span&gt;Attributes&lt;/span&gt;&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>That {{HTMLElement("template")}} element has several features:</p>
+
+<ul>
+ <li>The {{HTMLElement("template")}} has a {{HTMLElement("style")}} element with a set of CSS styles that are scoped just to the document fragment the  {{HTMLElement("template")}} creates.</li>
+ <li>The {{HTMLElement("template")}} uses {{HTMLElement("slot")}} and its {{htmlattrxref("name", "slot")}} attribute to make three <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a>:
+  <ul>
+   <li><code>&lt;slot name="element-name"&gt;</code></li>
+   <li><code>&lt;slot name="description"&gt;</code></li>
+   <li><code>&lt;slot name="attributes"&gt;</code></li>
+  </ul>
+ </li>
+ <li>The {{HTMLElement("template")}} wraps the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in a {{HTMLElement("details")}} element.</li>
+</ul>
+
+<h3 id="Creating_a_new_&lt;element-details>_element_from_the_&lt;template>">Creating a new &lt;element-details&gt; element from the &lt;template&gt;</h3>
+
+<p>Next, let’s create a new custom element named <strong><code>&lt;element-details&gt;</code></strong> and use {{DOMXref("Element.attachShadow")}} to attach to it, as its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, that document fragment we created with our {{HTMLElement("template")}} element above. This uses exactly the same pattern as we saw in our earlier trivial example.</p>
+
+<pre class="brush: js">customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      var template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+})
+</pre>
+
+<h3 id="Using_the_&lt;element-details>_custom_element_with_named_slots">Using the &lt;element-details&gt; custom element with named slots</h3>
+
+<p>Now let’s take that <strong><code>&lt;element-details&gt;</code></strong> element and actually use it in our document:</p>
+
+<pre class="brush: html">&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+  &lt;span slot="description"&gt;A placeholder inside a web
+    component that users can fill with their own markup,
+    with the effect of composing different DOM trees
+    together.&lt;/span&gt;
+  &lt;dl slot="attributes"&gt;
+    &lt;dt&gt;name&lt;/dt&gt;
+    &lt;dd&gt;The name of the slot.&lt;/dd&gt;
+  &lt;/dl&gt;
+&lt;/element-details&gt;
+
+&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;template&lt;/span&gt;
+  &lt;span slot="description"&gt;A mechanism for holding client-
+    side content that is not to be rendered when a page is
+    loaded but may subsequently be instantiated during
+    runtime using JavaScript.&lt;/span&gt;
+&lt;/element-details&gt;
+</pre>
+
+<p>About that snippet, notice these points:</p>
+
+<ul>
+ <li>The snippet has two instances of <strong><code>&lt;element-details&gt;</code></strong> elements which both use the {{htmlattrxref("slot")}} attribute to reference the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> <code>"element-name"</code> and <code>"description"</code> we put in the <code>&lt;element-details&gt;</code> <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> .</li>
+ <li>Only the first of those two <strong><code>&lt;element-details&gt;</code></strong> elements references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>. The second <code><strong>&lt;element-details</strong>&gt;</code> element lacks any reference to the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>.</li>
+ <li>The first <code>&lt;<strong>element-details&gt;</strong></code> element references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> using a {{HTMLElement("dl")}} element with {{HTMLElement("dt")}} and {{HTMLElement("dd")}} children.</li>
+</ul>
+
+<h3 id="Adding_a_final_bit_of_style">Adding a final bit of style</h3>
+
+<p>As a finishing touch, we'll add a tiny bit more CSS for the {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, and {{HTMLElement("dd")}} elements in our doc:</p>
+
+<pre class="brush: css">  dl { margin-left: 6px; }
+  dt { font-weight: bold; color: #217ac0; font-size: 110% }
+  dt { font-family: Consolas, "Liberation Mono", Courier }
+  dd { margin-left: 16px }
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body { margin-top: 47px }</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>Finally let’s put all the snippets together and see what the rendered result looks like.</p>
+
+<p>{{ EmbedLiveSample('full_example', '300','400','https://mdn.mozillademos.org/files/14553/element-details.png','') }}</p>
+
+<p>Notice the following points about this rendered result:</p>
+
+<ul>
+ <li>Even though the instances of the <strong><code>&lt;element-details&gt;</code></strong> element in the document do not directly use the {{HTMLElement("details")}} element, they get rendered using {{HTMLElement("details")}} because the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> causes them to get populated with that.</li>
+ <li>Within the rendered {{HTMLElement("details")}} output, the content in the <strong><code>&lt;element-details&gt;</code></strong> elements fills the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>. In other words, the DOM tree from the <strong><code>&lt;element-details&gt;</code></strong> elements get <em>composed</em> together with the content of the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+ <li>For both <strong><code>&lt;element-details&gt;</code></strong> elements, an <strong>Attributes</strong> heading gets automatically added from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> before the position of the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>.</li>
+ <li>Because the first <strong><code>&lt;element-details&gt;</code></strong> has a {{HTMLElement("dl")}} element which explicitly references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, the contents of that {{HTMLElement("dl")}} replace the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+ <li>Because the second <strong><code>&lt;element-details&gt;</code></strong> doesn’t explicitly reference the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, its content for that <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> gets filled with the default content for it from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="full_example">full example</h5>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;slot example&lt;/title&gt;
+    &lt;style&gt;
+
+      dl { margin-left: 6px; }
+      dt { font-weight: bold; color: #217ac0; font-size: 110% }
+      dt { font-family: Consolas, "Liberation Mono", Courier }
+      dd { margin-left: 16px }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;template id="element-details-template"&gt;
+      &lt;style&gt;
+      details {font-family: "Open Sans Light",Helvetica,Arial}
+      .name {font-weight: bold; color: #217ac0; font-size: 120%}
+      h4 { margin: 10px 0 -8px 0; }
+      h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+      h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+      h4 span { color: white }
+      .attributes { margin-left: 22px; font-size: 90% }
+      .attributes p { margin-left: 16px; font-style: italic }
+      &lt;/style&gt;
+      &lt;details&gt;
+        &lt;summary&gt;
+          &lt;span&gt;
+            &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+            &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+          &lt;/span&gt;
+        &lt;/summary&gt;
+        &lt;div class="attributes"&gt;
+          &lt;h4&gt;&lt;span&gt;Attributes&lt;/span&gt;&lt;/h4&gt;
+          &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+      &lt;/details&gt;
+      &lt;hr&gt;
+    &lt;/template&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+      &lt;span slot="description"&gt;A placeholder inside a web
+        component that users can fill with their own markup,
+        with the effect of composing different DOM trees
+        together.&lt;/span&gt;
+      &lt;dl slot="attributes"&gt;
+        &lt;dt&gt;name&lt;/dt&gt;
+        &lt;dd&gt;The name of the slot.&lt;/dd&gt;
+      &lt;/dl&gt;
+    &lt;/element-details&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;template&lt;/span&gt;
+      &lt;span slot="description"&gt;A mechanism for holding client-
+        side content that is not to be rendered when a page is
+        loaded but may subsequently be instantiated during
+        runtime using JavaScript.&lt;/span&gt;
+    &lt;/element-details&gt;
+
+    &lt;script&gt;
+    customElements.define('element-details',
+      class extends HTMLElement {
+        constructor() {
+          super();
+          const template = document
+            .getElementById('element-details-template')
+            .content;
+          const shadowRoot = this.attachShadow({mode: 'open'})
+            .appendChild(template.cloneNode(true));
+        }
+      })
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>