From 88c9a51552ce1bcbbd33ef0dd69e2bdb7255121d Mon Sep 17 00:00:00 2001 From: Rémi Lefort Date: Tue, 15 Jun 2021 21:11:07 +0200 Subject: /fr/web/web_components/using_shadow_dom yping errors correction (#1199) * Fix typing errors * Review - minor typo and let/var consistency Co-authored-by: julieng --- .../web/web_components/using_shadow_dom/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'files') 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 12170a6e71..79351bc290 100644 --- a/files/fr/web/web_components/using_shadow_dom/index.html +++ b/files/fr/web/web_components/using_shadow_dom/index.html @@ -47,10 +47,10 @@ translation_of: Web/Web_Components/Using_shadow_DOM

Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre :

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>. 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.

@@ -68,7 +68,7 @@ let fantome = element.attachShadow({mode: 'closed'}); 
let monDomFantome = monElementPerso.shadowRoot;
-

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 casavec les éléments natifs contenant des DOM fantômes tels que <video>.

+

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>.

Note :

@@ -87,7 +87,7 @@ shadow.appendChild(paragraph);

Démonstration au travers d'un exemple simple

-

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> (en voir aussi un exemple dynamique). 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:

+

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> (en voir aussi un exemple dynamique). 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 :

class PopUpInfo extends HTMLElement {
   constructor() {
@@ -106,12 +106,12 @@ shadow.appendChild(paragraph);
 
 
Nous associons d'abord une racine fantôme à l'élément personnalisé :

 
-
// Créer une racine fantome
-var fantome = this.attachShadow({mode: 'open'});

+
// Créer une racine fantôme
+let fantome = this.attachShadow({mode: 'open'});

 
 
Créer la structure du DOM fantôme

 
-
Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément:

+
Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément :

 
 
// Créer les <span>
 let wrapper = document.createElement('span');
@@ -197,7 +197,7 @@ customElements.define('popup-info', PopUpInfo);

 
 
Dans l'exemple précédent, nous appliquons du style au DOM fantôme en utilisant l'élément <style>, mais il est parfaitement possible de le faire en référençant une feuille de style externe avec un élément <link> si vous le préférez.

 
-
Par exemple, regardez ce code tiré de l'exemple popup-info-box-external-stylesheet (voir le code source):

+
Par exemple, regardez ce code tiré de l'exemple popup-info-box-external-stylesheet (voir le code source) :

 
 
// Appliquer les styles externes au dom fantôme
 const linkElem = document.createElement('link');
-- 
cgit v1.2.3-54-g00ecf