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 <content> était utilisé au sein d'un shadow DOM comme point d'insertion. Cet élément est désormais obsolète et n'était pas conçu pour être utilisé dans un document HTML simple mais pour être employé dans des composants web. Il est désormais remplacé par l'élément <slot> qui permet de créer un point d'insertion pour un shadow DOM au sein du DOM.

Note : Bien que cet élément soit présent dans les premiers brouillons ded la spécification et implémenté dans plusieurs navigateurs, il a été retiré des dernières versions de la spécification et ne doit pas être utilisé. Cet élément est documenté afin d'aider à la migration.

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 du contenu de flux.
Interface DOM HTMLContentElement

Attributes

Comme pour tous les éléments, on peut utiliser les attributs universels sur <content>.

select
Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <content>.

Exemples

Voici un exemple simple d'utilisation de l'élément <content>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.

HTML

Note : Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple l'activation des composants web dans Firefox).

<html>
  <head></head>
  <body>
  <!-- Le contenu original auquel on accède via <content> -->
  <div>
    <h4>L'en-tête de mon contenu</h4>
    <p>Le texte de mon contenu</p>
  </div>

  <script>
  // On récupère le <div> ci-avant.
  var myContent = document.querySelector('div');
  // On crée un shadow DOM sur le <div>
  var shadowroot = myContent.createShadowRoot();
  // On ajoute un nouvel en-tête dans le shadow DOM 
  // et on conserve le paragraphe original.
  shadowroot.innerHTML =
   '<h2>Titre inséré</h2> <content select="p"></content>';
  </script>

  </body>
</html>

Résultat

Capture

Contenu de l'exemple

Spécifications

Ce document 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 pour 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 — 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.
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, Mylainos
Dernière mise à jour par : SphinxKnight,