Las props funcionan bien para datos sencillos: strings, números, booleans. Pero ¿y cuando el contenido que quiero pasar es HTML rico?
Pasar todo eso como una prop sería incómodo. La solución: slots.
<slot />Dentro de un componente .astro, <slot /> es el hueco donde se inyecta lo que el padre escribe entre las etiquetas:
Y al usarlo:
Astro coloca todo lo que está entre <Card>...</Card> en el lugar donde pusiste <slot />. Así de simple.
Una regla práctica:
title, count, disabled)A menudo combinas las dos cosas, como en el ejemplo de arriba.
Puedes escribir un fallback dentro de <slot> para cuando el padre no envíe nada:
Si <Card> se usa sin children, se ve el fallback.
Un slot recibe todo lo que esté entre las etiquetas. No hay límite: párrafos, otros componentes, fragmentos de markdown, lo que sea.
En la próxima lección veremos named slots: poder colocar contenido en zonas concretas del componente (un slot para el header, otro para el footer, etc.).
Los slots heredan atributos especiales: class:list, set:html, etc. La directiva más útil:
(Lo veremos en la lección 9.)
Tu componente Card.astro ya recibe un title como prop. Vamos a sustituir la idea de body por un slot, para poder pasar HTML completo.
En Card.astro:
title.<p>{body}</p> por un <slot />.En index.astro:
<Card title="...">...</Card>.<strong>, listas, otros tags.Si lo haces bien, las tarjetas pueden tener contenido distinto y rico, no solo strings planos. Los slots son la base de los layouts (lo siguiente que aprenderás).