diff options
Diffstat (limited to 'files/fr/web/web_components/using_shadow_dom/index.html')
| -rw-r--r-- | files/fr/web/web_components/using_shadow_dom/index.html | 12 |
1 files changed, 5 insertions, 7 deletions
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><video></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> |