Cómo usar los slots en Astro
Tags: astro, javascript, webdev
Published: 2023-11-02 04:20:09

Actualmente estoy migrando mi portafolio a **Astro**, un nuevo framework para crear sitios estáticos (si otro…), y para ello utilice un concepto llamado **slots**. A continuación, explicaré **¿Qué son los slots?**

Los **slots** son espacios reservados dentro de un componente donde se puede insertar contenido HTML.

## Construyendo nuestro primer slot

Primero, creamos un nuevo archivo de Astro dentro de la carpeta /src/layouts llamado **PrimerSlot.astro**.

**Astro** tiene una etiqueta especial para indicarle donde queremos colocar el contenido HTML desde otro componente.

```javascript
<section>

    <h1>Hola estoy en el componente padre.</h1>
    <slot /> <!-- Aqui mostrará contenido html desde otro componente  -->

</section>
```

## Usando nuestro primer slot

Para utilizar el componente creado, debemos crear un nuevo archivo dentro de la carpeta **/src/pages** llamado **PaginaUtilizandoElPrimerSlot.astro** e importar nuestro componente padre **PrimerSlot** que acabamos de crear.

```javascript
---
import PrimerSlot from "../layouts/PrimerSlot.astro";
---
<html lang="es">
  <head>
    <title>
			Página utilizando el primer slot
		</title>
  </head>
  <body>
    <PrimerSlot />
			<h1>Hola, aqui mostrare una lista :P </h1>
	    <ul>
					<li>Soy una lista</li>
					<li>usando slots</li>
			<ul>
    <PrimerSlot />
  </body>
</html>
```

## Más de un slots (Named Slots)

**Astro** también permite utilizar más un **slot**. Para lograrlo, debemos asignar un nombre a cada slot para poder identificarlos. Creamos un nuevo archivo de **Astro** dentro de la carpeta **/src/layouts** llamado **MultiplesSlots.astro**.

Crearemos un slot para el encabezado (header) y otro para el pie de página (footer) utilizando named slots.

```javascript
<div class="container">
    <header>

        <slot name="header" />

    </header>
    <main>

        <slot></slot>

    </main>
    <footer>

        <slot name="footer" />

    </footer>
</div>
```

## Usando componente con múltiples slots

Debemos crear un nuevo archivo dentro de la carpeta **/src/pages** llamado **PaginaConMultiplesSlots.astro** e importar nuestro componente **MultiplesSlots** que acabamos de crear.

Para especificar el nombre del **slot**, debemos utilizar el atributo slot. Todos los demás serán insertados en el slot por default.

```javascript
---
import MultiplesSlots from "../layouts/MultiplesSlots.astro";
---
<html lang="en">
  <head>
    <title>
			Página con multiples slots
		</title>
  </head>
  <body>
    <MultiplesSlots />

			<h1 slot="header">Hola, estoy usando el slot header.</h1>

			<p>Hola, estoy usando el slot por default dentro de main.</p>
			<p>Hola, yo tambien.</p>

			<p slot="footer">Hola, estoy usando el slot footer.</p>

    <MultiplesSlots />
  </body>
</html>
```

## Conclusión

La utilización de los **slots** nos permite tener componentes padre con una estructura definida y reservar áreas específicas para poder incorporar variaciones de contenido.

## Referencias

[Documentación Astro - Slots](https://docs.astro.build/es/core-concepts/astro-components/#slots)
[Using-slots-to-build-layouts-in-astro - ElianCodes](https://www.elian.codes/blog/21-09-25-using-slots-to-build-layouts-in-astro/)