Composición avanzada: named slots

Cuando un solo hueco no basta

Imagina que quieres que tu layout reciba tres zonas de contenido distintas: la cabecera, el cuerpo y el pie. Con un único <slot /> no hay forma de decir cuál va dónde.

Para eso existen los named slots: huecos con nombre.

Definirlos

Dentro del componente, da un nombre a cada slot:

Has añadido dos slots con nombre (header y footer) y dejado el slot por defecto en el medio.

Llenarlos desde el padre

Desde la página, marca cada elemento con el atributo slot="..." para indicar a qué hueco va:

Astro distribuye cada elemento donde su slot= indique. Lo que no lleva slot= cae en el slot por defecto.

Fallback por slot

Cada slot puede tener su contenido por defecto:

Si el padre no inyecta nada, se ve el fallback.

¿Cuándo usar named slots?

Buenos casos:

• Layouts con secciones fijas (header, sidebar, footer).
• Cards con header / body / actions.
• Modales con title / content / footer.
• Tabs o cualquier UI con zonas predeterminadas.

Si el componente tiene un único bloque libre, un <slot /> por defecto es suficiente.

Más allá: comprobar si un slot tiene contenido

Astro expone Astro.slots.has("header") en el frontmatter. Útil para esconder zonas vacías:

Tu desafío 🚀

Tienes:

1. src/layouts/BaseLayout.astro con <header>, <main> (y un slot dentro) y <footer>.
2. src/pages/index.astro que ya usa el layout.

Tu trabajo:

• En el layout: dentro del <header>, mete <slot name="header" />. Dentro del <footer>, <slot name="footer" />.
• En la página: añade un elemento con slot="header" (un <h1> con el título de la página) y otro con slot="footer" (un <small> con copyright o créditos).

Si no marcas nada, el contenido va al slot por defecto. Es la combinación de los dos modos lo que da flexibilidad real al layout.