i18n(es): update guides/client-side-scripts.mdx

src/content/docs/es/guides/client-side-scripts.mdx

@@ -16,7 +16,6 @@ Los scripts pueden ser usados para agregar event listeners, enviar datos de anal
 Astro mejora automáticamente la etiqueta estándar HTML `<script>` con empaquetado, TypeScript y mucho más. Consulta [cómo procesa Astro los scripts](#procesamiento-de-scripts) para obtener más detalles.
 
 ```astro title="src/components/ConfettiButton.astro"
-<!-- src/components/ConfettiButton.astro -->
 <button data-confetti-button>¡Celebrar!</button>
 
 <script>
@@ -44,7 +43,6 @@ De forma predeterminada, Astro procesa las etiquetas `<script>` que no contienen
 - **Tipo de módulo:** Los scripts procesados se convierten automáticamente en [`type="module"`](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules).
 - **Deduplicación:** Si un componente que contiene un `<script>` se utiliza varias veces en una página, el script solo se incluirá una vez.
 - **Inline automático:** Si el script es lo suficientemente pequeño, Astro lo insertará directamente en el HTML para reducir el número de solicitudes.
-
 ```astro title="src/components/Example.astro"
 <script>
   // ¡Procesado! ¡Empaquetado! ¡TypeScript!
@@ -60,6 +58,7 @@ Puedes añadir la directiva [`is:inline`](/es/reference/directives-reference/#is
 
 ```astro title="src/components/InlineScript.astro" "is:inline"
 <script is:inline>
+  // ¡Se renderizará en el HTML exactamente como está escrito!
   // Sin transformar: sin TypeScript y sin resolución de importaciones por parte de Astro.
   // Si se utiliza dentro de un componente, este código se duplica para cada instancia.
 </script>
@@ -123,6 +122,7 @@ En su lugar, puedes usar [`addEventListener`](https://developer.mozilla.org/es/d
 
 Si tienes múltiples componentes `<AlertButton />` en una página, Astro no ejecutará el script múltiples veces. Los scripts son empaquetados y solo incluidos una vez en la página. Usando `querySelectorAll` asegura que este script agregue el event listener a cada botón con la clase `alert` en la página.
 
+
 ### Componentes Web con elementos personalizados
 
 Puedes crear tus propios elementos HTML con comportamiento personalizado usando el estándar de componentes Web. Definir un [elemento personalizado](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements) en un componente `.astro` te permite crear componentes interactivos sin necesidad de un framework.
@@ -141,19 +141,21 @@ En este ejemplo, definimos un nuevo elemento HTML `<astro-heart>` que rastrea cu
     connectedCallback() {
       let count = 0;
 
-      const heartButton = this.querySelector('button');
-      const countSpan = this.querySelector('span');
+      const heartButton = this.querySelector("button");
+      const countSpan = this.querySelector("span");
 
       // Cada vez que el button es clickeado, actualiza el contador.
-			heartButton.addEventListener('click', () => {
-        count++;
-        countSpan.textContent = count.toString();
-      });
+      if (heartButton && countSpan) {
+        heartButton.addEventListener("click", () => {
+          count++;
+          countSpan.textContent = count.toString();
+        });
+      }
 		}
   }
 
   // Dile al navegador que use nuestra clase AstroHeart para elementos <astro-heart>.
-  customElements.define('astro-heart', AstroHeart);
+  customElements.define("astro-heart", AstroHeart);
 </script>
 ```
 
@@ -163,7 +165,7 @@ Hay dos ventajas de usar un elemento personalizado aqui:
 
 2. Aunque un `<script>` solo se ejecuta una vez, el navegador ejecutará método `connectedCallback()` de nuestro elemento cada vez que encuentre `<astro-heart>` en la página. Esto significa que puedes escribir forma segura código para un componente a la vez, incluso si tienes la intención de utilizar este componente varias veces en una página.
 
-<ReadMore>Puedes aprender más sobre elementos personalizaods en [la guía de Componentes Web Reusables de web.dev](https://web.dev/custom-elements-v1/) y en [la introducción de MDN a elementos personalizados](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements).</ReadMore>
+<ReadMore>Puedes aprender más sobre elementos personalizados en [la guía de Componentes Web Reusables de web.dev](https://web.dev/custom-elements-v1/) y en [la introducción de MDN a elementos personalizados](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements).</ReadMore>
 
 ### Pasando variables frontmatter a scripts
 
@@ -189,10 +191,10 @@ const { message = '¡Bienvenido, mundo!' } = Astro.props;
       // Lee el mensaje del atributo data.
       const message = this.dataset.message;
       const button = this.querySelector('button');
-      button.addEventListener('click', () => {
+      button?.addEventListener('click', () => {
         alert(message);
       });
-		}
+    }
   }
 
   customElements.define('astro-greet', AstroGreet);