From 1d3ad5746917bfe15e5cadd91be255476f0afe08 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Tue, 12 Oct 2021 22:13:21 -0400
Subject: [PATCH 01/16] =?UTF-8?q?Traduccion=20Shadow=20DOM=20slots,=20comp?=
 =?UTF-8?q?osici=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../5-slots-composition/article.md            | 269 +++++++++---------
 1 file changed, 134 insertions(+), 135 deletions(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index ada52a06a..ab2a234f6 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -1,33 +1,33 @@
-# Shadow DOM slots, composition
+# Shadow DOM slots, composición
 
-Many types of components, such as tabs, menus, image galleries, and so on, need the content to render.
+Muchos tipos de componentes, como pestañas, menús, galerías de imágenes, etc, necesitan el contenido para renderizar.
 
-Just like built-in browser `<select>` expects `<option>` items, our `<custom-tabs>` may expect the actual tab content to be passed. And a `<custom-menu>` may expect menu items.
+Al igual que el `<select>` nativo del navegador espera elementos de `<option>`, nuestros `<custom-tabs>` pueden esperar que se pase el contenido real de la pestaña. Y un `<custom-menu>` puede esperar elementos de menú.
 
-The code that makes use of `<custom-menu>` can look like this:
+El código que hace uso de `<custom-menu>` puede verse así:
 
 ```html
 <custom-menu>
-  <title>Candy menu</title>
-  <item>Lollipop</item>
-  <item>Fruit Toast</item>
-  <item>Cup Cake</item>
+  <title>Menú de dulces</title>
+  <item>Paletas</item>
+  <item>Tostada de frutas</item>
+  <item>Magdalenas</item>
 </custom-menu>
 ```
 
-...Then our component should render it properly, as a nice menu with given title and items, handle menu events, etc.
+...Entonces nuestro componente debería renderizar correctamente, como un agradable menú con un título y elementos dados, manejar eventos de menú, etc.
 
-How to implement it?
+¿Cómo implementarlo?
 
-We could try to analyze the element content and dynamically copy-rearrange DOM nodes. That's possible, but if we're moving elements to shadow DOM, then CSS styles from the document do not apply in there, so the visual styling may be lost. Also that requires some coding.
+Podríamos intentar analizar el contenido del elemento y copiar y reorganizar dinámicamente los nodos del DOM. Esto es posible, pero si estamos moviendo elementos al shadow DOM, entonces los estilos CSS del documento no se aplican allí, por lo que se puede perder el estilo visual. También eso requiere algo de programación.
 
-Luckily, we don't have to. Shadow DOM supports `<slot>` elements, that are automatically filled by the content from light DOM.
+Afortunadamente, no tenemos que hacerlo. Shadow DOM soporta elementos `<slot>`, que se llenan automáticamente con el contenido del light DOM.
 
-## Named slots
+## Slots con nombres
 
-Let's see how slots work on a simple example.
+Veamos cómo funcionan los slots en un ejemplo simple.
 
-Here, `<user-card>` shadow DOM provides two slots, filled from light DOM:
+Aquí, el shadow DOM `<user-card>` proporciona dos slots, llenas de light DOM:
 
 ```html run autorun="no-epub" untrusted height=80
 <script>
@@ -35,12 +35,12 @@ customElements.define('user-card', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
     this.shadowRoot.innerHTML = `
-      <div>Name:
+      <div>Nombre:
 *!*
         <slot name="username"></slot>
 */!*
       </div>
-      <div>Birthday:
+      <div>Cumpleaños:
 *!*
         <slot name="birthday"></slot>
 */!*
@@ -49,26 +49,25 @@ customElements.define('user-card', class extends HTMLElement {
   }
 });
 </script>
-
 <user-card>
   <span *!*slot="username"*/!*>John Smith</span>
   <span *!*slot="birthday"*/!*>01.01.2001</span>
 </user-card>
 ```
 
-In the shadow DOM, `<slot name="X">` defines an "insertion point", a place where elements with `slot="X"` are rendered.
+En el shadow DOM, `<slot name="X">` define un "punto de inserción", un lugar donde se renderizan los elementos con `slot="X"`.
 
-Then the browser performs "composition": it takes elements from the light DOM and renders them in corresponding slots of the shadow DOM. At the end, we have exactly what we want -- a component that can be filled with data.
+Luego, el navegador realiza la "composición": toma elementos del light DOM y los renderiza en los slots correspondientes del shadow DOM. Al final, tenemos exactamente lo que queremos: un componente que se puede llenar con datos.
 
-Here's the DOM structure after the script, not taking composition into account:
+Aquí está la estructura del DOM después del script, sin tener en cuenta la composición:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Nombre:
       <slot name="username"></slot>
     </div>
-    <div>Birthday:
+    <div>Cumpleaños:
       <slot name="birthday"></slot>
     </div>
   <span slot="username">John Smith</span>
@@ -76,24 +75,24 @@ Here's the DOM structure after the script, not taking composition into account:
 </user-card>
 ```
 
-We created the shadow DOM, so here it is, under `#shadow-root`. Now the element has both light and shadow DOM.
+Creamos el shadow DOM, así que aquí está, en `#shadow-root`. Ahora el elemento tiene ambos, light DOM y shadow DOM.
 
-For rendering purposes, for each `<slot name="...">` in shadow DOM, the browser looks for `slot="..."` with the same name in the light DOM. These elements are rendered inside the slots:
+Para fines de renderizado, para cada `<slot name="...">` en el shadow DOM, el navegador busca `slot="..."` con el mismo nombre en el light DOM.  Estos elementos se renderizan dentro de los slots:
 
 ![](shadow-dom-user-card.svg)
 
-The result is called "flattened" DOM:
+El resultado se llama "flattened" DOM:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Nombre:
       <slot name="username">
-        <!-- slotted element is inserted into the slot -->
+        <!-- el elemento esloteado se inserta en el slot -->
         <span slot="username">John Smith</span>
       </slot>
     </div>
-    <div>Birthday:
+    <div>Cumpleaños:
       <slot name="birthday">
         <span slot="birthday">01.01.2001</span>
       </slot>
@@ -101,35 +100,35 @@ The result is called "flattened" DOM:
 </user-card>
 ```
 
-...But the flattened DOM exists only for rendering and event-handling purposes. It's kind of "virtual". That's how things are shown. But the nodes in the document are actually not moved around!
+...Pero el flattened DOM existe solo para fines de procesamiento y manejo de eventos. Es una especie de "virtual DOM". Así se muestran las cosas. Pero los nodos del documento en realidad no se mueven!
 
-That can be easily checked if we run `querySelectorAll`: nodes are still at their places.
+Eso se puede comprobar fácilmente si ejecutamos `querySelectorAll`: los nodos todavía están en sus lugares.
 
 ```js
-// light DOM <span> nodes are still at the same place, under `<user-card>`
+// light DOM <span> los nodos siguen en el mismo lugar, en `<user-card>`
 alert( document.querySelectorAll('user-card span').length ); // 2
 ```
 
-So, the flattened DOM is derived from shadow DOM by inserting slots. The browser renders it and uses for style inheritance, event propagation (more about that later). But JavaScript still sees the document "as is", before flattening.
+Entonces, el flattened DOM se deriva del shadow DOM insertando slots. El navegador lo renderiza y lo usa para la herencia de estilo, la propagación de eventos (más sobre esto más adelante). Pero JavaScript todavía ve el documento "tal cual", antes de acoplarlo.
 
-````warn header="Only top-level children may have slot=\"...\" attribute"
-The `slot="..."` attribute is only valid for direct children of the shadow host (in our example, `<user-card>` element). For nested elements it's ignored.
+````warn header="Solo los nodos children de alto nivel pueden tener el atributo slot=\"...\" "
+El atributo `slot =" ... "` solo es válido para los hijos directos del shadow host (en nuestro ejemplo, el elemento `<user-card>`). Para los elementos anidados, se ignora.
 
-For example, the second `<span>` here is ignored (as it's not a top-level child of `<user-card>`):
+Por ejemplo, el segundo `<span>` aquí se ignora (ya que no es un elemento hijo de nivel superior de `<user-card>`):
 ```html
 <user-card>
   <span slot="username">John Smith</span>
   <div>
-    <!-- invalid slot, must be direct child of user-card -->
+    <!-- slot no válido, debe ser hijo directo de user-card -->
     <span slot="birthday">01.01.2001</span>
   </div>
 </user-card>
 ```
 ````
 
-If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another.
+Si hay varios elementos en el light DOM con el mismo nombre de slot, se añaden a al slot, uno tras otro.
 
-For example, this:
+Por ejemplo, este:
 ```html
 <user-card>
   <span slot="username">John</span>
@@ -137,40 +136,40 @@ For example, this:
 </user-card>
 ```
 
-Gives this flattened DOM with two elements in `<slot name="username">`:
+Este flattened DOM con dos elementos en `<slot name="username">`:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Nombre:
       <slot name="username">
         <span slot="username">John</span>
         <span slot="username">Smith</span>
       </slot>
     </div>
-    <div>Birthday:
+    <div>Cumpleaños:
       <slot name="birthday"></slot>
     </div>
 </user-card>
 ```
 
-## Slot fallback content
+## Slot con contenido alternativo
 
-If we put something inside a `<slot>`, it becomes the fallback, "default" content. The browser shows it if there's no corresponding filler in light DOM.
+Si ponemos algo dentro de un `<slot>`, se convierte en el contenido alternativo, "predeterminado". El navegador lo muestra si no hay un relleno correspondiente en el Light DOM.
 
-For example, in this piece of shadow DOM, `Anonymous` renders if there's no `slot="username"` in light DOM.
+Por ejemplo, en esta parte del shadow DOM, `Anónimo` se representa si no hay `slot="username"` en el light DOM.
 
 ```html
 <div>Name:
-  <slot name="username">Anonymous</slot>
+  <slot name="username">anónimo</slot>
 </div>
 ```
 
-## Default slot: first unnamed
+## Slot predeterminado: sin nombre primero
 
-The first `<slot>` in shadow DOM that doesn't have a name is a "default" slot. It gets all nodes from the light DOM that aren't slotted elsewhere.
+El primer `<slot>` en el shadow DOM que no tiene un nombre es un slot "predeterminado". Obtiene todos los nodos del light DOM que no están ubicados en otro lugar.
 
-For example, let's add the default slot to our `<user-card>` that shows all unslotted information about the user:
+Por ejemplo, agreguemos el slot predeterminado a nuestro `<user-card>` que muestra toda la información sin slotear sobre el usuario:
 
 ```html run autorun="no-epub" untrusted height=140
 <script>
@@ -178,14 +177,14 @@ customElements.define('user-card', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
     this.shadowRoot.innerHTML = `
-    <div>Name:
+    <div>Nombre:
       <slot name="username"></slot>
     </div>
-    <div>Birthday:
+    <div>Cumpleaños:
       <slot name="birthday"></slot>
     </div>
     <fieldset>
-      <legend>Other information</legend>
+      <legend>Otra informacion</legend>
 *!*
       <slot></slot>
 */!*
@@ -197,69 +196,69 @@ customElements.define('user-card', class extends HTMLElement {
 
 <user-card>
 *!*
-  <div>I like to swim.</div>
+  <div>Me gusta nadar.</div>
 */!*
   <span slot="username">John Smith</span>
   <span slot="birthday">01.01.2001</span>
 *!*
-  <div>...And play volleyball too!</div>
+  <div>...Y jugar volleyball también!</div>
 */!*
 </user-card>
 ```
 
-All the unslotted light DOM content gets into the "Other information" fieldset.
+Todo el contenido del light DOM sin slotear entra en el conjunto de campos "Otra información".
 
-Elements are appended to a slot one after another, so both unslotted pieces of information are in the default slot together.
+Los elementos se agregan a un slot uno tras otro, por lo que ambas piezas de información sin slotear se encuentran juntas en el slot predeterminado.
 
-The flattened DOM looks like this:
+El flattened DOM se ve así:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Nombre:
       <slot name="username">
         <span slot="username">John Smith</span>
       </slot>
     </div>
-    <div>Birthday:
+    <div>Cumpleaños:
       <slot name="birthday">
         <span slot="birthday">01.01.2001</span>
       </slot>
     </div>
     <fieldset>
-      <legend>Other information</legend>
+      <legend>Otra informacion</legend>
 *!*
       <slot>
-        <div>I like to swim.</div>
-        <div>...And play volleyball too!</div>
+        <div>Me gusta nadar.</div>
+        <div>...Y jugar volleyball también!</div>
       </slot>
 */!*
     </fieldset>
 </user-card>
 ```
 
-## Menu example
+## Ejemplo de menú
 
-Now let's back to `<custom-menu>`, mentioned at the beginning of the chapter.
+Ahora volvamos al `<custom-menu>`, mencionado al principio del capítulo.
 
-We can use slots to distribute elements.
+Podemos usar slots para distribuir elementos.
 
-Here's the markup for `<custom-menu>`:
+Aquí está el marcado para `<custom-menu>`:
 
 ```html
 <custom-menu>
-  <span slot="title">Candy menu</span>
-  <li slot="item">Lollipop</li>
-  <li slot="item">Fruit Toast</li>
-  <li slot="item">Cup Cake</li>
+  <span slot="title">Menú de dulces</span>
+  <li slot="item">Paletas</li>
+  <li slot="item">Tostada de frutas</li>
+  <li slot="item">Magdalenas</li>
 </custom-menu>
 ```
 
-The shadow DOM template with proper slots:
+La plantilla del shadow DOM con los slots adecuados:
 
 ```html
 <template id="tmpl">
-  <style> /* menu styles */ </style>
+  <style> /* estilos del menu */ </style>
   <div class="menu">
     <slot name="title"></slot>
     <ul><slot name="item"></slot></ul>
@@ -267,72 +266,72 @@ The shadow DOM template with proper slots:
 </template>
 ```
 
-1. `<span slot="title">` goes into `<slot name="title">`.
-2. There are many `<li slot="item">` in the template, but only one `<slot name="item">` in the template. So all such `<li slot="item">` are appended to `<slot name="item">` one after another, thus forming the list.
+1. `<span slot="title">` entra en `<slot name="title">`.
+2. Hay muchos `<li slot="item">` en la plantilla, pero solo un `<slot name="item">` en la plantilla. Así que todos esos `<li slot="item">` se añaden a  `<slot name="item">` uno tras otro, formando así la lista.
 
-The flattened DOM becomes:
+El flattened DOM se convierte en:
 
 ```html
 <custom-menu>
   #shadow-root
-    <style> /* menu styles */ </style>
+    <style> /* estilos del menu */ </style>
     <div class="menu">
       <slot name="title">
-        <span slot="title">Candy menu</span>
+        <span slot="title">Menú de dulces</span>
       </slot>
       <ul>
         <slot name="item">
-          <li slot="item">Lollipop</li>
-          <li slot="item">Fruit Toast</li>
-          <li slot="item">Cup Cake</li>
+          <li slot="item">Paletas</li>
+          <li slot="item">Tostada de frutas</li>
+          <li slot="item">Magdalenas</li>
         </slot>
       </ul>
     </div>
 </custom-menu>
 ```
 
-One might notice that, in a valid DOM, `<li>` must be a direct child of `<ul>`. But that's flattened DOM, it describes how the component is rendered, such thing happens naturally here.
+Uno podría notar que, en un DOM válido, `<li>` debe ser un hijo directo de `<ul>`. Pero esto es flattened DOM, describe cómo se representa el componente, tal cosa sucede naturalmente aquí.
 
-We just need to add a `click` handler to open/close the list, and the `<custom-menu>` is ready:
+Solo necesitamos agregar un `click` handler para abrir / cerrar la lista, y el `<custom-menu>` está listo:
 
 ```js
 customElements.define('custom-menu', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
 
-    // tmpl is the shadow DOM template (above)
+    // tmpl es la plantilla del shadow DOM (arriba)
     this.shadowRoot.append( tmpl.content.cloneNode(true) );
 
-    // we can't select light DOM nodes, so let's handle clicks on the slot
+    // no podemos seleccionar nodos del light DOM, así que manejemos los clics en el slot
     this.shadowRoot.querySelector('slot[name="title"]').onclick = () => {
-      // open/close the menu
+      // abrir/cerrar el menú
       this.shadowRoot.querySelector('.menu').classList.toggle('closed');
     };
   }
 });
 ```
 
-Here's the full demo:
+Aquí está la demostración completa:
 
 [iframe src="menu" height=140 edit]
 
-Of course, we can add more functionality to it: events, methods and so on.
+Por supuesto, podemos agregarle más funcionalidad: eventos, métodos, etc.
 
-## Updating slots
+## Actualizar slots
 
-What if the outer code wants to add/remove menu items dynamically?
+¿Qué pasa si el código externo quiere agregar / eliminar elementos de menú dinámicamente?
 
-**The browser monitors slots and updates the rendering if slotted elements are added/removed.**
+**El navegador monitorea los slots y actualiza la representación si se agregan / eliminan elementos sloteados.**
 
-Also, as light DOM nodes are not copied, but just rendered in slots, the changes inside them immediately become visible.
+Además, como los nodos del light DOM no se copian, sino que simplemente se renderizan en los slots, los cambios dentro de ellos se hacen visibles de inmediato.
 
-So we don't have to do anything to update rendering. But if the component code wants to know about slot changes, then `slotchange` event is available.
+Así que no tenemos que hacer nada para actualizar el renderizado. Pero si el código del componente quiere saber acerca de los cambios del slot, entonces el evento `slotchange` está disponible.
 
-For example, here the menu item is inserted dynamically after 1 second, and the title changes after 2 seconds:
+Por ejemplo, aquí el elemento del menú se inserta dinámicamente después de 1 segundo y el título cambia después de 2 segundos.:
 
 ```html run untrusted height=80
 <custom-menu id="menu">
-  <span slot="title">Candy menu</span>
+  <span slot="title">Menú de dulces</span>
 </custom-menu>
 
 <script>
@@ -344,7 +343,7 @@ customElements.define('custom-menu', class extends HTMLElement {
       <ul><slot name="item"></slot></ul>
     </div>`;
 
-    // shadowRoot can't have event handlers, so using the first child
+    // shadowRoot no puede tener controladores de eventos, por lo que usar el primer hijo
     this.shadowRoot.firstElementChild.addEventListener('slotchange',
       e => alert("slotchange: " + e.target.name)
     );
@@ -352,49 +351,49 @@ customElements.define('custom-menu', class extends HTMLElement {
 });
 
 setTimeout(() => {
-  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Lollipop</li>')
+  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Paletas</li>')
 }, 1000);
 
 setTimeout(() => {
-  menu.querySelector('[slot="title"]').innerHTML = "New menu";
+  menu.querySelector('[slot="title"]').innerHTML = "Nuevo menú";
 }, 2000);
 </script>
 ```
 
-The menu rendering updates each time without our intervention.
+La representación del menú se actualiza cada vez sin nuestra intervención..
 
-There are two `slotchange` events here:
+Hay dos eventos `slotchange` aquí:
 
-1. At initialization:
+1. En la inicialización:
 
-    `slotchange: title` triggers immediately, as the `slot="title"` from the light DOM gets into the corresponding slot.
-2. After 1 second:
+    `slotchange: title` se dispara inmediatamente, cuando el `slot="title"` desde el light DOM entra en el slot correspondiente.
+2. Después de 1 segundo:
 
-    `slotchange: item` triggers, when a new `<li slot="item">` is added.
+    `slotchange: item` se activa, cuando se agrega un nuevo `<li slot ="item">`.
 
-Please note: there's no `slotchange` event after 2 seconds, when the content of `slot="title"` is modified. That's because there's no slot change. We modify the content inside the slotted element, that's another thing.
+Tenga en cuenta: no hay ningún evento `slotchange` después de 2 segundos, cuando se modifica el contenido de `slot = "title"`. Eso es porque no hay cambio en el slot. Modificamos el contenido dentro del elemento esloteado, eso es otra cosa.
 
-If we'd like to track internal modifications of light DOM from JavaScript, that's also possible using a more generic mechanism: [MutationObserver](info:mutation-observer).
+Si quisiéramos rastrear las modificaciones internas del Light DOM desde JavaScript, eso también es posible usando un mecanismo más genérico: [MutationObserver](info:mutation-observer).
 
 ## Slot API
 
-Finally, let's mention the slot-related JavaScript methods.
+Finalmente, mencionemos los métodos JavaScript relacionados con los slots.
 
-As we've seen before, JavaScript looks at the "real" DOM, without flattening. But, if the shadow tree has `{mode: 'open'}`, then we can figure out which elements assigned to a slot and, vise-versa, the slot by the element inside it:
+Como hemos visto antes, JavaScript mira el DOM "real", sin aplanar. Pero, si el shadow tree tiene `{mode: 'open'}`, entonces podemos averiguar qué elementos asignados a un slot y, viceversa, el slot por el elemento dentro de el:
 
-- `node.assignedSlot` -- returns the `<slot>` element that the `node` is assigned to.
-- `slot.assignedNodes({flatten: true/false})` -- DOM nodes, assigned to the slot. The `flatten` option is `false` by default. If explicitly set to `true`, then it looks more deeply into the flattened DOM, returning nested slots in case of nested components and the fallback content if no node assigned.
-- `slot.assignedElements({flatten: true/false})` -- DOM elements, assigned to the slot (same as above, but only element nodes).
+- `node.assignedSlot` -- retorna el elemento `<slot>` al que está asignado el `nodo`.
+- `slot.assignedNodes({flatten: true/false})` -- Nodos DOM, asignados al slot. La opción `flatten` es `false` por defecto. Si se establece explícitamente a `true`, entonces mira más profundamente en el flattened DOM, retornando slots anidadas en caso de componentes anidados y el contenido de respaldo si ningun node esta asignado.
+- `slot.assignedElements({flatten: true/false})` -- Elementos DOM, asignados al slot (igual que arriba, pero solo nodos de elementos).
 
-These methods are useful when we need not just show the slotted content, but also track it in JavaScript.
+Estos métodos son útiles cuando no solo necesitamos mostrar el contenido esloteado, sino también rastrearlo en JavaScript.
 
-For example, if `<custom-menu>` component wants to know, what it shows, then it could track `slotchange` and get the items from `slot.assignedElements`:
+Por ejemplo, si el componente `<custom-menu>` quiere saber qué muestra, entonces podría rastrear `slotchange` y obtener los elementos de `slot.assignedElements`:
 
 ```html run untrusted height=120
 <custom-menu id="menu">
-  <span slot="title">Candy menu</span>
-  <li slot="item">Lollipop</li>
-  <li slot="item">Fruit Toast</li>
+  <span slot="title">Menú de dulces</span>
+  <li slot="item">Paletas</li>
+  <li slot="item">Tostada de frutas</li>
 </custom-menu>
 
 <script>
@@ -408,7 +407,7 @@ customElements.define('custom-menu', class extends HTMLElement {
       <ul><slot name="item"></slot></ul>
     </div>`;
 
-    // triggers when slot content changes
+    // se activa cuando cambia el contenido del slot
 *!*
     this.shadowRoot.firstElementChild.addEventListener('slotchange', e => {
       let slot = e.target;
@@ -421,37 +420,37 @@ customElements.define('custom-menu', class extends HTMLElement {
   }
 });
 
-// items update after 1 second
+// se actualizan después de 1 segundo
 setTimeout(() => {
-  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>')
+  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Magdalenas</li>')
 }, 1000);
 </script>
 ```
 
 
-## Summary
+## Resumen
 
-Usually, if an element has shadow DOM, then its light DOM is not displayed. Slots allow to show elements from light DOM in specified places of shadow DOM.
+Por lo general, si un elemento tiene shadow DOM, no se muestra su light DOM. Los slots permiten mostrar elementos del light DOM en lugares específicos del shadow DOM.
 
-There are two kinds of slots:
+Hay dos tipos de slots:
 
-- Named slots: `<slot name="X">...</slot>` -- gets light children with `slot="X"`.
-- Default slot: the first `<slot>` without a name (subsequent unnamed slots are ignored) -- gets unslotted light children.
-- If there are many elements for the same slot -- they are appended one after another.
-- The content of `<slot>` element is used as a fallback. It's shown if there are no light children for the slot.
+- Named slots: `<slot name="X">...</slot>` -- consigue los light children con `slot="X"`.
+- Default slot: el primer `<slot>` sin un nombre (los slots subsiguientes sin nombre se ignoran) -- obtien light children sin slotear.
+- Si hay muchos elementos para el mismo slot, se añaden uno tras otro.
+- El contenido del elemento `<slot>` se utiliza como respaldo. Se muestra si no hay light children para el slot.
 
-The process of rendering slotted elements inside their slots is called "composition". The result is called a "flattened DOM".
+El proceso de renderizar elementos sloteados dentro de sus slots se llama "composición". El resultado se denomina "flattened DOM".
 
-Composition does not really move nodes, from JavaScript point of view the DOM is still same.
+La composición no mueve realmente los nodos, desde el punto de vista de JavaScript, el DOM sigue siendo el mismo.
 
-JavaScript can access slots using methods:
-- `slot.assignedNodes/Elements()` -- returns nodes/elements inside the `slot`.
-- `node.assignedSlot` -- the reverse property, returns slot by a node.
+JavaScript puede acceder a los slots mediante methods:
+- `slot.assignedNodes/Elements()` -- retorna nodos / elementos dentro del `slot`.
+- `node.assignedSlot` -- la propiedad inversa, retorna el slot por un nodo.
 
-If we'd like to know what we're showing, we can track slot contents using:
-- `slotchange` event -- triggers the first time a slot is filled, and on any add/remove/replace operation of the slotted element, but not its children. The slot is `event.target`.
-- [MutationObserver](info:mutation-observer) to go deeper into slot content, watch changes inside it.
+Si nos gustaría saber qué mostramos, podemos rastrear el contenido de los slots usando:
+- `slotchange` event -- se activa la primera vez que se llena un slot, y en cualquier operación de agregar / quitar / reemplazar del elemento esloteado, pero no sus hijos. El slot es `event.target`.
+- [MutationObserver](info:mutation-observer) para profundizar en el contenido del slot, mira los cambios en su interior.
 
-Now, as we know how to show elements from light DOM in shadow DOM, let's see how to style them properly. The basic rule is that shadow elements are styled inside, and light elements -- outside, but there are notable exceptions.
+Ahora, como sabemos cómo mostrar elementos del light DOM en el shadow DOM, veamos cómo diseñarlos correctamente. La regla básica es que los shadow elements se diseñan en el interior y los light elements -- afuera, pero hay notables excepciones.
 
-We'll see the details in the next chapter.
+Veremos los detalles en el próximo capítulo.

From d86e408bd07b0cf71dfad3ae7a5cb84e81db3b66 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Thu, 14 Oct 2021 08:59:40 -0400
Subject: [PATCH 02/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index ab2a234f6..a17c5b194 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -157,7 +157,7 @@ Este flattened DOM con dos elementos en `<slot name="username">`:
 
 Si ponemos algo dentro de un `<slot>`, se convierte en el contenido alternativo, "predeterminado". El navegador lo muestra si no hay un relleno correspondiente en el Light DOM.
 
-Por ejemplo, en esta parte del shadow DOM, `Anónimo` se representa si no hay `slot="username"` en el light DOM.
+Por ejemplo, en esta parte del shadow DOM, se representa `Anónimo` si no hay `slot="username"` en el light DOM.
 
 ```html
 <div>Name:

From aae4aebd11fec268520a168a23157dc522cee880 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 10:54:05 -0400
Subject: [PATCH 03/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index a17c5b194..56724f32c 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -49,6 +49,7 @@ customElements.define('user-card', class extends HTMLElement {
   }
 });
 </script>
+
 <user-card>
   <span *!*slot="username"*/!*>John Smith</span>
   <span *!*slot="birthday"*/!*>01.01.2001</span>

From 82bf64cb662d723c74ae0f84e3bd1a792d55c82a Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 10:54:55 -0400
Subject: [PATCH 04/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 56724f32c..d2083623a 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -112,7 +112,7 @@ alert( document.querySelectorAll('user-card span').length ); // 2
 
 Entonces, el flattened DOM se deriva del shadow DOM insertando slots. El navegador lo renderiza y lo usa para la herencia de estilo, la propagación de eventos (más sobre esto más adelante). Pero JavaScript todavía ve el documento "tal cual", antes de acoplarlo.
 
-````warn header="Solo los nodos children de alto nivel pueden tener el atributo slot=\"...\" "
+````warn header="Solo los nodos hijos de alto nivel pueden tener el atributo slot=\"...\" "
 El atributo `slot =" ... "` solo es válido para los hijos directos del shadow host (en nuestro ejemplo, el elemento `<user-card>`). Para los elementos anidados, se ignora.
 
 Por ejemplo, el segundo `<span>` aquí se ignora (ya que no es un elemento hijo de nivel superior de `<user-card>`):

From f7b1b3e4a8987294469e753c0154ef1766e33ead Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 10:58:39 -0400
Subject: [PATCH 05/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index d2083623a..c8e23d303 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -166,7 +166,7 @@ Por ejemplo, en esta parte del shadow DOM, se representa `Anónimo` si no hay `s
 </div>
 ```
 
-## Slot predeterminado: sin nombre primero
+## Slot predeterminado: el primero sin nombre
 
 El primer `<slot>` en el shadow DOM que no tiene un nombre es un slot "predeterminado". Obtiene todos los nodos del light DOM que no están ubicados en otro lugar.
 

From 81643dff58a09a855bb49959a20497a09dd22db4 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 10:59:52 -0400
Subject: [PATCH 06/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index c8e23d303..91e750747 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -293,7 +293,7 @@ El flattened DOM se convierte en:
 
 Uno podría notar que, en un DOM válido, `<li>` debe ser un hijo directo de `<ul>`. Pero esto es flattened DOM, describe cómo se representa el componente, tal cosa sucede naturalmente aquí.
 
-Solo necesitamos agregar un `click` handler para abrir / cerrar la lista, y el `<custom-menu>` está listo:
+Solo necesitamos agregar un manejador de `click` para abrir / cerrar la lista, y el `<custom-menu>` está listo:
 
 ```js
 customElements.define('custom-menu', class extends HTMLElement {

From fc5090da3b39a2fd9d62a360dd344a9a3f914b0b Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:01:31 -0400
Subject: [PATCH 07/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 91e750747..20a8fbfc3 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -344,7 +344,7 @@ customElements.define('custom-menu', class extends HTMLElement {
       <ul><slot name="item"></slot></ul>
     </div>`;
 
-    // shadowRoot no puede tener controladores de eventos, por lo que usar el primer hijo
+    // shadowRoot no puede tener controladores de eventos, por lo que se usa el primer hijo
     this.shadowRoot.firstElementChild.addEventListener('slotchange',
       e => alert("slotchange: " + e.target.name)
     );

From 19ee397c7c1ee6ad97998a08335215828189f060 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:03:27 -0400
Subject: [PATCH 08/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 20a8fbfc3..a068cb30e 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -372,7 +372,7 @@ Hay dos eventos `slotchange` aquí:
 
     `slotchange: item` se activa, cuando se agrega un nuevo `<li slot ="item">`.
 
-Tenga en cuenta: no hay ningún evento `slotchange` después de 2 segundos, cuando se modifica el contenido de `slot = "title"`. Eso es porque no hay cambio en el slot. Modificamos el contenido dentro del elemento esloteado, eso es otra cosa.
+Observa que no hay ningún evento `slotchange` después de 2 segundos, cuando se modifica el contenido de `slot = "title"`. Eso es porque no hay cambio en el slot. Modificamos el contenido dentro del elemento esloteado, eso es otra cosa.
 
 Si quisiéramos rastrear las modificaciones internas del Light DOM desde JavaScript, eso también es posible usando un mecanismo más genérico: [MutationObserver](info:mutation-observer).
 

From b6d1a6dc5fa0ee58177462ad6ca3084ee730a401 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:16:01 -0400
Subject: [PATCH 09/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index a068cb30e..8488e897d 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -383,7 +383,7 @@ Finalmente, mencionemos los métodos JavaScript relacionados con los slots.
 Como hemos visto antes, JavaScript mira el DOM "real", sin aplanar. Pero, si el shadow tree tiene `{mode: 'open'}`, entonces podemos averiguar qué elementos asignados a un slot y, viceversa, el slot por el elemento dentro de el:
 
 - `node.assignedSlot` -- retorna el elemento `<slot>` al que está asignado el `nodo`.
-- `slot.assignedNodes({flatten: true/false})` -- Nodos DOM, asignados al slot. La opción `flatten` es `false` por defecto. Si se establece explícitamente a `true`, entonces mira más profundamente en el flattened DOM, retornando slots anidadas en caso de componentes anidados y el contenido de respaldo si ningun node esta asignado.
+- `slot.assignedNodes({flatten: true/false})` -- Nodos DOM, asignados al slot. La opción `flatten` es `false` por defecto. Si se establece explícitamente a `true`, entonces mira más profundamente en el flattened DOM, retornando slots anidadas en caso de componentes anidados y el contenido de respaldo si ningún node está asignado.
 - `slot.assignedElements({flatten: true/false})` -- Elementos DOM, asignados al slot (igual que arriba, pero solo nodos de elementos).
 
 Estos métodos son útiles cuando no solo necesitamos mostrar el contenido esloteado, sino también rastrearlo en JavaScript.

From 618d69cabda60cd05d8c3eab7abb6bc25de180d1 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:23:38 -0400
Subject: [PATCH 10/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 8488e897d..7497483f5 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -1,6 +1,6 @@
 # Shadow DOM slots, composición
 
-Muchos tipos de componentes, como pestañas, menús, galerías de imágenes, etc, necesitan el contenido para renderizar.
+Muchos tipos de componentes; como pestañas, menús, galerías de imágenes, etc., necesitan renderizar contenido.
 
 Al igual que el `<select>` nativo del navegador espera elementos de `<option>`, nuestros `<custom-tabs>` pueden esperar que se pase el contenido real de la pestaña. Y un `<custom-menu>` puede esperar elementos de menú.
 

From 19ff453168374f065f36adec734b141f6fe9da1c Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:27:26 -0400
Subject: [PATCH 11/16] Cambios sugeridos localmente.

---
 8-web-components/5-slots-composition/article.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 7497483f5..0a34924e2 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -27,7 +27,7 @@ Afortunadamente, no tenemos que hacerlo. Shadow DOM soporta elementos `<slot>`,
 
 Veamos cómo funcionan los slots en un ejemplo simple.
 
-Aquí, el shadow DOM `<user-card>` proporciona dos slots, llenas de light DOM:
+Aquí, el shadow DOM `<user-card>` proporciona dos slots, que se llenan desde el light DOM:
 
 ```html run autorun="no-epub" untrusted height=80
 <script>
@@ -82,7 +82,7 @@ Para fines de renderizado, para cada `<slot name="...">` en el shadow DOM, el na
 
 ![](shadow-dom-user-card.svg)
 
-El resultado se llama "flattened" DOM:
+El resultado se llama "flattened DOM" (DOM aplanado):
 
 ```html
 <user-card>
@@ -156,7 +156,7 @@ Este flattened DOM con dos elementos en `<slot name="username">`:
 
 ## Slot con contenido alternativo
 
-Si ponemos algo dentro de un `<slot>`, se convierte en el contenido alternativo, "predeterminado". El navegador lo muestra si no hay un relleno correspondiente en el Light DOM.
+Si ponemos algo dentro de un `<slot>`, se convierte en el contenido alternativo, "predeterminado". El navegador lo muestra si no tiene un equivalente en el Light DOM desde donde llenarlo.
 
 Por ejemplo, en esta parte del shadow DOM, se representa `Anónimo` si no hay `slot="username"` en el light DOM.
 
@@ -380,7 +380,7 @@ Si quisiéramos rastrear las modificaciones internas del Light DOM desde JavaScr
 
 Finalmente, mencionemos los métodos JavaScript relacionados con los slots.
 
-Como hemos visto antes, JavaScript mira el DOM "real", sin aplanar. Pero, si el shadow tree tiene `{mode: 'open'}`, entonces podemos averiguar qué elementos asignados a un slot y, viceversa, el slot por el elemento dentro de el:
+Como hemos visto antes, JavaScript busca en el DOM "real", sin aplanar. Pero, si el shadow tree tiene `{mode: 'open'}`, averiguar qué elementos hay asignados a un slot y, viceversa, averiguar el slot por el elemento dentro de el:
 
 - `node.assignedSlot` -- retorna el elemento `<slot>` al que está asignado el `nodo`.
 - `slot.assignedNodes({flatten: true/false})` -- Nodos DOM, asignados al slot. La opción `flatten` es `false` por defecto. Si se establece explícitamente a `true`, entonces mira más profundamente en el flattened DOM, retornando slots anidadas en caso de componentes anidados y el contenido de respaldo si ningún node está asignado.
@@ -450,8 +450,8 @@ JavaScript puede acceder a los slots mediante methods:
 
 Si nos gustaría saber qué mostramos, podemos rastrear el contenido de los slots usando:
 - `slotchange` event -- se activa la primera vez que se llena un slot, y en cualquier operación de agregar / quitar / reemplazar del elemento esloteado, pero no sus hijos. El slot es `event.target`.
-- [MutationObserver](info:mutation-observer) para profundizar en el contenido del slot, mira los cambios en su interior.
+- [MutationObserver](info:mutation-observer) para profundizar en el contenido del slot, observar los cambios en su interior.
 
-Ahora, como sabemos cómo mostrar elementos del light DOM en el shadow DOM, veamos cómo diseñarlos correctamente. La regla básica es que los shadow elements se diseñan en el interior y los light elements -- afuera, pero hay notables excepciones.
+Ahora que, como sabemos cómo mostrar elementos del light DOM en el shadow DOM, veamos cómo diseñarlos correctamente. La regla básica es que los elementos shadow se diseñan en el interior y los elementos light se diseñan afuera, pero hay notables excepciones.
 
 Veremos los detalles en el próximo capítulo.

From a2d17a2f47ba48f3700fe89166c404c8f61aa6f2 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Fri, 15 Oct 2021 11:28:34 -0400
Subject: [PATCH 12/16] Update 8-web-components/5-slots-composition/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 0a34924e2..25d00ebb6 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -227,7 +227,7 @@ El flattened DOM se ve así:
       </slot>
     </div>
     <fieldset>
-      <legend>Otra informacion</legend>
+      <legend>Otra información</legend>
 *!*
       <slot>
         <div>Me gusta nadar.</div>

From 523bc9608f5c1db895dc040d9f80434a769f1495 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Fri, 15 Oct 2021 16:21:52 -0300
Subject: [PATCH 13/16] Update article.md

---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 25d00ebb6..c609753e8 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -127,7 +127,7 @@ Por ejemplo, el segundo `<span>` aquí se ignora (ya que no es un elemento hijo
 ```
 ````
 
-Si hay varios elementos en el light DOM con el mismo nombre de slot, se añaden a al slot, uno tras otro.
+Si hay varios elementos en el light DOM con el mismo nombre de slot, se añaden al slot, uno tras otro.
 
 Por ejemplo, este:
 ```html

From 5b99a3ac001a69e198a33f0045cb9e2913898bcc Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Fri, 15 Oct 2021 16:27:06 -0300
Subject: [PATCH 14/16] Update article.md

---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index c609753e8..37edee287 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -370,7 +370,7 @@ Hay dos eventos `slotchange` aquí:
     `slotchange: title` se dispara inmediatamente, cuando el `slot="title"` desde el light DOM entra en el slot correspondiente.
 2. Después de 1 segundo:
 
-    `slotchange: item` se activa, cuando se agrega un nuevo `<li slot ="item">`.
+    `slotchange: item` se activa, cuando se agrega un nuevo `<li slot="item">`.
 
 Observa que no hay ningún evento `slotchange` después de 2 segundos, cuando se modifica el contenido de `slot = "title"`. Eso es porque no hay cambio en el slot. Modificamos el contenido dentro del elemento esloteado, eso es otra cosa.
 

From 8d7b97cb63162352aee27c670316e992421eab59 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Fri, 15 Oct 2021 16:30:45 -0300
Subject: [PATCH 15/16] Update article.md

---
 8-web-components/5-slots-composition/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 37edee287..413f005ac 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -436,7 +436,7 @@ Por lo general, si un elemento tiene shadow DOM, no se muestra su light DOM. Los
 Hay dos tipos de slots:
 
 - Named slots: `<slot name="X">...</slot>` -- consigue los light children con `slot="X"`.
-- Default slot: el primer `<slot>` sin un nombre (los slots subsiguientes sin nombre se ignoran) -- obtien light children sin slotear.
+- Default slot: el primer `<slot>` sin un nombre (los slots subsiguientes sin nombre se ignoran) -- obtiene light children sin slotear.
 - Si hay muchos elementos para el mismo slot, se añaden uno tras otro.
 - El contenido del elemento `<slot>` se utiliza como respaldo. Se muestra si no hay light children para el slot.
 

From 7f87e6fe439c25576285c6bc96bac652e827d6d9 Mon Sep 17 00:00:00 2001
From: Max Sierra <fr3shkid16@gmail.com>
Date: Mon, 18 Oct 2021 08:58:25 -0400
Subject: [PATCH 16/16] Update 18/10

---
 8-web-components/5-slots-composition/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 413f005ac..3aa964b90 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -444,11 +444,11 @@ El proceso de renderizar elementos sloteados dentro de sus slots se llama "compo
 
 La composición no mueve realmente los nodos, desde el punto de vista de JavaScript, el DOM sigue siendo el mismo.
 
-JavaScript puede acceder a los slots mediante methods:
+JavaScript puede acceder a los slots mediante estos métodos:
 - `slot.assignedNodes/Elements()` -- retorna nodos / elementos dentro del `slot`.
 - `node.assignedSlot` -- la propiedad inversa, retorna el slot por un nodo.
 
-Si nos gustaría saber qué mostramos, podemos rastrear el contenido de los slots usando:
+Si queremos saber, podemos rastrear el contenido de los slots usando:
 - `slotchange` event -- se activa la primera vez que se llena un slot, y en cualquier operación de agregar / quitar / reemplazar del elemento esloteado, pero no sus hijos. El slot es `event.target`.
 - [MutationObserver](info:mutation-observer) para profundizar en el contenido del slot, observar los cambios en su interior.