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.
Veamos un ejemplo de cómo crearlo y utilizarlo.
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
<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.
---
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.
<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.
---
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.