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.
| 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
Spécifications
| Spécification | État | 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 <content> se comporteront comme l'interface HTMLUnknownElement. Le shadow DOM a été implémenté avec Firefox 33 et peut être activé via la préférence dom.webcomponents.enabled qui est désactivée par défaut.