aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/web_components
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-11 08:41:41 +0100
committerGitHub <noreply@github.com>2021-11-11 08:41:41 +0100
commitc63c8a7781c9e13c36fcdc56dc4d81de8a925204 (patch)
tree77c69c31f4978b2ae4f48cebc059fcb3553cfb3c /files/fr/web/web_components
parent1c856577d5b2647641006f73cbe274d2df95956c (diff)
downloadtranslated-content-c63c8a7781c9e13c36fcdc56dc4d81de8a925204.tar.gz
translated-content-c63c8a7781c9e13c36fcdc56dc4d81de8a925204.tar.bz2
translated-content-c63c8a7781c9e13c36fcdc56dc4d81de8a925204.zip
Fix md conversion errors (#3025)
Diffstat (limited to 'files/fr/web/web_components')
-rw-r--r--files/fr/web/web_components/index.html8
-rw-r--r--files/fr/web/web_components/using_custom_elements/index.html10
-rw-r--r--files/fr/web/web_components/using_shadow_dom/index.html12
-rw-r--r--files/fr/web/web_components/using_templates_and_slots/index.html8
4 files changed, 15 insertions, 23 deletions
diff --git a/files/fr/web/web_components/index.html b/files/fr/web/web_components/index.html
index 811f67a39b..61c90c9a2a 100644
--- a/files/fr/web/web_components/index.html
+++ b/files/fr/web/web_components/index.html
@@ -7,7 +7,6 @@ translation_of: Web/Web_Components
---
<p>{{DefaultAPISidebar("Web Components")}}{{ draft }}</p>
-<div class="summary">
<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>
@@ -23,7 +22,6 @@ translation_of: Web/Web_Components
</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>
-</div>
<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>
@@ -33,18 +31,16 @@ translation_of: Web/Web_Components
<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 <span id="p3">optionnellement</span>, de quel élément celui-ci hérite-t-il.</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>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>
+<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>
-<ul>
-</ul>
<p>Les spécifications des Composants Web définissent les éléments suivants :</p>
diff --git a/files/fr/web/web_components/using_custom_elements/index.html b/files/fr/web/web_components/using_custom_elements/index.html
index 961cd5f517..e01061d005 100644
--- a/files/fr/web/web_components/using_custom_elements/index.html
+++ b/files/fr/web/web_components/using_custom_elements/index.html
@@ -12,10 +12,10 @@ translation_of: Web/Web_Components/Using_custom_elements
---
<div>{{DefaultAPISidebar("Web Components")}}</div>
-<p class="summary">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>
+<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>
<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>
+<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>
<h2 id="Vue_d'ensemble">Vue d'ensemble</h2>
@@ -137,7 +137,7 @@ wrapper.appendChild(info);</pre>
back of your card."&gt;</pre>
<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>
+<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>
<h3 id="Eléments_intégrés_personnalisés">Eléments intégrés personnalisés</h3>
@@ -174,7 +174,7 @@ wrapper.appendChild(info);</pre>
<p>Vous utilisez l'élément <code>&lt;ul&gt;</code> comme d'habitude, mais vous spécifiez le nom de l'élément personnalisé dans l'attribut <code>is</code>.</p>
<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>
+<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>
<h2 id="Utilisation_des_rappels_de_cycle_de_vie">Utilisation des rappels de cycle de vie</h2>
@@ -247,5 +247,5 @@ adoptedCallback() {
<p>Dans notre exemple, cela est mis au tout début du constructeur.</p>
<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>
+<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>
diff --git a/files/fr/web/web_components/using_shadow_dom/index.html b/files/fr/web/web_components/using_shadow_dom/index.html
index 79351bc290..ca14a4ca77 100644
--- a/files/fr/web/web_components/using_shadow_dom/index.html
+++ b/files/fr/web/web_components/using_shadow_dom/index.html
@@ -11,11 +11,10 @@ translation_of: Web/Web_Components/Using_shadow_DOM
---
<div>{{DefaultAPISidebar("Web Components")}}</div>
-<p class="summary">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>
+<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>
-<div class="notecard note">
- <p><b>Note :</b></p>
- <p>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 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>
<h2 id="high-level_view">Vue de haut niveau</h2>
@@ -70,9 +69,8 @@ let fantome = element.attachShadow({mode: 'closed'});</pre>
<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>&lt;video&gt;</code>.</p>
-<div class="notecard note">
- <p><b>Note :</b></p>
- <p>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 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>
<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>
diff --git a/files/fr/web/web_components/using_templates_and_slots/index.html b/files/fr/web/web_components/using_templates_and_slots/index.html
index 860628ec06..60a1052b93 100644
--- a/files/fr/web/web_components/using_templates_and_slots/index.html
+++ b/files/fr/web/web_components/using_templates_and_slots/index.html
@@ -109,8 +109,8 @@ customElements.define('my-paragraph',
&lt;/my-paragraph&gt;
</pre>
-<div class="notecard note">
- <p><strong>Note&nbsp;:</strong> Un élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</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 class="note">
+ <p><strong>Note :</strong> Un élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</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>
<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>
@@ -244,9 +244,7 @@ dt { font-family: Consolas, "Liberation Mono", Courier }
dd { margin-left: 16px }
</pre>
-<div class="hidden">
-<pre class="brush: css">body { margin-top: 47px }</pre>
-</div>
+<pre class="brush: css hidden">body { margin-top: 47px }</pre>
<h3 id="résultat">Résultat</h3>