Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

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 &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

Spécifications

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
ObsolèteNon-standard
Chrome Support complet 35Edge Aucun support NonFirefox Aucun support 33 — 59
Désactivée
Aucun support 33 — 59
Désactivée
Désactivée From version 33 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 26Safari Aucun support NonWebView Android Support complet 37Chrome Android Support complet 37Edge Mobile Aucun support NonFirefox Android Aucun support 33 — 58
Désactivée
Aucun support 33 — 58
Désactivée
Désactivée From version 33 until version 58 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, jean-pierre.gay
Dernière mise à jour par : SphinxKnight,