You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 8-web-components/7-shadow-dom-events/article.md
+46-47Lines changed: 46 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
-
# Shadow DOM and events
1
+
# DOM fantôme et événements
2
2
3
-
The idea behind shadow tree is to encapsulate internal implementation details of a component.
3
+
L'idée derrière l'arbre fantôme est d'encapsuler les détails d'implémentation internes d'un composant.
4
4
5
-
Let's say, a click event happens inside a shadow DOM of `<user-card>` component. But scripts in the main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party library.
5
+
Disons qu'un événement de clic se produit à l'intérieur du DOM fantôme du composant `<user-card>`. Mais les scripts dans le document principal n'ont aucune idée des internes du DOM fantôme, surtout si le composant provient d'une bibliothèque tierce.
6
6
7
-
So, to keep the details encapsulated, the browser *retargets* the event.
7
+
Donc, pour garder les détails encapsulés, le navigateur *recible* l'événement.
8
8
9
-
**Events that happen in shadow DOM have the host element as the target, when caught outside of the component.**
9
+
**Les événements qui se produisent dans le DOM fantôme ont pour cible l'élément hôte, lorsqu'ils sont capturés en dehors du composant.**
10
10
11
-
Here's a simple example:
11
+
Voici un exemple simple :
12
12
13
13
```html run autorun="no-epub" untrusted height=60
14
14
<user-card></user-card>
@@ -30,16 +30,16 @@ document.onclick =
30
30
</script>
31
31
```
32
32
33
-
If you click on the button, the messages are:
33
+
Si vous cliquez sur le bouton, les messages sont :
34
34
35
-
1. Inner target: `BUTTON` -- internal event handler gets the correct target, the element inside shadow DOM.
36
-
2. Outer target: `USER-CARD` -- document event handler gets shadow host as the target.
35
+
1. Inner target: `BUTTON` -- le gestionnaire d'événement interne obtient la cible correcte, l'élément dans le DOM fantôme.
36
+
2. Outer target: `USER-CARD` -- le gestionnaire d'événement du document obtient l'hôte fantôme comme cible.
37
37
38
-
Event retargeting is a great thing to have, because the outer document doesn't have to know about component internals. From its point of view, the event happened on`<user-card>`.
38
+
Le reciblage d'événement est une bonne chose à avoir, parce que le document externe n'a pas à connaître les internes du composant. De son point de vue, l'événement s'est produit sur`<user-card>`.
39
39
40
-
**Retargeting does not occur if the event occurs on a slotted element, that physically lives in the light DOM.**
40
+
**Le reciblage ne se produit pas si l'événement se produit sur un élément placé à l'intérieur d'un emplacement, qui vit physiquement dans le DOM standard.**
41
41
42
-
For example, if a user clicks on`<span slot="username">`in the example below, the event target is exactly this `span` element, for both shadow and light handlers:
42
+
Par exemple, si un utilisateur clique sur`<span slot="username">`dans l'exemple ci-dessous, la cible de l'événement est exactement cet élément `span`, pour les gestionnaires fantôme et standard :
If a click happens on `"John Smith"`, for both inner and outer handlers the target is`<span slot="username">`. That's an element from the light DOM, so no retargeting.
68
+
Si un clic se produit sur `"John Smith"`, pour les gestionnaires interne et externe, la cible est`<span slot="username">`. C'est un élément du DOM standard, donc pas de reciblage.
69
69
70
-
On the other hand, if the click occurs on an element originating from shadow DOM, e.g. on `<b>Name</b>`, then, as it bubbles out of the shadow DOM, its`event.target`is reset to`<user-card>`.
70
+
En revanche, si le clic se produit sur un élément provenant du DOM fantôme, par exemple sur `<b>Nom</b>`, alors, comme il sort du DOM fantôme, son`event.target`est réinitialisé à`<user-card>`.
71
71
72
-
## Bubbling, event.composedPath()
72
+
## Bouillonnement, event.composedPath()
73
73
74
-
For purposes of event bubbling, flattened DOM is used.
74
+
Pour les besoins du bouillonnement d'événements, le DOM aplati est utilisé.
75
75
76
-
So, if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the`<slot>`and upwards.
76
+
Donc, si nous avons un élément dans un emplacement, et qu'un événement se produit quelque part à l'intérieur de celui-ci, alors il est propagé jusqu'à l'emplacement`<slot>`et vers le haut.
77
77
78
-
The full path to the original event target, with all the shadow elements, can be obtained using `event.composedPath()`. As we can see from the name of the method, that path is taken after the composition.
78
+
Le chemin complet vers la cible originale de l'événement, avec tous les éléments fantômes, peut être obtenu en utilisant `event.composedPath()`. Comme on peut le voir d'après le nom de la méthode, ce chemin est pris après la composition.
79
79
80
-
In the example above, the flattened DOM is:
80
+
Dans l'exemple ci-dessus, le DOM aplati est :
81
81
82
82
```html
83
83
<user-cardid="userCard">
@@ -92,45 +92,45 @@ In the example above, the flattened DOM is:
92
92
```
93
93
94
94
95
-
So, for a click on`<span slot="username">`, a call to`event.composedPath()`returns an array: [`span`, `slot`, `div`, `shadow-root`, `user-card`, `body`, `html`, `document`, `window`]. That's exactly the parent chain from the target element in the flattened DOM, after the composition.
95
+
Ainsi, pour un clic sur`<span slot="username">`, un appel à`event.composedPath()`renvoie un tableau : [`span`, `slot`, `div`, `shadow-root`, `user-card`, `body`, `html`, `document`, `window`]. C'est exactement la chaîne parentale de l'élément cible dans le DOM aplati, après la composition.
96
96
97
-
```warn header="Shadow tree details are only provided for `{mode:'open'}` trees"
98
-
If the shadow tree was created with`{mode: 'closed'}`, then the composed path starts from the host: `user-card`and upwards.
97
+
```warn header="Les détails de l'arbre fantôme ne sont fournis que pour les arbres `{mode : 'open'}`"
98
+
Si l'arbre fantôme a été créé avec`{mode: 'closed'}`, alors le chemin composé commence à partir de l'hôte : `user-card`et plus haut.
99
99
100
-
That's the similar principle as for other methods that work with shadow DOM. Internals of closed trees are completely hidden.
100
+
C'est le même principe que pour les autres méthodes qui fonctionnent avec les DOM fantômes. Les internes des arbres fermés sont complètement cachés.
101
101
```
102
102
103
103
104
104
## event.composed
105
105
106
-
Most events successfully bubble through a shadow DOM boundary. There are few events that do not.
106
+
La plupart des événements réussissent à traverser une frontière DOM fantôme. Il y a quelques événements qui ne le font pas.
107
107
108
-
This is governed by the `composed` event object property. If it's `true`, then the event does cross the boundary. Otherwise, it only can be caught from inside the shadow DOM.
108
+
Ceci est régi par la propriété `composed` de l'objet événement. Si elle est `true`, alors l'événement traverse la frontière. Sinon, il ne peut être attrapé qu'à l'intérieur du DOM fantôme.
109
109
110
-
If you take a look at [UI Events specification](https://www.w3.org/TR/uievents), most events have `composed: true`:
110
+
Si vous jetez un coup d'oeil à la spécification [UI Events] (https://www.w3.org/TR/uievents), la plupart des événements ont `composed: true`:
All touch events and pointer events also have `composed: true`.
118
+
Tous les événements liés au toucher et au pointeur ont également la propriété `composed: true`.
119
119
120
-
There are some events that have `composed: false` though:
120
+
Certains événements ont cependant `composed: false` :
121
121
122
-
- `mouseenter`, `mouseleave` (they do not bubble at all),
122
+
- `mouseenter`, `mouseleave` (ils ne bouillonnent pas du tout),
123
123
- `load`, `unload`, `abort`, `error`,
124
124
- `select`,
125
125
- `slotchange`.
126
126
127
-
These events can be caught only on elements within the same DOM, where the event target resides.
127
+
Ces événements ne peuvent être capturés que sur les éléments du même DOM, où se trouve la cible de l'événement.
128
128
129
-
## Custom events
129
+
## Événements personnalisés
130
130
131
-
When we dispatch custom events, we need to set both `bubbles` and `composed` properties to `true` for it to bubble up and out of the component.
131
+
Lorsque nous envoyons des événements personnalisés, nous devons définir les propriétés `bubbles` et `composed` à `true` pour qu'il y ait bouillonnement vers le haut et hors du composant.
132
132
133
-
For example, here we create `div#inner` in the shadow DOM of `div#outer` and trigger two events on it. Only the one with `composed: true` makes it outside to the document:
133
+
Par exemple, ici, nous créons `div#inner` dans le DOM fantôme de `div#outer` et nous déclenchons deux événements sur lui. Seul celui dont la valeur est `composed: true` se retrouve à l'extérieur du document:
Quelques événements intégrés qui ont `composed : false` :
182
+
-`mouseenter`, `mouseleave` (ne bouillonnent pas non plus),
184
183
-`load`, `unload`, `abort`, `error`,
185
184
-`select`,
186
185
-`slotchange`.
187
186
188
-
These events can be caught only on elements within the same DOM.
187
+
Ces événements ne peuvent être capturés que sur des éléments du même DOM.
189
188
190
-
If we dispatch a`CustomEvent`, then we should explicitly set`composed: true`.
189
+
Si nous envoyons un`CustomEvent`, alors nous devons explicitement définir`composed: true`.
191
190
192
-
Please note that in case of nested components, one shadow DOM may be nested into another. In that case composed events bubble through all shadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on the shadow host and set `composed: false`. Then it's out of the component shadow DOM, but won't bubble up to higher-level DOM.
191
+
Veuillez noter que dans le cas de composants imbriqués, un DOM fantôme peut être imbriqué dans un autre. Dans ce cas, les événements composés traversent toutes les frontières du DOM fantôme. Ainsi, si un événement n'est destiné qu'au composant qui l'entoure immédiatement, nous pouvons également le dispatcher sur l'hôte fantôme et mettre `composed: false`. Ainsi, il sortira du DOM caché du composant, mais n'atteindra pas le DOM de niveau supérieur.
0 commit comments