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.