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 dónde se puede insertar contenido HTML.
Veamos un ejemplo de como 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 <slot /> para indicarle donde queremos colocar el contenido HTML desde otro componente.
<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 ello debemos colocar 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 header y footer usando 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.
Debemos usar el atributo slot para especificar el nombre del slot. Todos los demas seran 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 dejar áreas específicas para poder tener variaciones de contenido.