blob: b09fcdc6227fa124104b7890e450334193649a2e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: '<shadow> : 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](https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45).
## Attributs
Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/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](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox).
### HTML
```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 <shadow></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
## Résumé technique
<table class="properties">
<tbody>
<tr>
<th scope="row">
<dfn
><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu"
>Catégories de contenu</a
></dfn
>
</th>
<td>
<a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model"
>Contenu transparent</a
>.
</td>
</tr>
<tr>
<th scope="row"><dfn>Contenu autorisé</dfn></th>
<td>
<a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
>Contenu de flux</a
>.
</td>
</tr>
<tr>
<th scope="row"><dfn>Omission de balises</dfn></th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row"><dfn>Parents autorisés</dfn></th>
<td>Tout élément qui accepte un contenu de flux.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Aucun.</td>
</tr>
<tr>
<th scope="row"><dfn>Interface DOM</dfn></th>
<td>{{domxref("HTMLShadowElement")}}</td>
</tr>
</tbody>
</table>
## Spécifications
Cet élément ne fait plus partie d'aucune spécification.
## Compatibilité des navigateurs
{{Compat("html.elements.shadow")}}
## Voir aussi
- [Les composants web](/fr/docs/Web/Web_Components)
- {{HTMLElement("content")}}
- {{HTMLElement("template")}}
- {{HTMLElement("slot")}}
- {{HTMLElement("element")}}
|
