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).
- 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 N'importe quel élément qui accepte du contenu de flux
- DOM interface
HTMLContentElement
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
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 :
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.