Obsolète
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.
L'élément HTML <shadow> était utilisé comme un point d'insertion (insertion point) du shadow DOM. Cet élément a été retiré de la spécification et est désormais obsolète.
| Catégories de contenu | Contenu transparent. |
|---|---|
| Contenu autorisé | Contenu de flux. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | Tout élément qui accepte un contenu de flux. |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | HTMLShadowElement |
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 <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
Spécifications
Cet élément ne fait plus partie d'aucune spécification.
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support basique | 35 | 28 (28)[1] | Pas de support | 26 | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support basique | 37 | 28.0 (28)[1] | Pas de support | ? | ? |
[1] Si le shadow DOM n'est pas activé dans Firefox, les éléments <shadow> se comporteront comme HTMLUnknownElement. La première version de la spécification pour le shadow DOM a été implémentée pour la première fois dans Firefox 33 et était conditionnée par une préférence, dom.webcomponents.enabled, désactivée par défaut.