<content>

par 2 contributeurs :

Résumé

L'élément HTML <content> est utilisé à l'intérieur du Shadow DOM comme point d'insertion. Cet élément n'est pas conçu pour être utilisé comme du HTML normal. Il est utilisé avec les composants web (Web Components).

Attributes

Cet élément peut utiliser les attributs globaux.

select
Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est identique à la syntaxe pour les sélecteurs CSS. Ils permettent de sélectionner les éléments à insérer dans l'élément <content>.

Exemple

Voici un exemple simple qui utilise cet élément. Il s'agit d'un fichier HTML qui contient l'ensemble des informations nécessaires.

Note : Pour que cela fonctionne, il faut que le navigateur supporte les composants web. Pour Firefox, voir la page sur l'activation des composants web dans Firefox.

<html>
  <head></head>
  <body>
  <!-- Le contenu orginal auquel <content> accèdera-->
  <div>
    <h4>Mon titre pour le contenu</h4>
    <p>Le texte de mon contenu</p>
  </div>

  <script>
  // On récupère le <div> ci-dessus.
  var monContenu = document.querySelector('div');
  // On crée un shadow DOM sur le <div>
  var shadowroot = monContenu.createShadowRoot();
  // On insère le shadow DOM avec un nouveau titre et 
  // la balise <p> du contenu original 
  shadowroot.innerHTML =
   '<h2>Titre inséré</h2> <content select="p"></content>';
  </script>

  </body>
</html>
<script> // Get the
above. var myContent = document.querySelector('div'); // Create a shadow DOM on the
var shadowroot = myContent.createShadowRoot(); // Insert into the shadow DOM a new heading and // part of the original content: the

tag. shadowroot.innerHTML = '

Inserted Heading

<content select="p"></content>'; </script>

Si on affiche cela dans un navigateur web, on obtiendra un résultat semblable à celui-ci :

content example

Spécifications

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

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 35 28 (28) [1] Pas de support 26 Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 37 28.0 (28) [1] Pas de support ? ?

[1] Si le shadow DOM n'est pas activé dans Firefox, les éléments se comporteront comme des HTMLUnknownElement. Le shadow DOM a d'abord été implémenté avec Firefox 33 et est disponible grâce à 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 : SphinxKnight, Mylainos
Dernière mise à jour par : SphinxKnight,