Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

<shadow>

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

L'élément HTML <shadow> est utilisé comme un point d'insertion (insertion point) shadow DOM. Vous pourriez vouloir l'utiliser si vous avez créé de multiples shadow roots sous un shadow host. Il n'est pas autrement utile dans un fichier HTML ordinaire. Il est utilisé avec les Web Components.

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
Éléments parents autorisés Tout élément qui accepte un contenu de flux.
Interface DOM HTMLShadowElement

Attributs

Cet élément comprend les attributs globaux.

Exemple

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.

Remarque : il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les Web Components. Voir Enabling Web Components in Firefox.

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

Si vous l'affichez dans un navigateur, il donnera la chose suivante :

shadow example

Spécifications

Spécification Statut Commentaire
Shadow DOM
La définition de 'shadow' dans cette spécification.
Version de travail  

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. Le Shadow DOM a été implémenté pour la première fois dans Firefox 33 et conditionné par une préférence, dom.webcomponents.enabled, qui est désactivée par défaut.

Voir aussi

Étiquettes et contributeurs liés au document

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