Dec 16, 2021 · Oct 2, 2021 · Oct 2, 2021 · Oct 3, 2021 · Dec 16, 2021 · Dec 16, 2021
diff --git a/8-web-components/7-shadow-dom-events/article.md b/8-web-components/7-shadow-dom-events/article.md
 # Shadow DOMand events
 # Shadow DOMy eventos

 The ideabehindshadow treeis to encapsulate internal implementation details of a component.
 La ideadetrás delshadow treees encapsular los detalles internos de implementación de un componente.

 Let's say, a click event happens inside ashadow DOMof`<user-card>` component. Butscriptsin the main document haveno ideaabout theshadow DOM internals, especially if the component comes from a 3rd-party library.
 Digamos que ocurre un evento click dentro de unshadow DOMdel componente`<user-card>`. Pero losscriptsen el documento principalnotienenideaacerca del interior delshadow DOM, especialmente si el componente es de una librería de terceros.

 So, to keep the details encapsulated, the browser *retargets* the event.
 Entonces, para mantener los detalles encapsulados, el navegador *redirige* el evento.

 **Events that happen inshadow DOMhave thehostelement as the target, when caught outside of the component.**
 **Los eventos que ocurren en elshadow DOMtienen el elementohostcomo objetivo cuando son atrapados fuera del componente.**

 Here's a simple example:
 Un ejemplo simple:

 ```html run autorun="no-epub" untrusted height=60
 <user-card></user-card>
 </script>
 ```

 If you click on the button, the messages are:
 Si haces clic en el botón, los mensajes son:

 1. Inner target: `BUTTON` --internal event handler gets the correct target, the element inside shadow DOM.
 2. Outer target: `USER-CARD` --document event handler getsshadow hostas the target.
 1. Inner target: `BUTTON` --el manejador de evento interno obtiene el objetivo correcto, el elemento dentro del shadow DOM.
 2. Outer target: `USER-CARD` --el manejador de evento del documento obtiene elshadow hostcomo objetivo.

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

 **Retargeting does not occur if the event occurs on a slottedelement, that physically lives in thelight DOM.**
 **No hay redirección si el evento ocurre en un elemento eslotado (slotelement), que físicamente se aloja en el "light DOM", el DOM visible.**

 For example, if a user clicks on`<span slot="username">`in the example below, the event target is exactly this`span`element, for both shadowand light handlers:
 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, shadowy light.

 ```html run autorun="no-epub" untrusted height=60
 <user-card id="userCard">
 </script>
 ```

 If a click happens on `"John Smith"`,for both inner and outer handlers thetargetis `<span slot="username">`. That's an element from thelight DOM,so noretargeting.
 Si un clic ocurre en `"John Smith"`,eltargetes `<span slot="username">` para ambos manejadores: el interno y el externo. Es un elemento dellight DOM,entonces nohay redirección.

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

 ##Bubbling, event.composedPath()
 ##Propagación, event.composedPath()

 For purposes of event bubbling,flattened DOM is used.
 Para el propósito de propagación de eventos, es usado un "flattened DOM" (DOM aplanado, fusión de light y shadow).

 So, if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the `<slot>`and upwards.
 Así, si tenemos un elemento eslotado y un evento ocurre dentro, entonces se propaga hacia arriba a `<slot>`y más allá.

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

 In the example above, theflattened DOM is:
 En el ejemplo de arriba, el "flattened DOM" es:

 ```html
 <user-card id="userCard">
 ```


 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 theflattened DOM,after the composition.
 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 elflattened DOM,después de la composición.

 ```warn header="Shadowtree details are only provided for `{mode:'open'}` trees"
 If theshadowtree was created with`{mode: 'closed'}`,then the composed path starts from thehost: `user-card`and upwards.
 ```warn header="Los detalles del árbolShadowsolo son provistos en árboles con `{mode:'open'}`"
 Si el árbolshadowfue creado con`{mode: 'closed'}`,la ruta compuesta comienza desde elhost: `user-card`en adelante.

 That's thesimilarprinciple as for other methods that work withshadow DOM.Internals of closed trees are completely hidden.
 Este principio essimilara otros métodos que trabajan con elshadow DOM.El interior de árboles cerrados está completamente oculto.
 ```


 ## event.composed

 Most events successfully bubble through ashadow DOM boundary. There are few events that do not.
 La mayoría de los eventos se propagan exitosamente a través de los límites de unshadow DOM. Hay unos pocos eventos que no.

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

 If you take a look at [UI Events specification](https://www.w3.org/TR/uievents), most events have `composed: true`:
 Vemos en la [especificaciónUI Events](https://www.w3.org/TR/uievents) que la mayoría de los eventos tienen `composed: true`:

 - `blur`, `focus`, `focusin`, `focusout`,
 - `click`, `dblclick`,
 - `mousedown`, `mouseup` `mousemove`, `mouseout`, `mouseover`,
 - `wheel`,
 - `beforeinput`, `input`, `keydown`, `keyup`.

 All touch events and pointer events also have `composed: true`.
 Todos los eventos de toque y puntero también tienen `composed: true`.

 There are some events that have`composed: false` though:
 Algunos eventos tienen`composed: false`:

 - `mouseenter`, `mouseleave` (they do not bubble at all),
 - `mouseenter`, `mouseleave` (que no se propagan en absoluto),
 - `load`, `unload`, `abort`, `error`,
 - `select`,
 - `slotchange`.

 These events can be caught only on elements within the sameDOM,where the event target resides.
 Estos eventos solo pueden ser capturados dentro del mismoDOM,donde reside el evento target.

 ##Custom events
 ##Eventos personalizados

 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.
 Cuando enviamos eventos personalizados, necesitamos establecer ambas propiedades`bubbles`y `composed`a`true`para que se propague hacia arriba y afuera del componente.

 For example, here we create`div#inner`in the shadow DOMof `div#outer`and trigger two events on it. Only the one with `composed: true`makes it outside to the document:
 Por ejemplo, aquí creamos`div#inner`en el shadow DOMde `div#outer`y disparamos dos eventos en él. Solo el que tiene `composed: true`logra salir hacia el documento:

 ```html run untrusted height=0
 <div id="outer"></div>
 </script>
 ```

 ##Summary
 ##Resumen

 Events only crossshadow DOMboundaries if their `composed`flag is set to `true`.
 Los eventos solo cruzan los límites deshadow DOMsi su bandera `composed`se establece como `true`.

 Built-in events mostly have`composed: true`,as described in the relevant specifications:
 La mayoría de los eventos nativos tienen`composed: true`,tal como se describe en las especificaciones relevantes:

 -UI Events <https://www.w3.org/TR/uievents>.
 - TouchEvents <https://w3c.github.io/touch-events>.
 -Pointer Events <https://www.w3.org/TR/pointerevents>.
 - ...And so on.
 -Eventos UI <https://www.w3.org/TR/uievents>.
 -EventosTouch  <https://w3c.github.io/touch-events>.
 -Eventos Pointer <https://www.w3.org/TR/pointerevents>.
 - ...y así.

 Some built-in events that have `composed: false`:
 Algunos eventos nativos que tienen `composed: false`:

 - `mouseenter`, `mouseleave` (also do not bubble),
 - `mouseenter`, `mouseleave` (que tampoco se propagan),
 - `load`, `unload`, `abort`, `error`,
 - `select`,
 - `slotchange`.

 These events can be caught only on elements within the same DOM.
 Estos eventos solo pueden ser capturados en elementos dentro del mismo DOM.

 If we dispatch a`CustomEvent`,then we should explicitly set `composed: true`.
 Si enviamos un evento personalizado`CustomEvent`,debemos establecer explícitamente `composed: true`.

 Please note that in case of nested components, one shadow DOMmay be nested into another. In that case composed events bubble through allshadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on theshadow hostand set `composed: false`.Then it's out of the componentshadow DOM, but won't bubble up to higher-level DOM.
 Tenga en cuenta que en caso de componentes anidados, un shadow DOMpuede estar anidado dentro de otro. En ese caso los eventos se propagan a través de los límites de todos losshadow DOM. Entonces, si se pretende que un evento sea solo para el componente inmediato que lo encierra, podemos enviarlo también en elshadow hosty establecer `composed: false`.Entonces saldrá alshadow DOM del componente, pero no se propagará hacia un DOM de mayor nivel.
Original file line number	Diff line number	Diff line change
		@@ -1,14 +1,14 @@
		# Shadow DOMand events
		# Shadow DOMy eventos

		The ideabehindshadow treeis to encapsulate internal implementation details of a component.
		La ideadetrás delshadow treees encapsular los detalles internos de implementación de un componente.

		Let's say, a click event happens inside ashadow DOMof`<user-card>` component. Butscriptsin the main document haveno ideaabout theshadow DOM internals, especially if the component comes from a 3rd-party library.
		Digamos que ocurre un evento click dentro de unshadow DOMdel componente`<user-card>`. Pero losscriptsen el documento principalnotienenideaacerca del interior delshadow DOM, especialmente si el componente es de una librería de terceros.

		So, to keep the details encapsulated, the browser retargets the event.
		Entonces, para mantener los detalles encapsulados, el navegador redirige el evento.

		Events that happen inshadow DOMhave thehostelement as the target, when caught outside of the component.
		Los eventos que ocurren en elshadow DOMtienen el elementohostcomo objetivo cuando son atrapados fuera del componente.

		Here's a simple example:
		Un ejemplo simple:

		```html run autorun="no-epub" untrusted height=60
		<user-card></user-card>
Expand All		@@ -30,16 +30,16 @@ document.onclick =
		</script>
		```

		If you click on the button, the messages are:
		Si haces clic en el botón, los mensajes son:

		1. Inner target: `BUTTON` --internal event handler gets the correct target, the element inside shadow DOM.
		2. Outer target: `USER-CARD` --document event handler getsshadow hostas the target.
		1. Inner target: `BUTTON` --el manejador de evento interno obtiene el objetivo correcto, el elemento dentro del shadow DOM.
		2. Outer target: `USER-CARD` --el manejador de evento del documento obtiene elshadow hostcomo objetivo.

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

		Retargeting does not occur if the event occurs on a slottedelement, that physically lives in thelight DOM.
		No hay redirección si el evento ocurre en un elemento eslotado (slotelement), que físicamente se aloja en el "light DOM", el DOM visible.

		For example, if a user clicks on`<span slot="username">`in the example below, the event target is exactly this`span`element, for both shadowand light handlers:
		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, shadowy light.

		```html run autorun="no-epub" untrusted height=60
		<user-card id="userCard">
Expand All		@@ -65,19 +65,19 @@ userCard.onclick = e => alert(`Outer target: ${e.target.tagName}`);
		</script>
		```

		If a click happens on `"John Smith"`,for both inner and outer handlers thetargetis `<span slot="username">`. That's an element from thelight DOM,so noretargeting.
		Si un clic ocurre en `"John Smith"`,eltargetes `<span slot="username">` para ambos manejadores: el interno y el externo. Es un elemento dellight DOM,entonces nohay redirección.

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

		##Bubbling, event.composedPath()
		##Propagación, event.composedPath()
Copy link MemberAuthor joaquinelioDec 16, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. es correcto, pero me suena feo... ¿cuanto insistis con esto? me dejo convencer facil Copy link Contributor dbritto-devDec 16, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. @joaquinelio yo creo que lo dejamos como Propagación

		For purposes of event bubbling,flattened DOM is used.
		Para el propósito de propagación de eventos, es usado un "flattened DOM" (DOM aplanado, fusión de light y shadow).

		So, if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the `<slot>`and upwards.
		Así, si tenemos un elemento eslotado y un evento ocurre dentro, entonces se propaga hacia arriba a `<slot>`y más allá.

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

		In the example above, theflattened DOM is:
		En el ejemplo de arriba, el "flattened DOM" es:

		```html
		<user-card id="userCard">
Expand All		@@ -92,45 +92,45 @@ In the example above, the flattened DOM is:
		```


		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 theflattened DOM,after the composition.
		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 elflattened DOM,después de la composición.

		```warn header="Shadowtree details are only provided for `{mode:'open'}` trees"
		If theshadowtree was created with`{mode: 'closed'}`,then the composed path starts from thehost: `user-card`and upwards.
		```warn header="Los detalles del árbolShadowsolo son provistos en árboles con `{mode:'open'}`"
		Si el árbolshadowfue creado con`{mode: 'closed'}`,la ruta compuesta comienza desde elhost: `user-card`en adelante.

		That's thesimilarprinciple as for other methods that work withshadow DOM.Internals of closed trees are completely hidden.
		Este principio essimilara otros métodos que trabajan con elshadow DOM.El interior de árboles cerrados está completamente oculto.
		```


		## event.composed

		Most events successfully bubble through ashadow DOM boundary. There are few events that do not.
		La mayoría de los eventos se propagan exitosamente a través de los límites de unshadow DOM. Hay unos pocos eventos que no.

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

		If you take a look at [UI Events specification](https://www.w3.org/TR/uievents), most events have `composed: true`:
		Vemos en la [especificaciónUI Events](https://www.w3.org/TR/uievents) que la mayoría de los eventos tienen `composed: true`:

		- `blur`, `focus`, `focusin`, `focusout`,
		- `click`, `dblclick`,
		- `mousedown`, `mouseup` `mousemove`, `mouseout`, `mouseover`,
		- `wheel`,
		- `beforeinput`, `input`, `keydown`, `keyup`.

		All touch events and pointer events also have `composed: true`.
		Todos los eventos de toque y puntero también tienen `composed: true`.

		There are some events that have`composed: false` though:
		Algunos eventos tienen`composed: false`:

		- `mouseenter`, `mouseleave` (they do not bubble at all),
		- `mouseenter`, `mouseleave` (que no se propagan en absoluto),
		- `load`, `unload`, `abort`, `error`,
		- `select`,
		- `slotchange`.

		These events can be caught only on elements within the sameDOM,where the event target resides.
		Estos eventos solo pueden ser capturados dentro del mismoDOM,donde reside el evento target.

		##Custom events
		##Eventos personalizados

		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.
		Cuando enviamos eventos personalizados, necesitamos establecer ambas propiedades`bubbles`y `composed`a`true`para que se propague hacia arriba y afuera del componente.

		For example, here we create`div#inner`in the shadow DOMof `div#outer`and trigger two events on it. Only the one with `composed: true`makes it outside to the document:
		Por ejemplo, aquí creamos`div#inner`en el shadow DOMde `div#outer`y disparamos dos eventos en él. Solo el que tiene `composed: true`logra salir hacia el documento:

		```html run untrusted height=0
		<div id="outer"></div>
Expand DownExpand Up		@@ -167,26 +167,26 @@ inner.dispatchEvent(new CustomEvent('test', {
		</script>
		```

		##Summary
		##Resumen

		Events only crossshadow DOMboundaries if their `composed`flag is set to `true`.
		Los eventos solo cruzan los límites deshadow DOMsi su bandera `composed`se establece como `true`.

		Built-in events mostly have`composed: true`,as described in the relevant specifications:
		La mayoría de los eventos nativos tienen`composed: true`,tal como se describe en las especificaciones relevantes:

		-UI Events <https://www.w3.org/TR/uievents>.
		- TouchEvents <https://w3c.github.io/touch-events>.
		-Pointer Events <https://www.w3.org/TR/pointerevents>.
		- ...And so on.
		-Eventos UI <https://www.w3.org/TR/uievents>.
		-EventosTouch <https://w3c.github.io/touch-events>.
		-Eventos Pointer <https://www.w3.org/TR/pointerevents>.
		- ...y así.

		Some built-in events that have `composed: false`:
		Algunos eventos nativos que tienen `composed: false`:

		- `mouseenter`, `mouseleave` (also do not bubble),
		- `mouseenter`, `mouseleave` (que tampoco se propagan),
		- `load`, `unload`, `abort`, `error`,
		- `select`,
		- `slotchange`.

		These events can be caught only on elements within the same DOM.
		Estos eventos solo pueden ser capturados en elementos dentro del mismo DOM.

		If we dispatch a`CustomEvent`,then we should explicitly set `composed: true`.
		Si enviamos un evento personalizado`CustomEvent`,debemos establecer explícitamente `composed: true`.

		Please note that in case of nested components, one shadow DOMmay be nested into another. In that case composed events bubble through allshadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on theshadow hostand set `composed: false`.Then it's out of the componentshadow DOM, but won't bubble up to higher-level DOM.
		Tenga en cuenta que en caso de componentes anidados, un shadow DOMpuede estar anidado dentro de otro. En ese caso los eventos se propagan a través de los límites de todos losshadow DOM. Entonces, si se pretende que un evento sea solo para el componente inmediato que lo encierra, podemos enviarlo también en elshadow hosty establecer `composed: false`.Entonces saldrá alshadow DOM del componente, pero no se propagará hacia un DOM de mayor nivel.