From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/shadow/index.html | 116 ++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/fr/web/html/element/shadow/index.html (limited to 'files/fr/web/html/element/shadow/index.html') diff --git a/files/fr/web/html/element/shadow/index.html b/files/fr/web/html/element/shadow/index.html new file mode 100644 index 0000000000..190d28644b --- /dev/null +++ b/files/fr/web/html/element/shadow/index.html @@ -0,0 +1,116 @@ +--- +title: ' : l''élément obsolète pour la racine virtuelle' +slug: Web/HTML/Element/Shadow +tags: + - Composant web + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/shadow +--- +
{{deprecated_header}}{{HTMLRef}}
+ +

L'élément HTML <shadow> était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du shadow DOM. Cet élément a été retiré de la spécification et est désormais obsolète.

+ +

Attributs

+ +

Cet élément inclut uniquement les attributs universels.

+ +

Exemples

+ +

Voici un exemple simple de l'utilisation de l'élément <shadow>. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.

+ +
+

Note : il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (web components). Pour plus d'informations, voir Activer les composants web sous Firefox.

+
+ +

HTML

+ +
<html>
+  <head></head>
+  <body>
+
+  <!-- Ce <div> accueillera les shadow roots. -->
+  <div>
+    <!-- Ce titre ne sera pas affiché -->
+    <h4>My Original Heading</h4>
+  </div>
+
+  <script>
+    // Récupère le contenu du <div> ci-dessus
+    var origContent = document.querySelector('div');
+    // Crée le premier shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Crée le second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insère un contenu dans le plus vieux shadow root
+    shadowroot1.innerHTML =
+      '<p>Older shadow root inserted by &lt;shadow&gt;</p>';
+    // Insère dans le plus jeune shadow root, y compris <shadow>.
+    // La balise précédente ne sera pas affichée à moins que
+    // l'élément <shadow> ne soit utilisé ci-dessous.
+    shadowroot2.innerHTML =
+      '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
+  </script>
+
+  </body>
+</html>
+
+ +

Résultat statique

+ +

shadow example

+ + +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenu Contenu transparent.
Contenu autorisé Contenu de flux.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte un contenu de flux.
Rôles ARIA autorisésAucun.
Interface DOM{{domxref("HTMLShadowElement")}}
+

Spécifications

+ +

Cet élément ne fait plus partie d'aucune spécification.

+

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.shadow")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf