Vos résultats de recherche

    <content>

    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

    Étiquettes : 
     Contributeurs à cette page : SphinxKnight, Mylainos
     Dernière mise à jour par : SphinxKnight,