Construir un layout con slot

El hueco donde entra la página

El <slot /> es un elemento marcador de posición. Cuando una página escribe <Base>...</Base>, todo lo que ponga entre la etiqueta de apertura y la de cierre —lo que Astro llama los hijos del componente— se renderiza exactamente donde el layout haya colocado su <slot />. El layout no sabe qué contenido va a recibir; solo reserva el sitio. La página no sabe cómo es el marco; solo entrega su interior. Cada uno ignora al otro, y esa ignorancia mutua es lo que hace la composición robusta.

Conviene fijar el vocabulario, porque volverá una y otra vez. Al layout se le llama el componente envolvente; a lo que la página coloca entre sus etiquetas, los hijos o el contenido proyectado; y al acto de que esos hijos aparezcan dentro del layout, proyección. Son tres nombres para una sola mecánica: el contenido de fuera se proyecta en el hueco de dentro.

Este patrón no es invención de Astro: es la proyección de contenido de los Web Components estándar, y el primo hermano de la prop children de React. En todos los casos la idea es la misma —un componente reserva un hueco y quien lo usa lo rellena—, pero en Astro ocurre en tiempo de compilación y no cuesta ni un byte de JavaScript en el cliente. El <slot /> es una costura del build, no un mecanismo del navegador.

Construir el layout paso a paso

Un layout mínimo pero completo tiene el documento entero y un único <slot /> en el punto donde debe entrar el contenido, casi siempre dentro del <main>.

---// src/layouts/Base.astro---<!doctype html><html lang="es">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Mi sitio</title>  </head>  <body>    <header>      <nav><a href="/">Inicio</a> · <a href="/blog">Blog</a></nav>    </header>    <main>      <slot />    </main>    <footer>© 2026 Mi sitio</footer>  </body></html>

Cada parte cumple un papel. El <!doctype html> y el <html> establecen el documento; el <head> reúne los metadatos; la cabecera y el pie son el marco visible constante; y el <slot /> dentro del <main> es la única grieta por la que entra lo que cambia. Fíjate en que el <slot /> se escribe autocerrado, igual que una etiqueta HTML vacía: no envuelve nada por sí mismo, solo señala una posición.

La posición del <slot /> importa tanto como su existencia. Ponlo dentro del <main> y el contenido de cada página quedará envuelto por la semántica de contenido principal, con la cabecera antes y el pie después. Muévelo fuera del <main> y romperías esa estructura. El layout no solo decide qué rodea al contenido, sino con qué etiquetas lo rodea, y esa decisión afecta a la accesibilidad y al SEO de todas las páginas a la vez.

Contenido por defecto y el slot vacío

Un <slot /> puede no estar vacío. Si escribes contenido entre sus etiquetas, ese contenido actúa como valor por defecto: se muestra solo cuando quien usa el layout no entrega nada para ese hueco. En cuanto la página aporta hijos, el contenido por defecto desaparece y es reemplazado por completo.

<main>  <slot>    <p>Esta página todavía no tiene contenido.</p>  </slot></main>

La semántica es la de un respaldo, no la de un añadido: el contenido por defecto y el de la página nunca conviven. O uno, o el otro. Esto es útil para regiones opcionales de un layout —una barra lateral que a veces no se rellena, un aviso que solo aparece si la página no puso el suyo— donde quieres una alternativa sensata en lugar de un hueco en blanco.

Cómo una página usa el layout

Del otro lado, la página importa el layout como cualquier componente y envuelve su contenido entre las etiquetas de apertura y cierre. Todo lo que quede dentro se convierte en los hijos que aterrizarán en el <slot />.

---// src/pages/index.astroimport Base from '../layouts/Base.astro';---<Base>  <h1>Bienvenido</h1>  <p>Este párrafo aterriza en el slot del layout.</p></Base>

Observa la inversión que se ha producido. La página ya no abre un <html>, ni declara un <head>, ni dibuja una cabecera: ha delegado todo eso en el layout. Se ha encogido hasta su esencia —lo único que la distingue de cualquier otra ruta— y el marco se lo pone Base desde fuera. Comparada con la página del capítulo anterior, cargada de armazón repetido, esta dice exactamente lo que tiene que decir y ni una etiqueta más.