diff options
Diffstat (limited to 'files/fr/web/html/element/shadow/index.md')
| -rw-r--r-- | files/fr/web/html/element/shadow/index.md | 153 |
1 files changed, 82 insertions, 71 deletions
diff --git a/files/fr/web/html/element/shadow/index.md b/files/fr/web/html/element/shadow/index.md index 3d493de32a..b09fcdc622 100644 --- a/files/fr/web/html/element/shadow/index.md +++ b/files/fr/web/html/element/shadow/index.md @@ -10,36 +10,35 @@ tags: - Web translation_of: Web/HTML/Element/shadow --- -<div>{{deprecated_header}}{{HTMLRef}}</div> +{{deprecated_header}}{{HTMLRef}} -<p>L'élément HTML <strong><code><shadow></code></strong> était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du <em>shadow DOM</em>. Cet élément a été retiré de la spécification et est <a href="https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45">désormais obsolète</a>.</p> +L'élément HTML **`<shadow>`** était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du _shadow DOM_. Cet élément a été retiré de la spécification et est [désormais obsolète](https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45). -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Voici un exemple simple de l'utilisation de l'élément <code><shadow></code>. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.</p> +Voici un exemple simple de l'utilisation de l'élément `<shadow>`. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire. -<div class="note"> -<p><strong>Note :</strong> il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (<em>web components</em>). Pour plus d'informations, voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les composants web sous Firefox</a>.</p> -</div> +> **Note :** il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (_web components_). Pour plus d'informations, voir [Activer les composants web sous Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><html> - <head></head> - <body> +```html +<html> + <head></head> + <body> - <!-- Ce <div> accueillera les shadow roots. --> - <div> - <!-- Ce titre ne sera pas affiché --> - <h4>My Original Heading</h4> - </div> + <!-- Ce <div> accueillera les shadow roots. --> + <div> + <!-- Ce titre ne sera pas affiché --> + <h4>My Original Heading</h4> + </div> - <script> - // Récupère le contenu du <div> ci-dessus + <script> + // Récupère le contenu du <div> ci-dessus var origContent = document.querySelector('div'); // Crée le premier shadow root var shadowroot1 = origContent.createShadowRoot(); @@ -48,67 +47,79 @@ translation_of: Web/HTML/Element/shadow // Insère un contenu dans le plus vieux shadow root shadowroot1.innerHTML = - '<p>Older shadow root inserted by &lt;shadow&gt;</p>'; - // Insère dans le plus jeune shadow root, y compris <shadow>. + '<p>Older shadow root inserted by <shadow></p>'; + // Insère dans le plus jeune shadow root, y compris <shadow>. // La balise précédente ne sera pas affichée à moins que - // l'élément <shadow> ne soit utilisé ci-dessous. + // l'élément <shadow> ne soit utilisé ci-dessous. shadowroot2.innerHTML = - '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>'; - </script> + '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>'; + </script> - </body> -</html> -</pre> + </body> +</html> +``` -<h3 id="Résultat_statique">Résultat statique</h3> +### Résultat statique -<p><img alt="Exemple pour shadow" src="shadow-example.png"></p> - - -<h2 id="Résumé_technique">Résumé technique</h2> + +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu </a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé </dfn></th> - <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément qui accepte un contenu de flux.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLShadowElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <dfn + ><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" + >Catégories de contenu</a + ></dfn + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model" + >Contenu transparent</a + >. + </td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td> + <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" + >Contenu de flux</a + >. + </td> + </tr> + <tr> + <th scope="row"><dfn>Omission de balises</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td>Tout élément qui accepte un contenu de flux.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> -<p>Cet élément ne fait plus partie d'aucune spécification.</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications + +Cet élément ne fait plus partie d'aucune spécification. + +## Compatibilité des navigateurs -<p>{{Compat("html.elements.shadow")}}</p> +{{Compat("html.elements.shadow")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li> - <li>{{HTMLElement("content")}}</li> - <li>{{HTMLElement("template")}}</li> - <li>{{HTMLElement("slot")}}</li> - <li>{{HTMLElement("element")}}</li> -</ul> +- [Les composants web](/fr/docs/Web/Web_Components) +- {{HTMLElement("content")}} +- {{HTMLElement("template")}} +- {{HTMLElement("slot")}} +- {{HTMLElement("element")}} |