initial commit

1 files changed, 116 insertions, 0 deletions

diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html
new file mode 100644
index 0000000000..e3c3c4b46f
--- /dev/null
+++ b/files/fr/web/html/element/content/index.html
@@ -0,0 +1,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>