Slots
El elemento <slot /> es un espacio reservado para contenido HTML externo, permitiéndote inyectar (o ingresar en la “ranura”) elementos hijos provenientes de otros archivos en el maquetado de tu componente.
Por defecto, todos los elementos hijos que le sean enviados a un componente serán renderizados en su <slot />.
---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';
const { titulo } = Astro.props
---
<div id="content-wrapper">
<Header />
<Logo />
<h1>{titulo}</h1>
<slot /> <!-- aquí van los hijos -->
<Footer />
</div>
👀 OJO:
Los slots son diferentes a las props, que son atributos enviados a un componente Astro y disponibles para utilizar con Astro.props. Los slots renderizan elementos HTML hijos donde se lo indique.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?