From 8bdcf31f79fdecafb6d4a5e13fd1fd01c767a823 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 08:43:25 +0100 Subject: convert content to md --- .../web/web_components/using_shadow_dom/index.md | 192 +++++++++++---------- 1 file changed, 105 insertions(+), 87 deletions(-) (limited to 'files/fr/web/web_components/using_shadow_dom') diff --git a/files/fr/web/web_components/using_shadow_dom/index.md b/files/fr/web/web_components/using_shadow_dom/index.md index ca14a4ca77..0e83618219 100644 --- a/files/fr/web/web_components/using_shadow_dom/index.md +++ b/files/fr/web/web_components/using_shadow_dom/index.md @@ -9,85 +9,90 @@ tags: - shadow dom translation_of: Web/Web_Components/Using_shadow_DOM --- -
{{DefaultAPISidebar("Web Components")}}
+{{DefaultAPISidebar("Web Components")}} -

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.

+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. -
-

Note : 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.

-
+> **Note :** 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. -

Vue de haut niveau

+## Vue de haut niveau -

Cet article suppose que vous êtes déjà familier avec le concept de DOM (Document Object Model) — 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 :

+Cet article suppose que vous êtes déjà familier avec le concept de [DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model/Introduction) — 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 : -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Simple exemple de DOM</title>
-  </head>
-  <body>
-    <section>
-      <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.">
-      <p>Nous ajouterons ici un lien vers la <a href="https://www.mozilla.org/">page d'accueil de Mozilla</a></p>
-    </section>
-  </body>
-</html>
+```html + + + + + Simple exemple de DOM + + +
+ 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. +

Nous ajouterons ici un lien vers la page d'accueil de Mozilla

+
+ + +``` -

Ce fragment produit la structure DOM suivante :

+Ce fragment produit la structure DOM suivante : -

+![](dom-screenshot.png) -

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.

+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. -

Version SVG du diagramme montrant l'interaction entre le document, la racine fantôme et l'hôte fantôme.

+![Version SVG du diagramme montrant l'interaction entre le document, la racine fantôme et l'hôte fantôme.](shadowdom.svg) -

Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre :

+Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre : - +- **Hôte fantôme** : le nœud du DOM principal auquel le DOM fantôme est associé. +- **Arbre fantôme** : l'arbre DOM au sein du DOM fantôme. +- **Frontière fantôme** : la limite où le DOM fantôme se termine et où le DOM principal commence. +- **Racine fantôme** : le nœud racine de l'arbre fantôme. -

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 attributs, en stylisant des nœuds individuels au moyen de element.style.propriete, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise <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.

+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 attributs, en stylisant des nœuds individuels au moyen de `element.style.propriete`, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise [`