diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-11 08:43:25 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 09:11:21 +0100 |
| commit | 8bdcf31f79fdecafb6d4a5e13fd1fd01c767a823 (patch) | |
| tree | ee988c5193c29ce249cc9895554937597de9c02c | |
| parent | 7d233a6bff46d1e69c6eb3726d4db6a48ac5934a (diff) | |
| download | translated-content-8bdcf31f79fdecafb6d4a5e13fd1fd01c767a823.tar.gz translated-content-8bdcf31f79fdecafb6d4a5e13fd1fd01c767a823.tar.bz2 translated-content-8bdcf31f79fdecafb6d4a5e13fd1fd01c767a823.zip | |
convert content to md
| -rw-r--r-- | files/fr/web/web_components/index.md | 168 | ||||
| -rw-r--r-- | files/fr/web/web_components/using_custom_elements/index.md | 204 | ||||
| -rw-r--r-- | files/fr/web/web_components/using_shadow_dom/index.md | 192 | ||||
| -rw-r--r-- | files/fr/web/web_components/using_templates_and_slots/index.md | 398 |
4 files changed, 472 insertions, 490 deletions
diff --git a/files/fr/web/web_components/index.md b/files/fr/web/web_components/index.md index 61c90c9a2a..c94b26038a 100644 --- a/files/fr/web/web_components/index.md +++ b/files/fr/web/web_components/index.md @@ -5,108 +5,66 @@ tags: - Composants Web translation_of: Web/Web_Components --- -<p>{{DefaultAPISidebar("Web Components")}}{{ draft }}</p> - -<p>Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d'interface graphique personnalisés et réutilisables, qui ont été créés en utilisant des technologies web libres. Ils font partie du navigateur, et donc ne nécessitent pas de bibliothèque externe comme jQuery ou Dojo. Un Composant Web existant peut être utilisé sans l'écriture de code, en ajoutant simplement une déclaration d'importation à une page HTML. Les Composants Web utilisent les nouvelles capacités standard de navigateur, ou celles en cours de développement.</p> - -<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> - -<p>En tant que développeurs, nous savons tous à quel point la réutilisation de code est une bonne chose. Malgré cela, historiquement, il a toujours été difficile de réutiliser les languages balisés. Prenez par exemple tous ces éléments complexes en HTML que vous avez créés et dû répéter dans vos applications avec le risque que votre code devienne incompréhensible.</p> - -<p>Les composants Web ont pour but de résoudre ce problème et consistent en 3 technologies qui peuvent être utilisées ensemble pour créer des éléments réutilisables, encapsulés, versatiles et sans risquer une collision avec d'autre morceaux de code.</p> - -<ul> - <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Custom Elements: </a> pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur.</li> - <li><a href="/fr/docs/Web/HTML/Element/template">HTML Templates: </a> squelette pour créer des éléments HTML instanciables.</li> - <li><a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM: </a>permet d'encapsuler le JavaScript et le CSS des éléments.</li> -</ul> - -<p>Au début de la spécification, il y avait aussi la technologie <a href="/fr/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>. Celle-ci servait à packager ses composants (CSS, JavaScript, etc.) et permettre leur intégration dans d'autres pages. Elle a néanmoins été abandonnée au profit des imports javascript qui permettent la même chose en utilisant une syntaxe plus moderne.</p> - -<p>La description ci-dessus fonctionne assez bien à l'heure actuelle, mais cela laisse de côté plusieurs choses pour lesquelles les Composants Web pourraient être utilisés. Avec un Composant Web, vous pouvez faire presque tout ce qui peut être fait en HTML, CSS et JavaScript, et celui-ci peut devenir un élément réutilisable facilement.</p> - -<p>Il y a parfois une certaine confusion concernant les Composants Web et Google Polymer. Polymer est un framework qui repose sur la technologie des Composants Web. Vous pouvez faire et utiliser des Composants Web sans Polymer.</p> - -<p>Généralement, l'approche basique pour la création d'un composant Web est la suivante:</p> - -<ol> - <li>Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les <a href="/fr/docs/Web/JavaScript/Reference/Classes">Classes</a> pour de plus amples informations).</li> - <li>Enregistrer le nouvel élément personnalisé en utilisant la méthode {{domxref("CustomElementRegistry.define()")}}, avec en paramètre le nom de l'élément à définir, la classe ou la fonction dans laquelle la fonctionnalité est spécifiée, et optionnellement, de quel élément celui-ci hérite-t-il.</li> - <li>Si nécessaire, connecter un shadow DOM à l'élément personnalisé en utilisant la méthode {{domxref("Element.attachShadow()")}}. Ajouter les éléments-fils, les écouteurs d'événements, etc., au shadow DOM en utilisant les méthodes DOM usuelles.</li> - <li>Si nécessaire, définir un template HTML en utilisant {{htmlelement("template")}} et {{htmlelement("slot")}}. Toujours en utilisant les méthodes DOM usuelles pour cloner le template et le connecter au shadow DOM.</li> - <li>Utiliser l'élément personnalisé à l'endroit désiré sur la page, comme tous les autres éléments HTML.</li> -</ol> - -<div class="note"> -<p><strong>Note :</strong> Les Composants Web ne sont pas encore pleinement mis en œuvre dans tous les navigateurs, et pour les utiliser dès maintenant dans la plupart des navigateurs (janvier 2015), vous devrez probablement utiliser des polyfills (ce sont des bibliothèques JavaScript destinées à émuler des fonctionnalités qui ne sont pas encore implémentées nativement dans les navigateurs). Les polyfills sont disponibles dans le <a href="http://www.polymer-project.org/">projet Google Polymer</a>. Pour savoir quels navigateurs implémentent les Composants Web, voir <a href="http://jonrimmer.github.io/are-we-componentized-yet/">Are We Componentized Yet?</a></p> -</div> - - -<p>Les spécifications des Composants Web définissent les éléments suivants :</p> - -<ul> - <li>De nouveaux éléments HTML : {{HTMLElement("template")}}, {{HTMLElement("content")}} et {{HTMLElement("shadow")}} ({{HTMLElement("element")}} et {{HTMLElement("decorator")}} ont été retirés).</li> - <li>Les interfaces d'API associées pour les nouveaux éléments: {{domxref("HTMLTemplateElement")}}, {{domxref("HTMLContentElement")}} et {{domxref("HTMLShadowElement")}}.</li> - <li>Des extensions à l'interface {{domxref("HTMLLinkElement")}} et l'élément {{HTMLElement("link")}}.</li> - <li>Une API pour enregistrer les custom elements, {{domxref("Document.registerElement()")}}, et des modifications de {{domxref("Document.createElement()")}} et {{domxref("Document.createElementNS()")}}.</li> - <li>De nouvelles fonctions liées au cycle de vie ("<em>lifecycle callbacks</em>") peuvent être ajoutées à un prototype sur lequel est basé un custom element.</li> - <li>Une nouvelle pseudo-classe CSS pour les éléments de style par defaut, {{cssxref(":unresolved")}}.</li> - <li>Le Shadow DOM : {{domxref("ShadowRoot")}} et {{domxref("Element.createShadowRoot()")}}, {{domxref("Element.getDestinationInsertionPoints()")}}, {{domxref("Element.shadowRoot")}}.</li> - <li>Une extension à l'interface {{domxref("Event")}}, {{domxref("Event.path")}}.</li> - <li>Une extension à l'interface {{domxref("Document")}}.</li> - <li>Pour le style des Composants Web: - <ul> - <li>de nouvelles pseudo-classes : {{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}.</li> - <li>de nouveaux pseudo-elements : {{cssxref("::shadow")}} et {{cssxref("::content")}}.</li> - <li>un nouveau combinateur, <code>/deep/</code>.</li> - </ul> - </li> -</ul> - -<h2 id="Activer_les_Web_Components_dans_Firefox">Activer les Web Components dans Firefox</h2> - -<p>Les capacités des Web Components sont désactivées par défaut dans Firefox. Pour les activer, allez sur la page <code>about:config</code> et rejetez toutes les alertes qui apparaissent. Cherchez ensuite la préférence nommée <strong>dom.webcomponents.enabled</strong>, et changez la à <strong>true</strong> par un double clic.</p> - -<p><img alt="Firefox enable web components" src="https://mdn.mozillademos.org/files/10145/enable-wc.png"></p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Custom Elements', "", "")}}</td> - <td>{{Spec2('Custom Elements')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('Shadow DOM', "", "")}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML Imports', "", "")}}</td> - <td>{{Spec2('HTML Imports')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS Scope", "", "")}}</td> - <td>{{Spec2('CSS Scope')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{DefaultAPISidebar("Web Components")}}{{ draft }} + +Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d'interface graphique personnalisés et réutilisables, qui ont été créés en utilisant des technologies web libres. Ils font partie du navigateur, et donc ne nécessitent pas de bibliothèque externe comme jQuery ou Dojo. Un Composant Web existant peut être utilisé sans l'écriture de code, en ajoutant simplement une déclaration d'importation à une page HTML. Les Composants Web utilisent les nouvelles capacités standard de navigateur, ou celles en cours de développement. + +## Concepts et utilisation + +En tant que développeurs, nous savons tous à quel point la réutilisation de code est une bonne chose. Malgré cela, historiquement, il a toujours été difficile de réutiliser les languages balisés. Prenez par exemple tous ces éléments complexes en HTML que vous avez créés et dû répéter dans vos applications avec le risque que votre code devienne incompréhensible. + +Les composants Web ont pour but de résoudre ce problème et consistent en 3 technologies qui peuvent être utilisées ensemble pour créer des éléments réutilisables, encapsulés, versatiles et sans risquer une collision avec d'autre morceaux de code. + +- [Custom Elements: ](/fr/docs/Web/Web_Components/Custom_Elements)pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur. +- [HTML Templates: ](/fr/docs/Web/HTML/Element/template)squelette pour créer des éléments HTML instanciables. +- [Shadow DOM: ](/fr/docs/Web/Web_Components/Shadow_DOM)permet d'encapsuler le JavaScript et le CSS des éléments. + +Au début de la spécification, il y avait aussi la technologie [HTML Imports](/fr/docs/Web/Web_Components/HTML_Imports). Celle-ci servait à packager ses composants (CSS, JavaScript, etc.) et permettre leur intégration dans d'autres pages. Elle a néanmoins été abandonnée au profit des imports javascript qui permettent la même chose en utilisant une syntaxe plus moderne. + +La description ci-dessus fonctionne assez bien à l'heure actuelle, mais cela laisse de côté plusieurs choses pour lesquelles les Composants Web pourraient être utilisés. Avec un Composant Web, vous pouvez faire presque tout ce qui peut être fait en HTML, CSS et JavaScript, et celui-ci peut devenir un élément réutilisable facilement. + +Il y a parfois une certaine confusion concernant les Composants Web et Google Polymer. Polymer est un framework qui repose sur la technologie des Composants Web. Vous pouvez faire et utiliser des Composants Web sans Polymer. + +Généralement, l'approche basique pour la création d'un composant Web est la suivante: + +1. Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les [Classes](/fr/docs/Web/JavaScript/Reference/Classes) pour de plus amples informations). +2. Enregistrer le nouvel élément personnalisé en utilisant la méthode {{domxref("CustomElementRegistry.define()")}}, avec en paramètre le nom de l'élément à définir, la classe ou la fonction dans laquelle la fonctionnalité est spécifiée, et optionnellement, de quel élément celui-ci hérite-t-il. +3. Si nécessaire, connecter un shadow DOM à l'élément personnalisé en utilisant la méthode {{domxref("Element.attachShadow()")}}. Ajouter les éléments-fils, les écouteurs d'événements, etc., au shadow DOM en utilisant les méthodes DOM usuelles. +4. Si nécessaire, définir un template HTML en utilisant {{htmlelement("template")}} et {{htmlelement("slot")}}. Toujours en utilisant les méthodes DOM usuelles pour cloner le template et le connecter au shadow DOM. +5. Utiliser l'élément personnalisé à l'endroit désiré sur la page, comme tous les autres éléments HTML. + +> **Note :** Les Composants Web ne sont pas encore pleinement mis en œuvre dans tous les navigateurs, et pour les utiliser dès maintenant dans la plupart des navigateurs (janvier 2015), vous devrez probablement utiliser des polyfills (ce sont des bibliothèques JavaScript destinées à émuler des fonctionnalités qui ne sont pas encore implémentées nativement dans les navigateurs). Les polyfills sont disponibles dans le [projet Google Polymer](http://www.polymer-project.org/). Pour savoir quels navigateurs implémentent les Composants Web, voir [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/) + +Les spécifications des Composants Web définissent les éléments suivants : + +- De nouveaux éléments HTML : {{HTMLElement("template")}}, {{HTMLElement("content")}} et {{HTMLElement("shadow")}} ({{HTMLElement("element")}} et {{HTMLElement("decorator")}} ont été retirés). +- Les interfaces d'API associées pour les nouveaux éléments: {{domxref("HTMLTemplateElement")}}, {{domxref("HTMLContentElement")}} et {{domxref("HTMLShadowElement")}}. +- Des extensions à l'interface {{domxref("HTMLLinkElement")}} et l'élément {{HTMLElement("link")}}. +- Une API pour enregistrer les custom elements, {{domxref("Document.registerElement()")}}, et des modifications de {{domxref("Document.createElement()")}} et {{domxref("Document.createElementNS()")}}. +- De nouvelles fonctions liées au cycle de vie ("_lifecycle callbacks_") peuvent être ajoutées à un prototype sur lequel est basé un custom element. +- Une nouvelle pseudo-classe CSS pour les éléments de style par defaut, {{cssxref(":unresolved")}}. +- Le Shadow DOM : {{domxref("ShadowRoot")}} et {{domxref("Element.createShadowRoot()")}}, {{domxref("Element.getDestinationInsertionPoints()")}}, {{domxref("Element.shadowRoot")}}. +- Une extension à l'interface {{domxref("Event")}}, {{domxref("Event.path")}}. +- Une extension à l'interface {{domxref("Document")}}. +- Pour le style des Composants Web: + + - de nouvelles pseudo-classes : {{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}. + - de nouveaux pseudo-elements : {{cssxref("::shadow")}} et {{cssxref("::content")}}. + - un nouveau combinateur, `/deep/`. + +## Activer les Web Components dans Firefox + +Les capacités des Web Components sont désactivées par défaut dans Firefox. Pour les activer, allez sur la page `about:config` et rejetez toutes les alertes qui apparaissent. Cherchez ensuite la préférence nommée **dom.webcomponents.enabled**, et changez la à **true** par un double clic. + + + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Custom Elements', "", "")}} | {{Spec2('Custom Elements')}} | | +| {{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML WHATWG')}} | Pas de changement | +| {{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML5 W3C')}} | Définition initiale | +| {{SpecName('Shadow DOM', "", "")}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('HTML Imports', "", "")}} | {{Spec2('HTML Imports')}} | | +| {{SpecName("CSS Scope", "", "")}} | {{Spec2('CSS Scope')}} | | diff --git a/files/fr/web/web_components/using_custom_elements/index.md b/files/fr/web/web_components/using_custom_elements/index.md index e01061d005..5fe0e7d7d6 100644 --- a/files/fr/web/web_components/using_custom_elements/index.md +++ b/files/fr/web/web_components/using_custom_elements/index.md @@ -10,35 +10,34 @@ tags: - customized translation_of: Web/Web_Components/Using_custom_elements --- -<div>{{DefaultAPISidebar("Web Components")}}</div> +{{DefaultAPISidebar("Web Components")}} -<p>L'un des aspects les plus importants des composants web est la possibilité de créer des éléments personnalisés qui encapsulent bien vos fonctionnalités sur une page HTML, plutôt que de devoir se contenter d'une soupe de balises définissant des fonctionnalités personnalisées. Cet article passe en revue les bases de l'utilisation d'éléments personnalisés.</p> +L'un des aspects les plus importants des composants web est la possibilité de créer des éléments personnalisés qui encapsulent bien vos fonctionnalités sur une page HTML, plutôt que de devoir se contenter d'une soupe de balises définissant des fonctionnalités personnalisées. Cet article passe en revue les bases de l'utilisation d'éléments personnalisés. -<div class="note"> -<p><strong>Note :</strong> Les éléments personnalisés sont pris en charge par défaut dans Chrome et Opera. Firefox en est très proche, ils sont disponibles si vous mettez les préférences dom.webcomponents.enabled et dom.webcomponents.customelements.enabled à true, leur implémentation étant prévue pour être activée par défaut dans la version 60/61. Safari ne prend en charge que les éléments personnalisés indépendants pour l'instant, et Edge travaille de même sur une implémentation.</p> -</div> +> **Note :** Les éléments personnalisés sont pris en charge par défaut dans Chrome et Opera. Firefox en est très proche, ils sont disponibles si vous mettez les préférences dom.webcomponents.enabled et dom.webcomponents.customelements.enabled à true, leur implémentation étant prévue pour être activée par défaut dans la version 60/61. Safari ne prend en charge que les éléments personnalisés indépendants pour l'instant, et Edge travaille de même sur une implémentation. -<h2 id="Vue_d'ensemble">Vue d'ensemble</h2> +## Vue d'ensemble -<p>Le contrôleur des éléments personnalisés d'un document Web est l'objet {{domxref("CustomElementRegistry")}} ; cet objet vous permet d'enregistrer un élément personnalisé sur une page, de renvoyer des informations sur les éléments personnalisés enregistrés, etc..</p> +Le contrôleur des éléments personnalisés d'un document Web est l'objet {{domxref("CustomElementRegistry")}} ; cet objet vous permet d'enregistrer un élément personnalisé sur une page, de renvoyer des informations sur les éléments personnalisés enregistrés, etc.. -<p>Pour enregistrer un élément personnalisé sur la page, vous utilisez la méthode {{domxref ("CustomElementRegistry.define()")}}. Elle prend comme arguments :</p> +Pour enregistrer un élément personnalisé sur la page, vous utilisez la méthode {{domxref ("CustomElementRegistry.define()")}}. Elle prend comme arguments : -<ul> - <li>une {{domxref("DOMString")}} représentant le nom que vous donnez à l'élément ; notez que les noms d'éléments personnalisés doivent comprendre un tiret ; ils ne peuvent pas être des mots simples ;</li> - <li>un objet de classe définissant le comportement de l'élément ;</li> - <li>facultativement, un objet d'options contenant une propriété extends, qui indique l'élément intégré dont votre élément hérite, le cas échéant.</li> -</ul> +- une {{domxref("DOMString")}} représentant le nom que vous donnez à l'élément ; notez que les noms d'éléments personnalisés doivent comprendre un tiret ; ils ne peuvent pas être des mots simples ; +- un objet de classe définissant le comportement de l'élément ; +- facultativement, un objet d'options contenant une propriété extends, qui indique l'élément intégré dont votre élément hérite, le cas échéant. -<p>Ainsi, par exemple, la définition de notre <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">élément word-count</a> personnalisé ressemble à ce qui suit :</p> +Ainsi, par exemple, la définition de notre [élément word-count](https://mdn.github.io/web-components-examples/word-count-web-component/) personnalisé ressemble à ce qui suit : -<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre> +```js +customElements.define('word-count', WordCount, { extends: 'p' }); +``` -<p>L'élément est appelé <code>word-count</code>, son objet de classe est <code>WordCount</code>, et il étend l'élément {{htmlelement("p")}}.</p> +L'élément est appelé `word-count`, son objet de classe est `WordCount`, et il étend l'élément {{htmlelement("p")}}. -<p>L'objet de classe d'un élément personnalisé est écrit en utilisant la syntaxe de classe ES 2015 standard. Par exemple, <code>WordCount</code> est structuré comme suit :</p> +L'objet de classe d'un élément personnalisé est écrit en utilisant la syntaxe de classe ES 2015 standard. Par exemple, `WordCount` est structuré comme suit : -<pre class="brush: js">class WordCount extends HTMLParagraphElement { +```js +class WordCount extends HTMLParagraphElement { constructor() { // Toujours appeler "super" d'abord dans le constructeur super(); @@ -47,32 +46,32 @@ translation_of: Web/Web_Components/Using_custom_elements ... } -}</pre> +} +``` -<p>C'est juste un exemple simple, mais vous pouvez faire plus ici. Il est possible de définir des rappels de cycle de vie particuliers dans le constructeur, rappels qui s'exécutent à des points particuliers du cycle de vie de l'élément. Par exemple, <code>connectedCallback</code> est appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document, tandis que <code>attributeChangedCallback</code> est appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</p> +C'est juste un exemple simple, mais vous pouvez faire plus ici. Il est possible de définir des rappels de cycle de vie particuliers dans le constructeur, rappels qui s'exécutent à des points particuliers du cycle de vie de l'élément. Par exemple, `connectedCallback` est appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document, tandis que `attributeChangedCallback` est appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié. -<p>Vous en apprendrez plus à ce sujet dans notre section {{anch("Using the lifecycle callbacks")}} ci-dessous.</p> +Vous en apprendrez plus à ce sujet dans notre section {{anch("Using the lifecycle callbacks")}} ci-dessous. -<p>Il existe deux types d'éléments personnalisés :</p> +Il existe deux types d'éléments personnalisés : -<ul> - <li>les <strong>éléments personnalisés autonomes</strong> sont indépendants : ils n'héritent pas des éléments HTML standard ; vous les utilisez sur une page en les écrivant littéralement en tant qu'élément HTML ; par exemple <code><popup-info></code>, ou <code>document.createElement("popup-info")</code> ;</li> - <li>les <code>éléments intégrés personnalisés</code> héritent des éléments HTML de base. Pour en créer un, vous devez spécifier quel élément ils étendent (comme indiqué dans les exemples ci-dessus), et ils sont utilisés en écrivant l'élément de base, mais en indiquant le nom de l'élément personnalisé dans l'attribut (ou la propriété) {{htmlattrxref("is" )}} ; par exemple <p is="word-count"> ou document.createElement("p", {is: "word-count"}).</li> -</ul> +- les **éléments personnalisés autonomes** sont indépendants : ils n'héritent pas des éléments HTML standard ; vous les utilisez sur une page en les écrivant littéralement en tant qu'élément HTML ; par exemple `<popup-info>`, ou `document.createElement("popup-info")` ; +- les `éléments intégrés personnalisés` héritent des éléments HTML de base. Pour en créer un, vous devez spécifier quel élément ils étendent (comme indiqué dans les exemples ci-dessus), et ils sont utilisés en écrivant l'élément de base, mais en indiquant le nom de l'élément personnalisé dans l'attribut (ou la propriété) {{htmlattrxref("is" )}} ; par exemple \<p is="word-count"> ou document.createElement("p", {is: "word-count"}). -<h2 id="Passage_en_revue_de_quelques_exemples_simples">Passage en revue de quelques exemples simples</h2> +## Passage en revue de quelques exemples simples -<p>À ce stade, examinons quelques exemples plus simples pour vous montrer plus en détail comment des éléments personnalisés sont créés.</p> +À ce stade, examinons quelques exemples plus simples pour vous montrer plus en détail comment des éléments personnalisés sont créés. -<h3 id="Éléments_personnalisés_indépendants">Éléments personnalisés indépendants</h3> +### Éléments personnalisés indépendants -<p>Jetons un coup d'oeil à un élément personnalisé indépendant : <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component"><popup-info-box></a> (voir un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple en direct</a>). Il prend une icône d'image et une chaîne de texte, et intègre l'icône dans la page.</p> +Jetons un coup d'oeil à un élément personnalisé indépendant : [\<popup-info-box>](https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component) (voir un [exemple en direct](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)). Il prend une icône d'image et une chaîne de texte, et intègre l'icône dans la page. -<p>Lorsque l'icône reçoit la focalisation, elle affiche le texte dans une boîte d'information contextuelle pour fournir d'autres informations contextuelles.</p> +Lorsque l'icône reçoit la focalisation, elle affiche le texte dans une boîte d'information contextuelle pour fournir d'autres informations contextuelles. -<p>Pour commencer, dans notre fichier JavaScript, nous définissons une classe appelée <code>PopUpInfo</code> qui étend {{domxref("HTMLElement")}}. Les éléments personnalisés indépendants étendent presque toujours <code>HTMLElement</code>.</p> +Pour commencer, dans notre fichier JavaScript, nous définissons une classe appelée `PopUpInfo` qui étend {{domxref("HTMLElement")}}. Les éléments personnalisés indépendants étendent presque toujours `HTMLElement`. -<pre class="brush: js">class PopUpInfo extends HTMLElement { +```js +class PopUpInfo extends HTMLElement { constructor() { // Toujours appeler "super" d'abord dans le constructeur super(); @@ -80,13 +79,15 @@ translation_of: Web/Web_Components/Using_custom_elements // Ecrire la fonctionnalité de l'élément ici ... } -}</pre> +} +``` -<p>On y trouve la définition {{jsxref("Classes.constructor","constructor")}} de la classe, qui commence comme toujours par appeler super(), afin que la chaîne de prototype correcte soit définie.</p> +On y trouve la définition {{jsxref("Classes.constructor","constructor")}} de la classe, qui commence comme toujours par appeler super(), afin que la chaîne de prototype correcte soit définie. -<p>Dans le constructeur, nous définissons toutes les fonctionnalités que l'élément aura lorsqu'une instance de celui-ci sera instanciée. Dans ce cas, nous attachons une racine fantôme à l'élément personnalisé, nous utilisons une manipulation DOM pour créer la structure DOM interne de l'élément - qui est ensuite attachée à la racine fantôme ; et finalement, nous attachons du CSS à la racine fantôme pour la mettre en forme.</p> +Dans le constructeur, nous définissons toutes les fonctionnalités que l'élément aura lorsqu'une instance de celui-ci sera instanciée. Dans ce cas, nous attachons une racine fantôme à l'élément personnalisé, nous utilisons une manipulation DOM pour créer la structure DOM interne de l'élément - qui est ensuite attachée à la racine fantôme ; et finalement, nous attachons du CSS à la racine fantôme pour la mettre en forme. -<pre class="brush: js">// Création d'une racine fantôme +```js +// Création d'une racine fantôme var shadow = this.attachShadow({mode: 'open'}); // Création des spans @@ -124,29 +125,33 @@ style.textContent = '.wrapper {' + shadow.appendChild(style); shadow.appendChild(wrapper); wrapper.appendChild(icon); -wrapper.appendChild(info);</pre> +wrapper.appendChild(info); +``` -<p>Enfin, nous enregistrons notre élément personnalisé dans le <code>CustomElementRegistry</code> à l'aide de la méthode <code>define()</code> mentionnée précédemment ; dans les paramètres, nous spécifions le nom de l'élément, puis le nom de la classe qui définit sa fonctionnalité :</p> +Enfin, nous enregistrons notre élément personnalisé dans le `CustomElementRegistry` à l'aide de la méthode `define()` mentionnée précédemment ; dans les paramètres, nous spécifions le nom de l'élément, puis le nom de la classe qui définit sa fonctionnalité : -<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre> +```js +customElements.define('popup-info', PopUpInfo); +``` -<p>Il est maintenant disponible pour utilisation dans notre page. Dans notre code HTML, nous l'utilisons comme ceci :</p> +Il est maintenant disponible pour utilisation dans notre page. Dans notre code HTML, nous l'utilisons comme ceci : -<pre class="brush: html"><popup-info img="img/alt.png" text="Your card validation code (CVC) +```html +<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the - back of your card."></pre> + back of your card."> +``` -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">full JavaScript source code</a> ici.</p> -</div> +> **Note :** Vous pouvez voir le [full JavaScript source code](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js) ici. -<h3 id="Eléments_intégrés_personnalisés">Eléments intégrés personnalisés</h3> +### Eléments intégrés personnalisés -<p>Jetons maintenant un coup d'œil à un autre exemple d'élément intégré - <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">voir aussi en direct</a>). Cela transforme n'importe quelle liste non ordonnée en un menu déployable/refermable.</p> +Jetons maintenant un coup d'œil à un autre exemple d'élément intégré - [expanding-list](https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component) ([voir aussi en direct](https://mdn.github.io/web-components-examples/expanding-list-web-component/)). Cela transforme n'importe quelle liste non ordonnée en un menu déployable/refermable. -<p>Tout d'abord, nous définissons la classe de notre élément, de la même manière que précédemment :</p> +Tout d'abord, nous définissons la classe de notre élément, de la même manière que précédemment : -<pre class="brush: js">class ExpandingList extends HTMLUListElement { +```js +class ExpandingList extends HTMLUListElement { constructor() { // Toujours appeler "super" d'abord dans le constructeur super(); @@ -155,58 +160,64 @@ wrapper.appendChild(info);</pre> ... } -}</pre> +} +``` -<p>Nous n'expliquerons pas en détail la fonctionnalité de l'élément ici, mais vous pouvez découvrir comment elle fonctionne en regardant le code source. La seule vraie différence ici est que notre élément étend l'interface {{domxref("HTMLUListElement")}}, et non {{domxref("HTMLElement")}}. Il a donc toutes les caractéristiques d'un élément {{htmlelement ("ul")}} avec la fonctionnalité que nous définissons par dessus, plutôt que d'être un élément indépendant. C'est ce qui en fait un élément intégré personnalisé plutôt qu'un élément indépendant.</p> +Nous n'expliquerons pas en détail la fonctionnalité de l'élément ici, mais vous pouvez découvrir comment elle fonctionne en regardant le code source. La seule vraie différence ici est que notre élément étend l'interface {{domxref("HTMLUListElement")}}, et non {{domxref("HTMLElement")}}. Il a donc toutes les caractéristiques d'un élément {{htmlelement ("ul")}} avec la fonctionnalité que nous définissons par dessus, plutôt que d'être un élément indépendant. C'est ce qui en fait un élément intégré personnalisé plutôt qu'un élément indépendant. -<p>Ensuite, nous enregistrons l'élément en utilisant la méthode <code>define()</code> comme précédemment, sauf que cette fois, il comprend également un objet options qui détaille l'élément dont notre élément personnalisé hérite :</p> +Ensuite, nous enregistrons l'élément en utilisant la méthode `define()` comme précédemment, sauf que cette fois, il comprend également un objet options qui détaille l'élément dont notre élément personnalisé hérite : -<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre> +```js +customElements.define('expanding-list', ExpandingList, { extends: "ul" }); +``` -<p>L'utilisation de l'élément intégré dans un document web se présente également de façon quelque peu différente :</p> +L'utilisation de l'élément intégré dans un document web se présente également de façon quelque peu différente : -<pre class="brush: html"><ul is="expanding-list"> +```html +<ul is="expanding-list"> ... -</ul></pre> +</ul> +``` -<p>Vous utilisez l'élément <code><ul></code> comme d'habitude, mais vous spécifiez le nom de l'élément personnalisé dans l'attribut <code>is</code>.</p> +Vous utilisez l'élément `<ul>` comme d'habitude, mais vous spécifiez le nom de l'élément personnalisé dans l'attribut `is`. -<div class="note"> -<p><strong>Note :</strong> à nouveau, vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> complet ici.</p> -</div> +> **Note :** à nouveau, vous pouvez voir le [JavaScript source code](https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js) complet ici. -<h2 id="Utilisation_des_rappels_de_cycle_de_vie">Utilisation des rappels de cycle de vie</h2> +## Utilisation des rappels de cycle de vie -<p>Vous pouvez définir plusieurs rappels différents dans le constructeur d'un élément personnalisé, qui se déclenchent à différents points du cycle de vie de l'élément :</p> +Vous pouvez définir plusieurs rappels différents dans le constructeur d'un élément personnalisé, qui se déclenchent à différents points du cycle de vie de l'élément : -<ul> - <li>connectedCallback : appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document ;</li> - <li>disconnectedCallback : appelé lorsque l'élément personnalisé est déconnecté du DOM du document ;</li> - <li>adoptedCallback : appelé lorsque l'élément personnalisé est déplacé vers un nouveau document ;</li> - <li>attributeChangedCallback : appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</li> -</ul> +- connectedCallback : appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document ; +- disconnectedCallback : appelé lorsque l'élément personnalisé est déconnecté du DOM du document ; +- adoptedCallback : appelé lorsque l'élément personnalisé est déplacé vers un nouveau document ; +- attributeChangedCallback : appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié. -<p>Jetons un coup d'œil à un exemple de ceux-ci en cours d'utilisation. Le code ci-dessous est tiré de notre exemple de <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">rappels de cycle de vie</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">le voir s'exécuter en direct</a>). C'est un exemple trivial qui génère simplement un carré coloré de taille fixe sur la page. L'élément personnalisé ressemble à ceci :</p> +Jetons un coup d'œil à un exemple de ceux-ci en cours d'utilisation. Le code ci-dessous est tiré de notre exemple de [rappels de cycle de vie](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) ([le voir s'exécuter en direct](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)). C'est un exemple trivial qui génère simplement un carré coloré de taille fixe sur la page. L'élément personnalisé ressemble à ceci : -<pre class="brush: html"><custom-square l="100" c="red"></custom-square></pre> +```html +<custom-square l="100" c="red"></custom-square> +``` -<p>Le constructeur de classe est vraiment simple - ici, nous attachons un DOM à l'élément, puis nous attachons les éléments vides {{htmlelement("div")}} et {{htmlelement("style")}} à la racine fantôme :</p> +Le constructeur de classe est vraiment simple - ici, nous attachons un DOM à l'élément, puis nous attachons les éléments vides {{htmlelement("div")}} et {{htmlelement("style")}} à la racine fantôme : -<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'}); +```js +var shadow = this.attachShadow({mode: 'open'}); var div = document.createElement('div'); var style = document.createElement('style'); shadow.appendChild(style); -shadow.appendChild(div);</pre> +shadow.appendChild(div); +``` -<p>La fonction clé dans cet exemple est <code>updateStyle()</code> : elle prend un élément, récupère sa racine fantôme, retrouve son élément <code><style></code>, et ajoute {{cssxref("width")}}, {{cssxref("height")}}, et {{cssxref("background-color")}} au style.</p> +La fonction clé dans cet exemple est `updateStyle()` : elle prend un élément, récupère sa racine fantôme, retrouve son élément `<style>`, et ajoute {{cssxref("width")}}, {{cssxref("height")}}, et {{cssxref("background-color")}} au style. -<pre class="brush: js">function updateStyle(elem) { +```js +function updateStyle(elem) { var shadow = elem.shadowRoot; var childNodes = shadow.childNodes; - for(var i = 0; i < childNodes.length; i++) { + for(var i = 0; i < childNodes.length; i++) { if(childNodes[i].nodeName === 'STYLE') { childNodes[i].textContent = 'div {' + ' width: ' + elem.getAttribute('l') + 'px;' + @@ -214,38 +225,45 @@ shadow.appendChild(div);</pre> ' background-color: ' + elem.getAttribute('c'); } } -}</pre> +} +``` -<p>Les mises à jour réelles sont toutes gérées par les rappels du cycle de vie, qui sont placés dans le constructeur. Le <code>connectedCallback()</code> s'exécute quand l'élément est ajouté au DOM : ici, nous exécutons la fonction <code>updateStyle()</code> pour nous assurer que le carré est mis en forme comme défini dans ses attributs :</p> +Les mises à jour réelles sont toutes gérées par les rappels du cycle de vie, qui sont placés dans le constructeur. Le `connectedCallback()` s'exécute quand l'élément est ajouté au DOM : ici, nous exécutons la fonction `updateStyle()` pour nous assurer que le carré est mis en forme comme défini dans ses attributs : -<pre class="brush: js">connectedCallback() { +```js +connectedCallback() { console.log('Custom square element added to page.'); updateStyle(this); -}</pre> +} +``` -<p>Les rappels <code>disconnectedCallback()</code> et <code>adoptedCallback()</code> enregistrent des messages simples sur la console pour nous informer lorsque l'élément est supprimé du DOM ou déplacé vers une autre page :</p> +Les rappels `disconnectedCallback()` et `adoptedCallback()` enregistrent des messages simples sur la console pour nous informer lorsque l'élément est supprimé du DOM ou déplacé vers une autre page : -<pre class="brush: js">disconnectedCallback() { +```js +disconnectedCallback() { console.log('Custom square element removed from page.'); } adoptedCallback() { console.log('Custom square element moved to new page.'); -}</pre> +} +``` -<p>Le rappel <code>attributeChangedCallback()</code> est exécuté chaque fois que l'un des attributs de l'élément est modifié d'une façon ou d'une autre. Comme vous pouvez le voir à partir de ses propriétés, il est possible d'agir sur les attributs individuellement, en regardant leur nom ainsi que les anciennes et nouvelles valeurs des attributs. Dans ce cas cependant, nous exécutons juste la fonction <code>updateStyle()</code> pour nous assurer à nouveau que la mise en forme du carré est mise à jour selon les nouvelles valeurs :</p> +Le rappel `attributeChangedCallback()` est exécuté chaque fois que l'un des attributs de l'élément est modifié d'une façon ou d'une autre. Comme vous pouvez le voir à partir de ses propriétés, il est possible d'agir sur les attributs individuellement, en regardant leur nom ainsi que les anciennes et nouvelles valeurs des attributs. Dans ce cas cependant, nous exécutons juste la fonction `updateStyle()` pour nous assurer à nouveau que la mise en forme du carré est mise à jour selon les nouvelles valeurs : -<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) { +```js +attributeChangedCallback(name, oldValue, newValue) { console.log('Custom square element attributes changed.'); updateStyle(this); -}</pre> +} +``` -<p>Notez que, pour déclencher le rappel <code>attributeChangedCallback()</code> lorsqu'un attribut change, vous devez observer les attributs. Cela est réalisé en appelant le getter <code>observedAttributes()</code> dans le constructeur, en incluant à l'intérieur une instruction return qui retourne un tableau contenant les noms des attributs que vous voulez observer :</p> +Notez que, pour déclencher le rappel `attributeChangedCallback()` lorsqu'un attribut change, vous devez observer les attributs. Cela est réalisé en appelant le getter `observedAttributes()` dans le constructeur, en incluant à l'intérieur une instruction return qui retourne un tableau contenant les noms des attributs que vous voulez observer : -<pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre> +```js +static get observedAttributes() {return ['w', 'l']; } +``` -<p>Dans notre exemple, cela est mis au tout début du constructeur.</p> +Dans notre exemple, cela est mis au tout début du constructeur. -<div class="note"> -<p><strong>Note :</strong> vous pouvez trouver le <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> .</p> -</div> +> **Note :** vous pouvez trouver le [full JavaScript source](https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js) . diff --git a/files/fr/web/web_components/using_shadow_dom/index.md b/files/fr/web/web_components/using_shadow_dom/index.md index ca14a4ca77..0e83618219 100644 --- a/files/fr/web/web_components/using_shadow_dom/index.md +++ b/files/fr/web/web_components/using_shadow_dom/index.md @@ -9,85 +9,90 @@ tags: - shadow dom translation_of: Web/Web_Components/Using_shadow_DOM --- -<div>{{DefaultAPISidebar("Web Components")}}</div> +{{DefaultAPISidebar("Web Components")}} -<p>Un aspect important des composants web est l'encapsulation — être capable de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page tel que différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre. L'API Shadow DOM est un moyen d'y parvenir, fournissant une manière d'associer à un élément un DOM séparé et caché. Cet article couvre les bases de l'utilisation du DOM fantôme.</p> +Un aspect important des composants web est l'encapsulation — être capable de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page tel que différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre. L'API Shadow DOM est un moyen d'y parvenir, fournissant une manière d'associer à un élément un DOM séparé et caché. Cet article couvre les bases de l'utilisation du DOM fantôme. -<div class="note"> - <p><strong>Note :</strong> L'API Shadow DOM est supportée par défaut dans Firefox (63 et suivants), Chrome, Opera, et Safari. Le nouveau Edge basé sur Chromium (75 et suivants) le supportent aussi; le vieux Edge ne le supporte.</p> -</div> +> **Note :** L'API Shadow DOM est supportée par défaut dans Firefox (63 et suivants), Chrome, Opera, et Safari. Le nouveau Edge basé sur Chromium (75 et suivants) le supportent aussi; le vieux Edge ne le supporte. -<h2 id="high-level_view">Vue de haut niveau</h2> +## Vue de haut niveau -<p>Cet article suppose que vous êtes déjà familier avec le concept de <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> — une structure arborescente de nœuds connectés représentant les différents éléments et chaines de textes apparaissant dans un document balisé (généralement un document HTML dans le cas de documents web). Par exemple, considérez le fragment HTML suivant :</p> +Cet article suppose que vous êtes déjà familier avec le concept de [DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model/Introduction) — une structure arborescente de nœuds connectés représentant les différents éléments et chaines de textes apparaissant dans un document balisé (généralement un document HTML dans le cas de documents web). Par exemple, considérez le fragment HTML suivant : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Simple exemple de DOM</title> - </head> - <body> - <section> - <img src="dinosaur.png" alt="Un tyrannosaurus Rex rouge : un dinosaure bipède se tenant debout comme un humain, avec de petits bras et une large gueule à nombreuses dents tranchantes."> - <p>Nous ajouterons ici un lien vers la <a href="https://www.mozilla.org/">page d'accueil de Mozilla</a></p> - </section> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple exemple de DOM</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="Un tyrannosaurus Rex rouge : un dinosaure bipède se tenant debout comme un humain, avec de petits bras et une large gueule à nombreuses dents tranchantes."> + <p>Nous ajouterons ici un lien vers la <a href="https://www.mozilla.org/">page d'accueil de Mozilla</a></p> + </section> + </body> +</html> +``` -<p>Ce fragment produit la structure DOM suivante :</p> +Ce fragment produit la structure DOM suivante : -<p><img src="dom-screenshot.png"></p> + -<p>Le DOM fantôme permet à des arbres DOM cachés d'être associés à des éléments de l'arbre DOM principal — cet arbre DOM fantôme s'ouvre avec une racine fantôme placée sous n'importe quel élément voulu, de la même manière que dans le DOM normal.</p> +Le DOM fantôme permet à des arbres DOM cachés d'être associés à des éléments de l'arbre DOM principal — cet arbre DOM fantôme s'ouvre avec une racine fantôme placée sous n'importe quel élément voulu, de la même manière que dans le DOM normal. -<p><img alt="Version SVG du diagramme montrant l'interaction entre le document, la racine fantôme et l'hôte fantôme." src="shadowdom.svg"></p> + -<p>Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre :</p> +Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre : -<ul> - <li><strong>Hôte fantôme</strong> : le nœud du DOM principal auquel le DOM fantôme est associé.</li> - <li><strong>Arbre fantôme</strong> : l'arbre DOM au sein du DOM fantôme.</li> - <li><strong>Frontière fantôme</strong> : la limite où le DOM fantôme se termine et où le DOM principal commence.</li> - <li><strong>Racine fantôme</strong> : le nœud racine de l'arbre fantôme.</li> -</ul> +- **Hôte fantôme** : le nœud du DOM principal auquel le DOM fantôme est associé. +- **Arbre fantôme** : l'arbre DOM au sein du DOM fantôme. +- **Frontière fantôme** : la limite où le DOM fantôme se termine et où le DOM principal commence. +- **Racine fantôme** : le nœud racine de l'arbre fantôme. -<p>Vous pouvez affecter les nœuds du DOM fantôme exactement de la même manière que pour les nœuds du DOM principal — par exemple en leur ajoutant des éléments enfants ou en leur définissant des attributs, en stylisant des nœuds individuels au moyen de <code>element.style.propriete</code>, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>. La différence est que le code au sein du DOM fantôme ne peut affecter aucun élément en dehors de son arbre, permettant de mettre en œuvre une encapsulation très commode.</p> +Vous pouvez affecter les nœuds du DOM fantôme exactement de la même manière que pour les nœuds du DOM principal — par exemple en leur ajoutant des éléments enfants ou en leur définissant des attributs, en stylisant des nœuds individuels au moyen de `element.style.propriete`, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise [`<style>`](/fr/docs/Web/HTML/Element/style). La différence est que le code au sein du DOM fantôme ne peut affecter aucun élément en dehors de son arbre, permettant de mettre en œuvre une encapsulation très commode. -<p>Notez que le DOM fantôme n'est pas une nouvelle chose du tout — les navigateurs l'ont utilisé depuis longtemps pour encapsuler la structure interne d'un élément. Pensez par exemple à un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, avec les contrôles par défaut du navigateur apparents. Tout ce que vous voyez dans le DOM est l'élément <code><video></code>, mais il contient plusieurs boutons et autres contrôles au sein de son DOM fantôme. La spécification du DOM fantôme a été conçue de telle manière que vous êtes autorisés à manipuler le DOM fantôme de vos propres éléments personnalisés.</p> +Notez que le DOM fantôme n'est pas une nouvelle chose du tout — les navigateurs l'ont utilisé depuis longtemps pour encapsuler la structure interne d'un élément. Pensez par exemple à un élément [`<video>`](/fr/docs/Web/HTML/Element/video), avec les contrôles par défaut du navigateur apparents. Tout ce que vous voyez dans le DOM est l'élément `<video>`, mais il contient plusieurs boutons et autres contrôles au sein de son DOM fantôme. La spécification du DOM fantôme a été conçue de telle manière que vous êtes autorisés à manipuler le DOM fantôme de vos propres éléments personnalisés. -<h2 id="basic_usage">Usage basique</h2> +## Usage basique -<p>Vous pouvez associer une racine fantôme à tout élément en utilisant la méthode <a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a>. Elle prend en paramètres un objet d'options contenant une option — <code>mode</code> — ayant pour valeur <code>open</code> (ouvert) ou <code>closed</code> (fermé) :</p> +Vous pouvez associer une racine fantôme à tout élément en utilisant la méthode [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow). Elle prend en paramètres un objet d'options contenant une option — `mode` — ayant pour valeur `open` (ouvert) ou `closed` (fermé) : -<pre class="brush: js">let fantome = element.attachShadow({mode: 'open'}); -let fantome = element.attachShadow({mode: 'closed'});</pre> +```js +let fantome = element.attachShadow({mode: 'open'}); +let fantome = element.attachShadow({mode: 'closed'}); +``` -<p><code>open</code> signifie que vous pouvez accéder au DOM fantôme en utilisant du JavaScript écrit dans le contexte de la page principale, par exemple en utilisant la propriété <a href="/fr/docs/Web/API/ShadowRoot"><code>Element.shadowRoot</code></a> :</p> +`open` signifie que vous pouvez accéder au DOM fantôme en utilisant du JavaScript écrit dans le contexte de la page principale, par exemple en utilisant la propriété [`Element.shadowRoot`](/fr/docs/Web/API/ShadowRoot) : -<pre class="brush: js">let monDomFantome = monElementPerso.shadowRoot;</pre> +```js +let monDomFantome = monElementPerso.shadowRoot; +``` -<p>Si vous associez une racine fantôme à un élément personnalisé avec la propriété <code>mode</code> définie à <code>closed</code>, vous ne serez pas autorisé à accéder au DOM fantôme depuis l'extérieur — <code>monElementPerso.shadowRoot</code> retournera <code>null</code>. C'est le cas avec les éléments natifs contenant des DOM fantômes tels que <code><video></code>.</p> +Si vous associez une racine fantôme à un élément personnalisé avec la propriété `mode` définie à `closed`, vous ne serez pas autorisé à accéder au DOM fantôme depuis l'extérieur — `monElementPerso.shadowRoot` retournera `null`. C'est le cas avec les éléments natifs contenant des DOM fantômes tels que `<video>`. -<div class="note"> - <p><strong>Note :</strong> Comme montre <a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">cet article de blog</a> <small>(en anglais)</small>, il est actuellement assez simple de pénétrer les DOM fantômes fermés, et les cacher complètement n'en vaut souvent pas la peine.</p> -</div> +> **Note :** Comme montre [cet article de blog](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af) (en anglais), il est actuellement assez simple de pénétrer les DOM fantômes fermés, et les cacher complètement n'en vaut souvent pas la peine. -<p>Si vous voulez associer un DOM fantôme à un élément personnalisé en tant que partie de son constructeur (de loin la plus utile application du DOM fantôme), vous devriez utiliser quelque instruction comme :</p> +Si vous voulez associer un DOM fantôme à un élément personnalisé en tant que partie de son constructeur (de loin la plus utile application du DOM fantôme), vous devriez utiliser quelque instruction comme : -<pre class="brush: js">let shadow = this.attachShadow({mode: 'open'});</pre> +```js +let shadow = this.attachShadow({mode: 'open'}); +``` -<p>Lorsque vous avez associé un DOM fantôme à un élément, le manipuler consiste seulement à utiliser les API du DOM telles que vous les utilisez pour manipuler le DOM principal :</p> +Lorsque vous avez associé un DOM fantôme à un élément, le manipuler consiste seulement à utiliser les API du DOM telles que vous les utilisez pour manipuler le DOM principal : -<pre class="brush: js">let paragraph = document.createElement('p'); +```js +let paragraph = document.createElement('p'); shadow.appendChild(paragraph); -// etc.</pre> +// etc. +``` -<h2 id="working_through_a_simple_example">Démonstration au travers d'un exemple simple</h2> +## Démonstration au travers d'un exemple simple -<p>Maintenant, visitons un exemple simple pour faire une démonstration du DOM fantôme en action au sein d'un élément personnalisé — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component"><popup-info-box></a></code> (en voir aussi un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple dynamique</a>). Il prend une icône et une chaîne de caractères et intègre l'image dans la page. Quand l'icône obtient l'attention (<code>:focus</code>), le texte s'affiche dans une fenêtre indépendante pour fournir plus d'informations contextuelles. Pour commencer, nous définissons dans notre fichier JavaScript une classe appelée <code>PopUpInfo</code>, qui étend <code>HTMLElement</code> :</p> +Maintenant, visitons un exemple simple pour faire une démonstration du DOM fantôme en action au sein d'un élément personnalisé — [`<popup-info-box>`](https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component) (en voir aussi un [exemple dynamique](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)). Il prend une icône et une chaîne de caractères et intègre l'image dans la page. Quand l'icône obtient l'attention (`:focus`), le texte s'affiche dans une fenêtre indépendante pour fournir plus d'informations contextuelles. Pour commencer, nous définissons dans notre fichier JavaScript une classe appelée `PopUpInfo`, qui étend `HTMLElement` : -<pre class="brush: js">class PopUpInfo extends HTMLElement { +```js +class PopUpInfo extends HTMLElement { constructor() { // Toujours appeler super en premier dans le constructeur super(); @@ -96,22 +101,26 @@ shadow.appendChild(paragraph); ... } -}</pre> +} +``` -<p>Au sein de la définition de la classe, nous créons le constructeur de l'élément, qui définit toutes les fonctionnalités que l'élément aura lorsqu'une instance est créée.</p> +Au sein de la définition de la classe, nous créons le constructeur de l'élément, qui définit toutes les fonctionnalités que l'élément aura lorsqu'une instance est créée. -<h3 id="creating_the_shadow_root">Créer la racine fantôme</h3> +### Créer la racine fantôme -<p>Nous associons d'abord une racine fantôme à l'élément personnalisé :</p> +Nous associons d'abord une racine fantôme à l'élément personnalisé : -<pre class="brush: js">// Créer une racine fantôme -let fantome = this.attachShadow({mode: 'open'});</pre> +```js +// Créer une racine fantôme +let fantome = this.attachShadow({mode: 'open'}); +``` -<h3 id="creating_the_shadow_dom_structure">Créer la structure du DOM fantôme</h3> +### Créer la structure du DOM fantôme -<p class="brush: js">Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément :</p> +Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément : -<pre class="brush: js">// Créer les <span> +```js +// Créer les <span> let wrapper = document.createElement('span'); wrapper.setAttribute('class','wrapper'); let icon = document.createElement('span'); @@ -133,13 +142,15 @@ if(this.hasAttribute('img')) { } let img = document.createElement('img'); img.src = imgUrl; -icon.appendChild(img);</pre> +icon.appendChild(img); +``` -<h3 id="styling_the_shadow_dom">Styliser le DOM fantôme</h3> +### Styliser le DOM fantôme -<p class="brush: js">Après cela, nous créons un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> et nous ajoutons du CSS pour personnaliser notre arbre DOM :</p> +Après cela, nous créons un élément [`<style>`](/fr/docs/Web/HTML/Element/style) et nous ajoutons du CSS pour personnaliser notre arbre DOM : -<pre class="brush: js">// Créer quelque CSS à appliquer au dom fantôme +```js +// Créer quelque CSS à appliquer au dom fantôme let style = document.createElement('style'); style.textContent = ` @@ -169,49 +180,56 @@ img { .icon:hover + .info, .icon:focus + .info { opacity: 1; -}`;</pre> +}`; +``` -<h3 id="attaching_the_shadow_dom_to_the_shadow_root">Associer le DOM fantôme à la racine fantôme</h3> +### Associer le DOM fantôme à la racine fantôme -<p>L'étape finale est d'associer tous les éléments créés à la racine fantôme :</p> +L'étape finale est d'associer tous les éléments créés à la racine fantôme : -<pre class="brush: js">// Associer les éléments créés au dom fantôme +```js +// Associer les éléments créés au dom fantôme shadow.appendChild(style); shadow.appendChild(wrapper); wrapper.appendChild(icon); -wrapper.appendChild(info);</pre> +wrapper.appendChild(info); +``` -<h3 id="using_our_custom_element">Utiliser notre élément personnalisé</h3> +### Utiliser notre élément personnalisé -<p>Une fois que la classe est définie, utiliser l'élément est aussi simple que de le définir, et l'ajouter sur la page, comme expliqué dans <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a> :</p> +Une fois que la classe est définie, utiliser l'élément est aussi simple que de le définir, et l'ajouter sur la page, comme expliqué dans [Utiliser les éléments personnalisés](/fr/docs/Web/Web_Components/Using_custom_elements) : -<pre class="brush: js">// Définit le nouvel élément -customElements.define('popup-info', PopUpInfo);</pre> +```js +// Définit le nouvel élément +customElements.define('popup-info', PopUpInfo); +``` -<pre class="brush: html"><popup-info img="img/alt.png" text="Le code de validation de votre carte (CVC) est un élément de sécurité - supplémentaire. Il s'agit des 3 ou 4 derniers chiffres figurant au dos de votre carte."></pre> +```html +<popup-info img="img/alt.png" text="Le code de validation de votre carte (CVC) est un élément de sécurité + supplémentaire. Il s'agit des 3 ou 4 derniers chiffres figurant au dos de votre carte."> +``` -<h3 id="internal_versus_external_styles">Styles internes ou styles externes</h3> +### Styles internes ou styles externes -<p>Dans l'exemple précédent, nous appliquons du style au DOM fantôme en utilisant l'élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>, mais il est parfaitement possible de le faire en référençant une feuille de style externe avec un élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> si vous le préférez.</p> +Dans l'exemple précédent, nous appliquons du style au DOM fantôme en utilisant l'élément [`<style>`](/fr/docs/Web/HTML/Element/style), mais il est parfaitement possible de le faire en référençant une feuille de style externe avec un élément [`<link>`](/fr/docs/Web/HTML/Element/link) si vous le préférez. -<p>Par exemple, regardez ce code tiré de l'exemple <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> (voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">code source</a>) :</p> +Par exemple, regardez ce code tiré de l'exemple [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) (voir le [code source](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js)) : -<pre class="brush: js">// Appliquer les styles externes au dom fantôme +```js +// Appliquer les styles externes au dom fantôme const linkElem = document.createElement('link'); linkElem.setAttribute('rel', 'stylesheet'); linkElem.setAttribute('href', 'style.css'); // Associer l'élément créé au dom fantôme -shadow.appendChild(linkElem);</pre> +shadow.appendChild(linkElem); +``` -<p>Notez que les éléments <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> ne bloquent pas la peinture de la racine fantôme, donc il pourrait y avoir une latence où le contenu serait sans style (FOUC) pendant que la feuille de style se charge.</p> +Notez que les éléments [`<link>`](/fr/docs/Web/HTML/Element/link) ne bloquent pas la peinture de la racine fantôme, donc il pourrait y avoir une latence où le contenu serait sans style (FOUC) pendant que la feuille de style se charge. -<p>De nombreux navigateurs modernes implantent une optimisation pour les balises <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> clonées depuis un nœud commun ou qui ont des contenus identiques à fin de leur permettre de partager une unique liste de retour. Avec cette optimisation, la performance des styles externes et internes doivent être similaires.</p> +De nombreux navigateurs modernes implantent une optimisation pour les balises [`<style>`](/fr/docs/Web/HTML/Element/style) clonées depuis un nœud commun ou qui ont des contenus identiques à fin de leur permettre de partager une unique liste de retour. Avec cette optimisation, la performance des styles externes et internes doivent être similaires. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a></li> - <li><a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (templates) et les emplacements (slots)</a></li> -</ul> +- [Utiliser les éléments personnalisés](/fr/docs/Web/Web_Components/Using_custom_elements) +- [Utiliser les modèles (templates) et les emplacements (slots)](/fr/docs/Web/Web_Components/Using_templates_and_slots) diff --git a/files/fr/web/web_components/using_templates_and_slots/index.md b/files/fr/web/web_components/using_templates_and_slots/index.md index 60a1052b93..c9659d17e6 100644 --- a/files/fr/web/web_components/using_templates_and_slots/index.md +++ b/files/fr/web/web_components/using_templates_and_slots/index.md @@ -4,37 +4,37 @@ slug: Web/Web_Components/Using_templates_and_slots translation_of: Web/Web_Components/Using_templates_and_slots original_slug: Web/Web_Components/Utilisation_des_templates_et_des_slots --- -<div>{{DefaultAPISidebar("Web Components")}}</div> +{{DefaultAPISidebar("Web Components")}} -<p>Cet article explique comment utiliser les éléments <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> et <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> pour créer un modèle (<i lang="en">template</i>) flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant web.</p> +Cet article explique comment utiliser les éléments [`<template>`](/fr/docs/Web/HTML/Element/template) et [`<slot>`](/fr/docs/Web/HTML/Element/slot) pour créer un modèle (<i lang="en">template</i>) flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant web. -<h2 id="la_vérité_sur_les_modèles">La vérité sur les modèmes</h2> +## La vérité sur les modèmes -<p>Lorsqu'une structure de balises se répète sur une page web, il est judicieux d'utiliser un modèle plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> (pris en charge par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript.</p> +Lorsqu'une structure de balises se répète sur une page web, il est judicieux d'utiliser un modèle plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML [`<template>`](/fr/docs/Web/HTML/Element/template) (pris en charge par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript. -<p>Voyons un exemple simple :</p> +Voyons un exemple simple : -<pre class="brush: html"> -<template id="my-paragraph"> - <p>My paragraph</p> -</template> -</pre> +```html +<template id="my-paragraph"> + <p>My paragraph</p> +</template> +``` -<p>Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple :</p> +Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple : -<pre class="brush: js"> +```js let template = document.getElementById('my-paragraph'); let templateContent = template.content; document.body.appendChild(templateContent); -</pre> +``` -<p>Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des modèles.</p> +Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des modèles. -<h2 id="accorder_modèles_et_composants_web">Accorder modèles et composants web</h2> +## Accorder modèles et composants web -<p>Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons <code><my-paragraph></code> :</p> +Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons `<my-paragraph>` : -<pre class="brush: js"> +```js customElements.define('my-paragraph', class extends HTMLElement { constructor() { @@ -45,102 +45,95 @@ customElements.define('my-paragraph', const shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(templateContent.cloneNode(true)); } -})</pre> +}) +``` -<p>Le point important à noter est que l'on ajoute un clone du contenu du modèle à la racine du DOM, créé à l'aide de la méthode <a href="/fr/docs/Web/API/Node/cloneNode"><code>Node.cloneNode()</code></a>.</p> +Le point important à noter est que l'on ajoute un clone du contenu du modèle à la racine du DOM, créé à l'aide de la méthode [`Node.cloneNode()`](/fr/docs/Web/API/Node/cloneNode). -<p>Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mise en forme à l'intérieur de l'élément <code><template></code> dans d'un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>, qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard.</p> +Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mise en forme à l'intérieur de l'élément `<template>` dans d'un élément [`<style>`](/fr/docs/Web/HTML/Element/style), qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard. -<p>Par exemple :</p> +Par exemple : -<pre class="brush: html"> -<template id="my-paragraph"> - <style> +```html +<template id="my-paragraph"> + <style> p { color: white; background-color: #666; padding: 5px; } - </style> - <p>My paragraph</p> -</template> -</pre> + </style> + <p>My paragraph</p> +</template> +``` -<p>On peut maintenent utiliser le modèle dans le document HTML:</p> +On peut maintenent utiliser le modèle dans le document HTML: -<pre class="brush: html"> -<my-paragraph></my-paragraph> -</pre> +```html +<my-paragraph></my-paragraph> +``` -<div class="note"> -<p><strong>Note :</strong> Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70).</p> -</div> +> **Note :** Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70). -<h2 id="plus_de_flexibilité_avec_les_slots">Plus de flexibilité avec les slots</h2> +## Plus de flexibilité avec les slots -<p>Jusque-là, nous avons vu une première utilisation de l'élément <code><template></code>. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>. Cette fonction est moins bien prise en charge que <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>, disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79.</p> +Jusque-là, nous avons vu une première utilisation de l'élément `<template>`. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à [`<slot>`](/fr/docs/Web/HTML/Element/slot). Cette fonction est moins bien prise en charge que [`<template>`](/fr/docs/Web/HTML/Element/template), disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79. -<p>Les emplacements (<i lang="en">slots</i>) sont identifiés par leur attribut <code>name</code>, et permettent de définir des emplacements dans le modèle qui peuvent être alimentés avec n'importe quelle structure HTML.</p> +Les emplacements (<i lang="en">slots</i>) sont identifiés par leur attribut `name`, et permettent de définir des emplacements dans le modèle qui peuvent être alimentés avec n'importe quelle structure HTML. -<p>Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon :</p> +Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon : -<pre class="brush: html"> -<p><slot name="my-text">Texte par défaut</slot></p> -</pre> +```html +<p><slot name="my-text">Texte par défaut</slot></p> +``` -<p>Si le contenu de l'emplacement n'est pas défini quand l'élément est inclus dans la page, ou si les emplacements ne sont pas pris en charge par le navigateur, <code><my-paragraph></code> contiendra simplement le texte statique précisé dans le modèle.</p> +Si le contenu de l'emplacement n'est pas défini quand l'élément est inclus dans la page, ou si les emplacements ne sont pas pris en charge par le navigateur, `<my-paragraph>` contiendra simplement le texte statique précisé dans le modèle. -<p>Pour définir le contenu de l'emplacement, on insère une structure HTML dans <code><my-paragraph></code> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#slot"><code>slot</code></a> dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple :</p> +Pour définir le contenu de l'emplacement, on insère une structure HTML dans `<my-paragraph>` avec un attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple : -<pre class="brush: html"> -<my-paragraph> - <span slot="my-text">Voici un autre texte&nbsp;!</span> -</my-paragraph> -</pre> +```html +<my-paragraph> + <span slot="my-text">Voici un autre texte !</span> +</my-paragraph> +``` -<p>ou</p> +ou -<pre class="brush: html"> -<my-paragraph> - <ul slot="my-text"> - <li>Voici un autre texte&nbsp;!</li> - <li>dans une liste!</li> - </ul> -</my-paragraph> -</pre> +```html +<my-paragraph> + <ul slot="my-text"> + <li>Voici un autre texte !</li> + <li>dans une liste!</li> + </ul> +</my-paragraph> +``` -<div class="note"> - <p><strong>Note :</strong> Un élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> sans nom sera rempli avec l'ensemble des nœuds-fils de plus haut niveau de l'élément personnalisé qui n'ont pas d'attribut <a href="/fr/docs/Web/HTML/Global_attributes#slot"><code>slot</code></a>. Cela inclut les nœuds texte.</p> -</div> +> **Note :** Un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) sans nom sera rempli avec l'ensemble des nœuds-fils de plus haut niveau de l'élément personnalisé qui n'ont pas d'attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot). Cela inclut les nœuds texte. -<p>Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les emplacements, vous pouvez <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">voir la page sur GitHub</a> (voir aussi <a href="https://mdn.github.io/web-components-examples/simple-template/">le résultat</a>).</p> +Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les emplacements, vous pouvez [voir la page sur GitHub](https://github.com/mdn/web-components-examples/tree/master/simple-template) (voir aussi [le résultat](https://mdn.github.io/web-components-examples/simple-template/)). -<h2 id="un_exemple_plus_complexe">Un exemple plus complexe</h2> +## Un exemple plus complexe -<p>Pour finir, voyons un exemple un peu moins trivial.</p> +Pour finir, voyons un exemple un peu moins trivial. -<p>L'ensemble de fragments de code qui suit illustre comment utiliser <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> avec <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> et un peu de JavaScript afin de :</p> +L'ensemble de fragments de code qui suit illustre comment utiliser [`<slot>`](/fr/docs/Web/HTML/Element/slot) avec [`<template>`](/fr/docs/Web/HTML/Element/template) et un peu de JavaScript afin de : -<ul> - <li>Créer un élément <strong><code><element-details></code></strong> avec des <a href="/fr/docs/Web/HTML/Element/slot#named-slot">emplacements nommés</a> à <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle (<code>ShadowRoot</code>)</a></li> - <li>Concevoir l'élément <strong><code><element-details></code></strong> afin que, lorsqu'il est utilisé dans les documents, il soit rendu en composant le contenu de l'élément avec le contenu de <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a>. Autrement dit, les parties du contenu de l'élément seront utilisées afin de remplir <a href="/fr/docs/Web/HTML/Element/slot#named-slot">les emplacements nommés</a> dans sa <a href="/fr/docs/Web/API/ShadowRoot">racine virtuelle</a></li> -</ul> +- Créer un élément **`<element-details>`** avec des [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) à [la racine virtuelle (`ShadowRoot`)](/fr/docs/Web/API/ShadowRoot) +- Concevoir l'élément **`<element-details>`** afin que, lorsqu'il est utilisé dans les documents, il soit rendu en composant le contenu de l'élément avec le contenu de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, les parties du contenu de l'élément seront utilisées afin de remplir [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) dans sa [racine virtuelle](/fr/docs/Web/API/ShadowRoot) -<p>Il est techniquement possible d'utiliser un élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> sans élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> (par exemple au sein d'un <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> classique) tout en tirant parti des fonctionnalités d'emplacement fournies par <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> pour le contenu du Shadow DOM. On peut ainsi éviter d'avoir à d'abord accéder à la propriété <code>content</code> du modèle (et de la cloner). Toutefois, il est souvent plus pratique d'ajouter des emplacements au sein d'un élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>, car il est peu probable de définir un composant à partir d'un élément déjà rendu.</p> +Il est techniquement possible d'utiliser un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) sans élément [`<template>`](/fr/docs/Web/HTML/Element/template) (par exemple au sein d'un [`<div>`](/fr/docs/Web/HTML/Element/div) classique) tout en tirant parti des fonctionnalités d'emplacement fournies par [`<slot>`](/fr/docs/Web/HTML/Element/slot) pour le contenu du Shadow DOM. On peut ainsi éviter d'avoir à d'abord accéder à la propriété `content` du modèle (et de la cloner). Toutefois, il est souvent plus pratique d'ajouter des emplacements au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template), car il est peu probable de définir un composant à partir d'un élément déjà rendu. -<p>De plus, même si l'élément n'est pas déjà rendu, le rôle de conteneur porté par le modèle sera sémantiquement plus clair en utilisant <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>. De plus, <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> peut avoir des éléments qui lui sont directement rattachés comme <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>. Ce même élément disparaîtrait s'il était ajouté à un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>.</p> +De plus, même si l'élément n'est pas déjà rendu, le rôle de conteneur porté par le modèle sera sémantiquement plus clair en utilisant [`<template>`](/fr/docs/Web/HTML/Element/template). De plus, [`<template>`](/fr/docs/Web/HTML/Element/template) peut avoir des éléments qui lui sont directement rattachés comme [`<td>`](/fr/docs/Web/HTML/Element/td). Ce même élément disparaîtrait s'il était ajouté à un élément [`<div>`](/fr/docs/Web/HTML/Element/div). -<div class="note"> -<p><strong>Note :</strong> Vous pourrez retrouver l'exemple complet sur <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">le dépôt GitHub pour element-details</a> (voir également <a href="https://mdn.github.io/web-components-examples/element-details/">le résultat en action</a>).</p> -</div> +> **Note :** Vous pourrez retrouver l'exemple complet sur [le dépôt GitHub pour element-details](https://github.com/mdn/web-components-examples/tree/master/element-details) (voir également [le résultat en action](https://mdn.github.io/web-components-examples/element-details/)). -<h3 id="créer_un_modèle_avec_des_emplacements">Créer un modèle avec des emplacements</h3> +### Créer un modèle avec des emplacements -<p>Tout d'abord, on utilise l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> au sein d'un élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> afin de créer notre nouveau <a href="/fr/docs/Web/API/DocumentFragment">fragment de document</a> "element-details-template" qui contient quelques <a href="/fr/docs/Web/HTML/Element/slot#named-slot">emplacements nommés</a> :</p> +Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template) afin de créer notre nouveau [fragment de document](/fr/docs/Web/API/DocumentFragment) "element-details-template" qui contient quelques [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : -<pre class="brush: html"> -<template id="element-details-template"> - <style> +```html +<template id="element-details-template"> + <style> details {font-family: "Open Sans Light",Helvetica,Arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } @@ -149,42 +142,39 @@ customElements.define('my-paragraph', h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } - </style> - <details> - <summary> - <span> - <code class="name">&lt;<slot name="element-name">BESOIN D'UN NOM</slot>&gt;</code> - <i class="desc"><slot name="description">BESOIN D'UNE DESCRIPTION</slot></i> - </span> - </summary> - <div class="attributes"> - <h4><span>Attributs</span></h4> - <slot name="attributes"><p>Aucun</p></slot> - </div> - </details> - <hr> -</template> -</pre> - -<p>Voyons les caractéristiques de cet élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> :</p> - -<ul> - <li>Ce <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> contient un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> avec un ensemble de règles CSS dont la portée est celle du fragment de document créé par l'élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>.</li> - <li>Ce <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> utilise un élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a> et l'attribut <a href="/fr/docs/Web/HTML/Element/slot#attr-name"><code>name</code></a> correspondant afin d'avoir trois <a href="/fr/docs/Web/HTML/Element/slot#named-slot">emplacements nommés</a> : - <ul> - <li><code><slot name="element-name"></code></li> - <li><code><slot name="description"></code></li> - <li><code><slot name="attributes"></code></li> - </ul> - </li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> intègre les <a href="/fr/docs/Web/HTML/Element/slot#named-slot">emplacements nommés slots</a> dans un élément <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a>.</li> -</ul> - -<h3 id="créer_un_nouvel_élément_element-details_avec_le_modèle">Créer un nouvel élément element-details avec le modèle</h3> - -<p>Ensuite, voyons comment créer un nouvel élément personnalisé, intitulé <strong><code><element-details></code></strong>, et comment utiliser <a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow</code></a> pour lui rattacher, comme <a href="/fr/docs/Web/API/ShadowRoot">racine virtuelle</a>, le fragment de document créé avec l'élément <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a> ci-dessus. Pour cela, on utilisera la même méthode qu'avec notre exemple plus simple.</p> - -<pre class="brush: js"> + </style> + <details> + <summary> + <span> + <code class="name"><<slot name="element-name">BESOIN D'UN NOM</slot>></code> + <i class="desc"><slot name="description">BESOIN D'UNE DESCRIPTION</slot></i> + </span> + </summary> + <div class="attributes"> + <h4><span>Attributs</span></h4> + <slot name="attributes"><p>Aucun</p></slot> + </div> + </details> + <hr> +</template> +``` + +Voyons les caractéristiques de cet élément [`<template>`](/fr/docs/Web/HTML/Element/template) : + +- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) contient un élément [`<style>`](/fr/docs/Web/HTML/Element/style) avec un ensemble de règles CSS dont la portée est celle du fragment de document créé par l'élément [`<template>`](/fr/docs/Web/HTML/Element/template). +- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) utilise un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) et l'attribut [`name`](/fr/docs/Web/HTML/Element/slot#attr-name) correspondant afin d'avoir trois [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : + + - `<slot name="element-name">` + - `<slot name="description">` + - `<slot name="attributes">` + +- L'élément [`<template>`](/fr/docs/Web/HTML/Element/template) intègre les [emplacements nommés slots](/fr/docs/Web/HTML/Element/slot#named-slot) dans un élément [`<details>`](/fr/docs/Web/HTML/Element/details). + +### Créer un nouvel élément element-details avec le modèle + +Ensuite, voyons comment créer un nouvel élément personnalisé, intitulé **`<element-details>`**, et comment utiliser [`Element.attachShadow`](/fr/docs/Web/API/Element/attachShadow) pour lui rattacher, comme [racine virtuelle](/fr/docs/Web/API/ShadowRoot), le fragment de document créé avec l'élément [`<template>`](/fr/docs/Web/HTML/Element/template) ci-dessus. Pour cela, on utilisera la même méthode qu'avec notre exemple plus simple. + +```js customElements.define('element-details', class extends HTMLElement { constructor() { @@ -197,90 +187,88 @@ customElements.define('element-details', } } ); -</pre> +``` -<h3 id="utiliser_l_élément_element-details_avec_les_emplacements_nommés">Utiliser l'élément element-details avec les emplacements nommés</h3> +### Utiliser l'élément element-details avec les emplacements nommés -<p>Prenons maintenant un élément <strong><code><element-details></code></strong> et utilisons le dans notre document :</p> +Prenons maintenant un élément **`<element-details>`** et utilisons le dans notre document : -<pre class="brush: html"> -<element-details> - <span slot="element-name">slot</span> - <span slot="description">Un emplacement dans un +```html +<element-details> + <span slot="element-name">slot</span> + <span slot="description">Un emplacement dans un composant web que les utilisateurs pourront remplir avec leur propre contenu pour composer plusieurs - arbres DOM ensemble.</span> - <dl slot="attributes"> - <dt>name</dt> - <dd>Le nom de l'emplacement.</dd> - </dl> -</element-details> - -<element-details> - <span slot="element-name">template</span> - <span slot="description">Un mécanisme pour stocker + arbres DOM ensemble.</span> + <dl slot="attributes"> + <dt>name</dt> + <dd>Le nom de l'emplacement.</dd> + </dl> +</element-details> + +<element-details> + <span slot="element-name">template</span> + <span slot="description">Un mécanisme pour stocker du contenu côté client qui n'est pas affiché lorsque la page est chargée mais lors de l'exécution avec du code - JavaScript.</span> -</element-details> -</pre> + JavaScript.</span> +</element-details> +``` -<p>En voyant ce fragment, notons quelques points :</p> +En voyant ce fragment, notons quelques points : -<ul> - <li>Ce fragment contient deux exemplaires <strong><code><element-details></code></strong> qui utilisent tous les deux l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#slot"><code>slot</code></a> afin de référencer <a href="/fr/docs/Web/HTML/Element/slot#named-slot">les emplacements nommés</a> <code>"element-name"</code> et <code>"description"</code> qui sont inscrits dans <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a> <code><element-details></code>.</li> - <li>Seul le premier élément <strong><code><element-details></code></strong> fait référence à <a href="/fr/docs/Web/HTML/Element/slot#named-slot">l'emplacement nommé</a> <code>"attributes"</code>. Le deuxième élément <code><strong><element-details</strong>></code> n'y fait pas référence.</li> - <li>Le premier élément <code><<strong>element-details></strong></code> fait référence à <a href="/fr/docs/Web/HTML/Element/slot#named-slot">l'emplacement nommé</a> <code>"attributes"</code> en utilisant un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> contenant comme enfants un élément <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>.</li> -</ul> +- Ce fragment contient deux exemplaires **`<element-details>`** qui utilisent tous les deux l'attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) afin de référencer [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) `"element-name"` et `"description"` qui sont inscrits dans [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) `<element-details>`. +- Seul le premier élément **`<element-details>`** fait référence à [l'emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) `"attributes"`. Le deuxième élément `<element-details>` n'y fait pas référence. +- Le premier élément `<element-details>` fait référence à [l'emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) `"attributes"` en utilisant un élément [`<dl>`](/fr/docs/Web/HTML/Element/dl) contenant comme enfants un élément [`<dt>`](/fr/docs/Web/HTML/Element/dt) et un élément [`<dd>`](/fr/docs/Web/HTML/Element/dd). -<h3 id="mettre_le_tout_en_forme">Mettre le tout en forme</h3> +### Mettre le tout en forme -<p>Pour finir, ajoutons un peu de CSS pour les éléments <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>, <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> et <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> de notre document :</p> +Pour finir, ajoutons un peu de CSS pour les éléments [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt) et [`<dd>`](/fr/docs/Web/HTML/Element/dd) de notre document : -<pre class="brush: css"> +```css dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: Consolas, "Liberation Mono", Courier } dd { margin-left: 16px } -</pre> +``` -<pre class="brush: css hidden">body { margin-top: 47px }</pre> +```css hidden +body { margin-top: 47px } +``` -<h3 id="résultat">Résultat</h3> +### Résultat -<p>Assemblons l'ensemble des fragments pour voir le résultat final.</p> +Assemblons l'ensemble des fragments pour voir le résultat final. -<p>{{ EmbedLiveSample('exemple_complet', '300','400','element-details.png','') }}</p> +{{ EmbedLiveSample('exemple_complet', '300','400','element-details.png','') }} -<p>Quelques notes à propos du résultat affiché :</p> +Quelques notes à propos du résultat affiché : -<ul> - <li>Bien que les exemplaires des éléments <strong><code><element-details></code></strong> du document n'utilisent pas directement d'élément <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a>, ils sont rendus comme celui-ci, car <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a> <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a> les peuple avec ceci.</li> - <li>Au sein de l'élément <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a> affiché, le contenu des éléments <strong><code><element-details></code></strong> remplit <a href="/fr/docs/Web/HTML/Element/slot#named-slot">les emplacements nommés</a> de <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a>. Autrement dit, l'arbre du DOM pour les éléments <strong><code><element-details></code></strong> est composé avec le contenu <a href="/fr/docs/Web/API/ShadowRoot">de la racine virtuelle</a>.</li> - <li>Pour les deux éléments <strong><code><element-details></code></strong>, un titre <strong>Attributs</strong> est automatiquement ajouté à partir de <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a> avant la position de l'emplacement nommé <code>"attributes"</code>.</li> - <li>Étant donné que le premier élément <strong><code><element-details></code></strong> possède un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> qui référence explicitement <a href="/fr/docs/Web/HTML/Element/slot#named-slot">l'emplacement nommé</a> <code>"attributes"</code> depuis <a href="/fr/docs/Web/API/ShadowRoot">sa racine virtuelle</a>, les contenus de <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> remplacent l'emplacement nommé <code>"attributes"</code> de <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a>.</li> - <li>Comme le second élément <strong><code><element-details></code></strong> ne fait pas explicitement référence à l'emplacement nommé <code>"attributes"</code> depuis <a href="/fr/docs/Web/API/ShadowRoot">sa racine virtuelle</a>, le contenu de cet <a href="/fr/docs/Web/HTML/Element/slot#named-slot">emplacement nommé</a> est rempli avec le contenu par défaut fourni par <a href="/fr/docs/Web/API/ShadowRoot">la racine virtuelle</a>.</li> -</ul> +- Bien que les exemplaires des éléments **`<element-details>`** du document n'utilisent pas directement d'élément [`<details>`](/fr/docs/Web/HTML/Element/details), ils sont rendus comme celui-ci, car [`<details>`](/fr/docs/Web/HTML/Element/details) [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) les peuple avec ceci. +- Au sein de l'élément [`<details>`](/fr/docs/Web/HTML/Element/details) affiché, le contenu des éléments **`<element-details>`** remplit [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, l'arbre du DOM pour les éléments **`<element-details>`** est composé avec le contenu [de la racine virtuelle](/fr/docs/Web/API/ShadowRoot). +- Pour les deux éléments **`<element-details>`**, un titre **Attributs** est automatiquement ajouté à partir de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) avant la position de l'emplacement nommé `"attributes"`. +- Étant donné que le premier élément **`<element-details>`** possède un élément [`<dl>`](/fr/docs/Web/HTML/Element/dl) qui référence explicitement [l'emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) `"attributes"` depuis [sa racine virtuelle](/fr/docs/Web/API/ShadowRoot), les contenus de [`<dl>`](/fr/docs/Web/HTML/Element/dl) remplacent l'emplacement nommé `"attributes"` de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). +- Comme le second élément **`<element-details>`** ne fait pas explicitement référence à l'emplacement nommé `"attributes"` depuis [sa racine virtuelle](/fr/docs/Web/API/ShadowRoot), le contenu de cet [emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) est rempli avec le contenu par défaut fourni par [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). +##### Exemple complet -<h5 id="exemple_complet">Exemple complet</h5> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>slot example</title> - <style> +```html +<!DOCTYPE html> +<html> + <head> + <title>slot example</title> + <style> dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: Consolas, "Liberation Mono", Courier } dd { margin-left: 16px } - </style> - </head> - <body> - <template id="element-details-template"> - <style> + </style> + </head> + <body> + <template id="element-details-template"> + <style> details {font-family: "Open Sans Light",Helvetica,Arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } @@ -289,43 +277,43 @@ dd { margin-left: 16px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } - </style> - <details> - <summary> - <span> - <code class="name">&lt;<slot name="element-name">BESOIN D'UN NOM</slot>&gt;</code> - <i class="desc"><slot name="description">BESOIN D'UNE DESCRIPTION</slot></i> - </span> - </summary> - <div class="attributes"> - <h4><span>Attributs</span></h4> - <slot name="attributes"><p>Aucun</p></slot> - </div> - </details> - <hr> - </template> - - <element-details> - <span slot="element-name">slot</span> - <span slot="description">Un emplacement dans un + </style> + <details> + <summary> + <span> + <code class="name"><<slot name="element-name">BESOIN D'UN NOM</slot>></code> + <i class="desc"><slot name="description">BESOIN D'UNE DESCRIPTION</slot></i> + </span> + </summary> + <div class="attributes"> + <h4><span>Attributs</span></h4> + <slot name="attributes"><p>Aucun</p></slot> + </div> + </details> + <hr> + </template> + + <element-details> + <span slot="element-name">slot</span> + <span slot="description">Un emplacement dans un composant web que les utilisateurs pourront remplir avec leur propre contenu pour composer plusieurs - arbres DOM ensemble.</span> - <dl slot="attributes"> - <dt>name</dt> - <dd>Le nom de l'emplacement.</dd> - </dl> - </element-details> - - <element-details> - <span slot="element-name">template</span> - <span slot="description">Un mécanisme pour stocker + arbres DOM ensemble.</span> + <dl slot="attributes"> + <dt>name</dt> + <dd>Le nom de l'emplacement.</dd> + </dl> + </element-details> + + <element-details> + <span slot="element-name">template</span> + <span slot="description">Un mécanisme pour stocker du contenu côté client qui n'est pas affiché lorsque la page est chargée mais lors de l'exécution avec du code - JavaScript.</span> - </element-details> + JavaScript.</span> + </element-details> - <script> + <script> customElements.define('element-details', class extends HTMLElement { constructor() { @@ -337,7 +325,7 @@ dd { margin-left: 16px } .appendChild(template.cloneNode(true)); } }) - </script> - </body> -</html></pre> -</div> + </script> + </body> +</html> +``` |