Remove mozillademos for web (other than css/js) (#3627)

* Update web components page vs en-us

* update filereader.readasdataurl vs en-us

2 files changed, 175 insertions, 78 deletions

diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md
index bc00d1b624..31a0350ffe 100644
--- a/files/fr/web/api/filereader/readasdataurl/index.md
+++ b/files/fr/web/api/filereader/readasdataurl/index.md
@@ -2,63 +2,69 @@
 title: FileReader.readAsDataURL()
 slug: Web/API/FileReader/readAsDataURL
 translation_of: Web/API/FileReader/readAsDataURL
+browser-compat: api.FileReader.readAsDataURL
 ---
-{{APIRef("API File")}}
+{{APIRef("File API")}}
 
-La méthode `readAsDataURL` permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état `DONE`, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.
+La méthode **`FileReader.readAsDataURL()`** est utilisée afin de lire le contenu d'un blob ([`Blob`](/fr/docs/Web/API/Blob)) ou d'un fichier ([`File`](/fr/docs/Web/API/File)). Lorsque l'opération de lecture est terminée, [`readyState`](/fr/docs/Web/API/FileReader/readyState) prend la valeur `DONE`, et l'évènement [`loadend`](/fr/docs/Web/API/XMLHttpRequest/loadend_event) est déclenché. À partir de ce moment, la propriété [`result`](/fr/docs/Web/API/FileReader/result) contient les données sous la forme d'une [URL de données](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) qui représente les données du fichier sous la forme d'une chaîne de caractères encodée en base64.
+
+> **Note :** Pour un blob, [`result`](/fr/docs/Web/API/FileReader/result) ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe `data:*/*;base64,` du résultat.
 
 ## Syntaxe
 
-    instanceOfFileReader.readAsDataURL(blob);
+```js
+instanceOfFileReader.readAsDataURL(blob);
+```
 
 ### Paramètres
 
 - `blob`
-  - : L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.
+  - : L'objet [`Blob`](/fr/docs/Web/API/Blob) ou [`File`](/fr/docs/Web/API/File) qu'on souhaite lire.
+
+## Exemples
 
-## Exemple
+### Exemple simple
 
-### HTML
+#### HTML
 
 ```html
 <input type="file" onchange="previewFile()"><br>
-<img src="" height="200" alt="Aperçu de l’image...">
+<img src="" height="200" alt="Prévisualisation de l'image…">
 ```
 
-### JavaScript
+#### JavaScript
 
 ```js
 function previewFile() {
-  var preview = document.querySelector('img');
-  var file    = document.querySelector('input[type=file]').files[0];
-  var reader  = new FileReader();
+  const preview = document.querySelector('img');
+  const file = document.querySelector('input[type=file]').files[0];
+  const reader = new FileReader();
 
-  reader.addEventListener("load", function () {
-    preview.src = reader.result;
-  }, false);
+  reader.addEventListener("load", function () {
+    // on convertit l'image en une chaîne de caractères base64
+    preview.src = reader.result;
+  }, false);
 
-  if (file) {
-    reader.readAsDataURL(file);
-  }
+  if (file) {
+    reader.readAsDataURL(file);
+  }
 }
 ```
 
-### Résultat en direct
-
-{{EmbedLiveSample("Exemple", "100%", 240)}}
+#### Résultat
 
+{{EmbedLiveSample("", "100%", 240)}}
 
+### Lire plusieurs fichiers
 
-## Exemple de lecture de plusieurs fichiers
-
-### HTML
+#### HTML
 
 ```html
 <input id="browse" type="file" onchange="previewFiles()" multiple>
 <div id="preview"></div>
 ```
 
-### JavaScript
+#### JavaScript
 
 ```js
 function previewFiles() {
@@ -68,7 +74,8 @@ function previewFiles() {
 
   function readAndPreview(file) {
 
-    // Veillez à ce que `file.name` corresponde à nos critères d’extension
+    // On s'assure que `file.name` termine par 
+    // une des extensions souhaitées
     if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
       var reader = new FileReader();
 
@@ -92,18 +99,17 @@ function previewFiles() {
 }
 ```
 
-> **Note :** Le constructeur [`FileReader()`](/en-US/docs/Web/API/FileReader) n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre [solution d’aperçu d’image multinavigateur](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html). Examinez également cette [alternative plus puissante](https://mdn.mozillademos.org/files/3698/image_upload_preview.html).
-
+> **Note :** Le constructeur [`FileReader()`](/fr/docs/Web/API/FileReader) n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Voir aussi [cet autre exemple](https://mdn.mozillademos.org/files/3698/image_upload_preview.html).
+ 
 ## Spécifications
 
-| Spécification                                                                        | État                         | Commentaire         |
-| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
-| {{SpecName("API File", "#FileReader-interface", "FileReader")}} | {{Spec2("API File")}} | Définition initiale |
+{{Specifications}}
 
-## Compatibilité avec les navigateurs
+## Compatibilité des navigateurs
 
-{{Compat("api.FileReader.readAsDataURL")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{domxref("FileReader")}}
+- [`FileReader`](/fr/docs/Web/API/FileReader)
+- [`URL.createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL)
\ No newline at end of file
diff --git a/files/fr/web/web_components/index.md b/files/fr/web/web_components/index.md
index c94b26038a..e283537856 100644
--- a/files/fr/web/web_components/index.md
+++ b/files/fr/web/web_components/index.md
@@ -1,70 +1,161 @@
 ---
-title: Web Components
+title: Web Components (composants web)
 slug: Web/Web_Components
-tags:
-  - Composants Web
 translation_of: Web/Web_Components
 ---
-{{DefaultAPISidebar("Web Components")}}{{ draft }}
+{{DefaultAPISidebar("Web Components")}}
 
-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.
+Les composants web (<i lang="en">Web Components</i>) sont un ensemble de plusieurs technologies qui permettent de créer des éléments personnalisés réutilisables, dont les fonctionnalités sont encapsulées en dehors du reste du code et qui peuvent être utilisées au sein d'applications web.
 
 ## Concepts et utilisation
 
-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.
+On essaie tant que possible de réutiliser du code. Cette réutilisation n'a pas toujours été simple pour du HTML, CSS et JavaScript complexe utilisé pour créer des éléments d'interface utilisateur personnalisés. Réutiliser de tels éléments d'interface peuvent gâcher une page si on ne fait pas attention.
 
-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.
+Les composants web (<i lang="en">Web Components</i> en anglais) visent à résoudre ces problèmes. Il s'agit de trois technologies qui peuvent être combinées ensemble pour créer des éléments sur mesure avec des fonctionnalités encapsulées et qu'on peut réutiliser à volonté, sans risque de collisions.
 
-- [Custom Elements: ](/fr/docs/Web/Web_Components/Custom_Elements)pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur.
-- [HTML Templates: ](/fr/docs/Web/HTML/Element/template)squelette pour créer des éléments HTML instanciables.
-- [Shadow DOM: ](/fr/docs/Web/Web_Components/Shadow_DOM)permet d'encapsuler le JavaScript et le CSS des éléments.
+- **Les éléments personnalisés (<i lang="en">custom elements</i>)**&nbsp;: un ensemble d'API JavaScript qui permettent de définir des éléments personnalisés ainsi que leur comportement 
+- **Le <i lang="en">Shadow DOM</i>**&nbsp;: un ensemble d'API JavaScript qui permettent d'attacher un DOM «&nbsp;sombre&nbsp;» encapsulé à un élément, qui est rendu séparément du DOM du document principal et de contrôler les fonctionnalités associées. Ainsi, les fonctionnalités d'un élément peuvent être gardées privées pour que la mise en forme et le script puissent être appliqués sans risque de collision avec les autres parties du document.
+- **Les gabarits HTML**&nbsp;: les éléments [`<template>`](/fr/docs/Web/HTML/Element/template) et [`<slot>`](/fr/docs/Web/HTML/Element/slot) permettent d'écrire des gabarits de balisage qui ne sont pas affichés sur la page et qui peuvent être réutilisés comme base de la structure d'un élément personnalisé.
 
-Au début de la spécification, il y avait aussi la technologie [HTML Imports](/fr/docs/Web/Web_Components/HTML_Imports). 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.
+L'approche pour implémenter un composant web ressemble généralement à&nbsp;:
 
-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.
+1.  La création d'une classe pour définir les fonctionnalités du composant web (par exemple avec l'utilisation de la syntaxe de [classe ECMAScript 2015](/fr/docs/Web/JavaScript/Reference/Classes)).
+2.  L'enregistrement du nouvel élément personnalisé avec la méthode [`CustomElementRegistry.define()`](/fr/docs/Web/API/CustomElementRegistry/define), à laquelle on passe le nom de l'élément à définir, la classe ou la fonction contenant les fonctionnalités et, optionnellement, l'élément duquel il hérite.
+3.  Si c'est nécessaire, l'attache d'un DOM sombre à l'élément personnalisé avec la méthode [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow). L'ajout d'éléments fils, de gestionnaires d'évènement, etc. au DOM sombre à l'aide des méthodes usuelles pour le DOM.
+4.  Si c'est nécessaire, la définition d'un gabarit HTML avec [`<template>`](/fr/docs/Web/HTML/Element/template) et [`<slot>`](/fr/docs/Web/HTML/Element/slot). Là encore, on utilisera des méthodes DOM usuelles pour cloner le gabarit et l'attacher au DOM sombre.
+5.  L'utilisation de l'élément personnalisé où on veut sur la page, comme pour tout autre élément HTML.
 
-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.
+## Tutoriels
 
-Généralement, l'approche basique pour la création d'un composant Web est la suivante:
+- [Utiliser les éléments personnalisés](/fr/docs/Web/Web_Components/Using_custom_elements)
+  - : Un guide illustrant comment utiliser les fonctionnalités des éléments personnalisés afin de créer des composants web simples et abordant les fonctions de rappel pour le cycle de vie de l'élément ainsi que d'autres fonctionnalités avancées.
+- [Utiliser le DOM sombre (<i lang="en">shadow DOM</i>)](/fr/docs/Web/Web_Components/Using_shadow_DOM)
+  - : Un guide abordant les fondamentaux du <i lang="en">shadow DOM</i>, illustrant comment attacher un DOM sombre à un élément, l'ajouter à l'arbre DOM, le mettre en forme, etc.
+- [Utiliser les gabarits et emplacements](/fr/docs/Web/Web_Components/Using_templates_and_slots)
+  - : Un guide illustrant comment définir une structure HTML réutilisable avec les éléments [`<template>`](/fr/docs/Web/HTML/Element/template) et [`<slot>`](/fr/docs/Web/HTML/Element/slot), avant d'utiliser cette structure à l'intérieur des composants web.
 
-1.  Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les [Classes](/fr/docs/Web/JavaScript/Reference/Classes) pour de plus amples informations).
-2.  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.
-3.  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.
-4.  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.
-5.  Utiliser l'élément personnalisé à l'endroit désiré sur la page, comme tous les autres éléments HTML.
+## Référence
 
-> **Note :** 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 [projet Google Polymer](http://www.polymer-project.org/). Pour savoir quels navigateurs implémentent les Composants Web, voir [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/)
+### Les API pour les éléments personnalisés
 
-Les spécifications des Composants Web définissent les éléments suivants :
+- [`CustomElementRegistry`](/fr/docs/Web/API/CustomElementRegistry)
+  - : Les fonctionnalités pour les éléments personnalisés et notamment la méthode [`CustomElementRegistry.define()`](/fr/docs/Web/API/CustomElementRegistry/define) qui est utilisée pour enregistrer de nouveaux éléments personnalisés afin qu'ils puissent être utilisés dans votre document.
+- [`Window.customElements`](/fr/docs/Web/API/Window/customElements)
+  - : Renvoie une référence à l'objet `CustomElementRegistry`.
+- [Fonctions de rappel pour le cycle de vie](/fr/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
 
-- De nouveaux éléments HTML : {{HTMLElement("template")}}, {{HTMLElement("content")}} et {{HTMLElement("shadow")}} ({{HTMLElement("element")}} et {{HTMLElement("decorator")}} ont été retirés).
-- Les interfaces d'API associées pour les nouveaux éléments: {{domxref("HTMLTemplateElement")}}, {{domxref("HTMLContentElement")}} et {{domxref("HTMLShadowElement")}}.
-- Des extensions à l'interface {{domxref("HTMLLinkElement")}} et l'élément {{HTMLElement("link")}}.
-- Une API pour enregistrer les custom elements, {{domxref("Document.registerElement()")}}, et des modifications de {{domxref("Document.createElement()")}} et {{domxref("Document.createElementNS()")}}.
-- De nouvelles fonctions liées au cycle de vie ("_lifecycle callbacks_") peuvent être ajoutées à un prototype sur lequel est basé un custom element.
-- Une nouvelle pseudo-classe CSS pour les éléments de style par defaut, {{cssxref(":unresolved")}}.
-- Le Shadow DOM : {{domxref("ShadowRoot")}} et {{domxref("Element.createShadowRoot()")}}, {{domxref("Element.getDestinationInsertionPoints()")}}, {{domxref("Element.shadowRoot")}}.
-- Une extension à l'interface {{domxref("Event")}}, {{domxref("Event.path")}}.
-- Une extension à l'interface {{domxref("Document")}}.
-- Pour le style des Composants Web:
+  - : Des fonctions de rappel spéciales qui définissent le comportement d'un élément personnalisé&nbsp;:
 
-  - de nouvelles pseudo-classes : {{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}.
-  - de nouveaux pseudo-elements : {{cssxref("::shadow")}} et {{cssxref("::content")}}.
-  - un nouveau combinateur, `/deep/`.
+    - `connectedCallback`&nbsp;: appelée lorsque l'élément personnalisé est connecté pour la première fois au DOM du document.
+    - `disconnectedCallback`&nbsp;: appelée lorsque l'élément personnalisé est déconnecté du DOM du document.
+    - `adoptedCallback`&nbsp;: appelée lorsque l'élément personnalisé est déplacé vers un nouveau document.
+    - `attributeChangedCallback`&nbsp;: appelé lorsque des attributs sont ajoutés, supprimés ou modifiés sur l'élément.
 
-## Activer les Web Components dans Firefox
+- Des extensions pour créer des éléments personnalisés de façon native&nbsp;:
 
-Les capacités des Web Components sont désactivées par défaut dans Firefox. Pour les activer, allez sur la page `about:config` et rejetez toutes les alertes qui apparaissent. Cherchez ensuite la préférence nommée **dom.webcomponents.enabled**, et changez la à **true** par un double clic.
+  - : Les extensions suivantes sont définies&nbsp;:
 
-![Firefox enable web components](https://mdn.mozillademos.org/files/10145/enable-wc.png)
+    - L'attribut universel HTML [`is`](/fr/docs/Web/HTML/Global_attributes/is) qui permet d'indiquer qu'un élément HTML standard devrait se comporter à la manière d'un élément personnalisé enregistré.
+    - L'option "is" de la méthode [`Document.createElement()`](/fr/docs/Web/API/Document/createElement) qui permet de créer une instance d'un élément HTML standard qui se comporte comme un élément personnalisé enregistré.
+
+- Des pseudo-classes CSS&nbsp;:
+
+  - : Quelques pseudo-classes CSS sont spécifiquement liées aux éléments personnalisés&nbsp;:
+
+    - [`:defined`](/fr/docs/Web/CSS/:defined) cible tout élément défini, c'est-à-dire les éléments natifs et les éléments personnalisés définis avec `CustomElementRegistry.define()`.
+    - [`:host`](/fr/docs/Web/CSS/:host) cible l'hôte sombre du [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé depuis l'intérieur du DOM sombre.
+    - [`:host()`](/fr/docs/Web/CSS/:host) cible l'hôte sombre du [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) contenant le CSS à utiliser en fonction d'un sélecteur passé en paramètre.
+    - [`:host-context()`](/fr/docs/Web/CSS/:host-context()) cible l'hôte sombre du [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) contenant le CSS à utiliser (afin de pouvoir sélectionner un élément personnalisé depuis son DOM sombre), uniquement si le sélecteur passé en argument à la fonction correspond à un ancêtre de l'élément dans la hiérarchie du DOM.
+
+- Des pseudo-éléments CSS&nbsp;:
+
+  - : Un pseudo-élément CSS est spécifiquement lié aux éléments personnalisés&nbsp;:
+
+    - [`::part`](/fr/docs/Web/CSS/::part) représente tout élément au sein [d'un arbre sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) qui possède un attribut [`part`](/fr/docs/Web/HTML/Global_attributes/part) correspondant.
+
+### Le DOM sombre (<i lang="en">Shadow DOM</i>)
+
+- [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot)
+  - : Représente le nœud racine du sous-arbre du DOM sombre.
+- Extensions à [`Element`](/fr/docs/Web/API/Element)
+
+  - : Les extensions à l'interface `Element` pour le DOM sombre sont&nbsp;:
+
+    - [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow) qui permet d'attacher un arbre de DOM sombre à l'élément indiqué.
+    - [`Element.shadowRoot`](/fr/docs/Web/API/Element/shadowRoot) qui est une propriété qui retourne la racine sombre associée à l'élément indiqué, ou `null` s'il n'y a pas de racine sombre attachée.
+
+- Additions à [`Node`](/fr/docs/Web/API/Node)
+
+  - : Voici les ajouts à l'interface `Node` qui portent sur le DOM sombre&nbsp;:
+
+    - [`Node.getRootNode()`](/fr/docs/Web/API/Node/getRootNode) qui est une méthode renvoyant la racine du contexte et qui inclut éventuellement la racine sombre si elle est disponible.
+    - [`Node.isConnected`](/fr/docs/Web/API/Node/isConnected) qui est une propriété booléenne indiquant si le nœud est connecté (directement ou indirectement) à l'object contexte (soit [`Document`](/fr/docs/Web/API/Document) pour le cas du DOM normal ou soit [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot) dans le cas du DOM sombre).
+
+- Extensions à [`Event`](/fr/docs/Web/API/Event)
+
+  - : Voici les extensions à l'interface `Event` relatives au DOM sombre&nbsp;:
+
+    - [`Event.composed`](/fr/docs/Web/API/Event/composed) qui est une propriété booléenne indiquant si l'évènement se propagera au-delà des frontières du DOM sombre jusque dans le DOM standard.
+    - [`Event.composedPath`](/fr/docs/Web/API/Event/composedPath) qui est une propriété renvoyant le chemin de l'évènement (les objets sur lesquels les gestionnaires d'évènements seront appelés). Cela n'inclut pas les nœuds des arbres sombres si la racine sombre a été créée avec un mode ([`ShadowRoot.mode`](/fr/docs/Web/API/ShadowRoot/mode)) fermé.
+
+### Les gabarits HTML
+
+- [`<template>`](/fr/docs/Web/HTML/Element/template)
+  - : Cet élément contient un fragment HTML qui n'est pas affiché lors du chargement initial du document qui le contient mais qui peut être affiché lors de l'exécution à l'aide de JavaScript. Il est principalement utilisé pour la structure des éléments personnalisés. L'interface DOM correspondante est [`HTMLTemplateElement`](/fr/docs/Web/API/HTMLTemplateElement).
+- [`<slot>`](/fr/docs/Web/HTML/Element/slot)
+  - : Un emplacement à l'intérieur du composant web qui peut être utilisé pour votre balisage et qui permet de créer des arbres DOM séparés. L'interface DOM correspondante est [`HTMLSlotElement`](/fr/docs/Web/API/HTMLSlotElement).
+- L'attribut HTML universel [`slot`](/fr/docs/Web/HTML/Global_attributes/slot)
+  - : Il permet d'affecter un emplacement (<i lang="en">slot</i>) d'un arbre d'un DOM sombre à un élément.
+- [`Element.assignedSlot`](/fr/docs/Web/API/Element/assignedSlot)
+  - : Un attribut en lecture seule qui renvoie une référence à l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein duquel l'élément courant est inséré.
+- [`Text.assignedSlot`](/fr/docs/Web/API/Text/assignedSlot)
+  - : Un attribut en lecture seule qui renvoie une référence à l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein duquel le nœud texte est inséré.
+- Les extensions à [`Element`](/fr/docs/Web/API/Element)
+
+  - : Les extensions à l'interface `Element` sont&nbsp;:
+
+    - [`Element.slot`](/fr/docs/Web/API/Element/slot) qui renvoie le nom de l'emplacement de DOM sombre associé à l'élément.
+
+- Les pseudo-éléments CSS
+
+  - : Voici les pseudo-éléments relatifs aux emplacements pour le shadow DOM&nbsp;:
+
+    - [`::slotted`](/fr/docs/Web/CSS/::slotted) qui cible le contenu inséré dans un emplacement.
+
+- L'évènement [`slotchange`](/fr/docs/Web/API/HTMLSlotElement/slotchange_event)
+  - : Celui-ci est déclenché sur une instance de [`HTMLSlotElement`](/fr/docs/Web/API/HTMLSlotElement) (qui représente un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot)) lorsque les nœuds contenus dans cet emplacement changent.
+
+## Exemples
+
+Différents exemples sont disponibles sur le dépôt GitHub [web-components-examples](https://github.com/mdn/web-components-examples).
 
 ## Spécifications
 
-| Spécification                                                                                                        | Statut                               | Commentaire         |
-| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
-| {{SpecName('Custom Elements', "", "")}}                                                                 | {{Spec2('Custom Elements')}} |                     |
-| {{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML WHATWG')}}     | Pas de changement   |
-| {{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}     | {{Spec2('HTML5 W3C')}}         | Définition initiale |
-| {{SpecName('Shadow DOM', "", "")}}                                                                         | {{Spec2('Shadow DOM')}}     |                     |
-| {{SpecName('HTML Imports', "", "")}}                                                                     | {{Spec2('HTML Imports')}}     |                     |
-| {{SpecName("CSS Scope", "", "")}}                                                                         | {{Spec2('CSS Scope')}}         |                     |
+### Pour les éléments personnalisés et `template`
+
+{{Specifications("html.elements.template")}}
+
+### Pour le <i lang="en">Shadow DOM</i>
+
+{{Specifications("api.ShadowRoot")}}
+
+## Compatibilité des navigateurs
+
+Les composants web sont pris en charge par défaut dans Firefox (63), Chrome, Opera, et Edge (79). Safari prend en charge certaines fonctionnalités des composants web mais moins que les autres navigateurs.
+
+Pour plus de détails sur la compatibilité des différentes fonctionnalités, voyez les tableaux de compatibilité des pages de référence.
+
+## Voir aussi
+
+Voici différentes bibliothèques ou outils autour des composants web&nbsp;:
+
+- [Open Web Components](https://open-wc.org/)
+- [DataFormsJS](https://www.dataformsjs.com/)
+- [FAST](https://fast.design/)
+  - [Fast Element](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element)
+  - [Fast Foundation](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation)
+- [Hybrids](https://github.com/hybridsjs/hybrids)
+- [Lit](https://lit.dev/)
+- [Snuggsi](https://github.com/devpunks/snuggsi#readme)
+- [Slim.js](https://github.com/slimjs/slim.js)
+- [Stencil](https://stenciljs.com/)