files/fr/web/html/element/content/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

---
title: <content>
slug: Web/HTML/Element/content
tags:
  - Déprécié
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/content
---
<div>{{Deprecated_header}}{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;content&gt;</code></strong> était utilisé au sein d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> 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 <a href="/fr/docs/Web/Web_Components">des composants web</a>. Il est désormais remplacé par l'élément <code><strong>&lt;slot&gt;</strong></code> qui permet de créer un point d'insertion pour un <em>shadow DOM</em> au sein du DOM.</p>

<div class="note">
<p><strong>Note : </strong>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 et ne doit pas être utilisé. Cet élément est documenté afin d'aider à la migration.</p>
</div>

<h2 id="Attributes">Attributes</h2>

<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;content&gt;</code>.</p>

<dl>
 <dt><code>select</code></dt>
 <dd>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 <code>&lt;content&gt;</code>.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<p>Voici un exemple simple d'utilisation de l'élément <code>&lt;content&gt;</code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p>

<h3 id="HTML">HTML</h3>

<div class="note">
<p><strong>Note :</strong> Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">l'activation des composants web dans Firefox</a>).</p>
</div>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Le contenu original auquel on accède via &lt;content&gt; --&gt;
  &lt;div&gt;
    &lt;h4&gt;L'en-tête de mon contenu&lt;/h4&gt;
    &lt;p&gt;Le texte de mon contenu&lt;/p&gt;
  &lt;/div&gt;

  &lt;script&gt;
  // On récupère le &lt;div&gt; ci-avant.
  var myContent = document.querySelector('div');
  // On crée un shadow DOM sur le &lt;div&gt;
  var shadowroot = myContent.createShadowRoot();
  // On ajoute un nouvel en-tête dans le shadow DOM
  // et on conserve le paragraphe original.
  shadowroot.innerHTML =
   '&lt;h2&gt;Titre inséré&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
  &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","200","130")}}</p>

<h3 id="Capture">Capture</h3>

<p><img alt="Contenu de l'exemple" src="https://mdn.mozillademos.org/files/10325/Capture.JPG" style="height: 193px; width: 464px;"></p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent" title="HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du contenu de flux.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLContentElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<p>Ce document ne fait plus partie d'aucune spécification.</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.content")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
 <li>{{HTMLElement("shadow")}}</li>
 <li>{{HTMLElement("template")}}</li>
 <li>{{HTMLElement("slot")}}</li>
 <li>{{HTMLElement("element")}}</li>
</ul>