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
+45-45Lines changed: 45 additions & 45 deletions
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
-
# Shadow DOM and events
1
+
# Shadow DOM y eventos
2
2
3
-
The idea behind shadow tree is to encapsulate internal implementation details of a component.
3
+
La idea detrás del shadow tree es encapsular los detalles internos de implementación de un componente.
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
+
Digamos que ocurre un evento click dentro de un shadow DOM del componente `<user-card>`. Pero los scripts en el documento principal no tienen idea acerca del interior del shadow DOM, especialmente si el componente es de una librería de terceros.
6
6
7
-
So, to keep the details encapsulated, the browser *retargets* the event.
7
+
Entonces, para mantener los detalles encapsulados, el navegador *redirige* el evento.
8
8
9
-
**Events that happen in shadow DOM have the host element as the target, when caught outside of the component.**
9
+
**Los eventos que ocurren en el shadow DOM tienen el elemento host como objetivo cuando son atrapados fuera del componente.**
10
10
11
-
Here's a simple example:
11
+
Un ejemplo 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 haces clic en el botón, los mensajes son:
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` -- el manejador de evento interno obtiene el objetivo correcto, el elemento dentro del shadow DOM.
36
+
2. Outer target: `USER-CARD` -- el manejador de evento del documento obtiene el shadow host como objetivo.
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
+
Tener la "redirección de eventos" es muy bueno, porque el documento externo no necesita tener conocimiento acerca del interior del componente. Desde su punto de vista, el evento ocurrió sobre`<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
+
**No hay redirección si el evento ocurre en un elemento eslotado (slot element), que físicamente se aloja en el "light DOM", el DOM visible.**
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
+
Por ejemplo, si un usuario hace clic en `<span slot="username">`en el ejemplo siguiente, el objetivo del evento es precisamente ese elemento `span`para ambos manejadores, shadow y light.
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 ocurre en`"John Smith"`, el target es`<span slot="username">` para ambos manejadores: el interno y el externo. Es un elemento del light DOM, entonces no hay redirección.
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
+
Por otro lado, si el clic ocurre en un elemento originalmente del shadow DOM, ej. en`<b>Name</b>`, entonces, como se propaga hacia fuera del shadow DOM, su`event.target`se reestablece a`<user-card>`.
71
71
72
-
## Bubbling, event.composedPath()
72
+
## Propagación, event.composedPath()
73
73
74
-
For purposes of event bubbling, flattened DOM is used.
74
+
Para el propósito de propagación de eventos, es usado un "flattened DOM" (DOM aplanado, fusión de light y shadow).
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
+
Así, si tenemos un elemento eslotado y un evento ocurre dentro, entonces se propaga hacia arriba a`<slot>`y más allá.
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
+
La ruta completa del destino original "event target", con todos sus elementos shadow, puede ser obtenida usando`event.composedPath()`. Como podemos ver del nombre del método, la ruta se toma despúes de la composición.
79
79
80
-
In the example above, the flattened DOM is:
80
+
En el ejemplo de arriba, el "flattened DOM" es:
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
+
Entonces, para un clic sobre`<span slot="username">`, una llamada a`event.composedPath()`devuelve un array: [`span`, `slot`, `div`, `shadow-root`, `user-card`, `body`, `html`, `document`, `window`]. Que es precisamente la cadena de padres desde el elemento target en el flattened DOM, después de la composición.
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="Los detalles del árbol Shadow solo son provistos en árboles con`{mode:'open'}`"
98
+
Si el árbol shadow fue creado con `{mode: 'closed'}`, la ruta compuesta comienza desde el host: `user-card`en adelante.
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
+
Este principio es similar a otros métodos que trabajan con el shadow DOM. El interior de árboles cerrados está completamente oculto.
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 mayoría de los eventos se propagan exitosamente a través de los límites de un shadow DOM. Hay unos pocos eventos que no.
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
+
Esto está gobernado por la propiedad `composed` del objeto de evento. Si es `true`, el evento cruza los límites. Si no, solamente puede ser capturado dentro del shadow DOM.
109
109
110
-
If you take a look at [UI Events specification](https://www.w3.org/TR/uievents), most events have `composed: true`:
110
+
Vemos en la [especificación UI Events](https://www.w3.org/TR/uievents) que la mayoría de los eventos tienen `composed: true`:
All touch events and pointer events also have `composed: true`.
118
+
Todos los eventos de toque y puntero también tienen `composed: true`.
119
119
120
-
There are some events that have `composed: false` though:
120
+
Algunos eventos tienen `composed: false`:
121
121
122
-
- `mouseenter`, `mouseleave` (they do not bubble at all),
122
+
- `mouseenter`, `mouseleave` (que no se propagan en absoluto),
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
+
Estos eventos solo pueden ser capturados dentro del mismo DOM, donde reside el evento target.
128
128
129
-
## Custom events
129
+
## Eventos personalizados
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
+
Cuando enviamos eventos personalizados, necesitamos establecer ambas propiedades `bubbles` y `composed` a `true` para que se propague hacia arriba y afuera del componente.
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
+
Por ejemplo, aquí creamos `div#inner` en el shadow DOM de `div#outer` y disparamos dos eventos en él. Solo el que tiene `composed: true` logra salir hacia el documento:
Algunos eventos nativos que tienen`composed: false`:
182
182
183
-
-`mouseenter`, `mouseleave` (also do not bubble),
183
+
-`mouseenter`, `mouseleave` (que tampoco se propagan),
184
184
-`load`, `unload`, `abort`, `error`,
185
185
-`select`,
186
186
-`slotchange`.
187
187
188
-
These events can be caught only on elements within the same DOM.
188
+
Estos eventos solo pueden ser capturados en elementos dentro del mismo DOM.
189
189
190
-
If we dispatch a `CustomEvent`, then we should explicitly set`composed: true`.
190
+
Si enviamos un evento personalizado `CustomEvent`, debemos establecer explícitamente`composed: true`.
191
191
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.
192
+
Tenga en cuenta que en caso de componentes anidados, un shadow DOM puede estar anidado dentro de otro. En ese caso los eventos se propagan a través de los límites de todos los shadow DOM. Entonces, si se pretende que un evento sea solo para el componente inmediato que lo encierra, podemos enviarlo también en el shadow host y establecer`composed: false`. Entonces saldrá al shadow DOM del componente, pero no se propagará hacia un DOM de mayor nivel.
0 commit comments