Named slots: varios huecos con nombre

Declarar huecos con nombre

Un slot con nombre es un <slot /> con un atributo name. Ese nombre lo convierte en un destino direccionable: una zona con identidad propia dentro del componente, distinta de las demás.

---// src/components/Tarjeta.astro---<article class="tarjeta">  <header>    <slot name="cabecera" />  </header>  <div class="cuerpo">    <slot />  </div>  <footer>    <slot name="pie" />  </footer></article>

Tarjeta declara tres aberturas distintas. Dos llevan nombre —cabecera y pie— y una no lo lleva: es el slot por defecto, el mismo de la lección anterior. Cada zona queda encajada en su propia estructura —la cabecera dentro del <header>, el pie dentro del <footer>— de modo que el componente no solo separa el contenido en regiones, sino que envuelve cada región con la etiqueta semántica que le toca.

Dirigir contenido: el atributo slot

Del lado del padre, cada fragmento hijo elige su destino con el atributo slot, cuyo valor debe coincidir con el nombre del hueco. Lo que no lleve ese atributo cae en el slot por defecto.

---// src/pages/precios.astroimport Tarjeta from '../components/Tarjeta.astro';---<Tarjeta>  <h3 slot="cabecera">Plan Pro</h3>  <p>Todo lo del plan base, más analíticas e integraciones.</p>  <a slot="pie" href="/alta">Contratar</a></Tarjeta>

El <h3> lleva slot="cabecera", así que aterriza en <slot name="cabecera" />; el <a> lleva slot="pie" y va al pie. El <p>, que no declara ningún slot, cae en el hueco por defecto y forma el cuerpo. Cada hijo se enruta por su atributo, y el reparto queda explícito en el punto de uso: leyendo la página se sabe qué va a cada zona sin abrir el componente.

El orden en que escribes los hijos no altera su destino: un fragmento con slot="pie" va al pie aunque lo pongas primero en la página. El atributo manda sobre la posición en el código, lo que te deja ordenar el marcado del padre por claridad —cabecera, cuerpo, pie— sin atarlo a que ese orden coincida con el de las zonas declaradas en el hijo.

Cuando una zona necesita varios elementos, no hace falta inventar un contenedor solo para colgarle el atributo slot. <Fragment> agrupa varios nodos bajo un mismo destino sin dejar rastro en el HTML.

<Tarjeta>  <Fragment slot="cabecera">    <h3>Plan Pro</h3>    <span class="insignia">Nuevo</span>  </Fragment></Tarjeta>

El patrón tarjeta y la reutilización

Estas tres zonas forman un patrón clásico de interfaz, y su fuerza está en que la estructura permanece fija mientras el contenido varía. La misma Tarjeta produce una ficha de precio, un artículo de blog o un aviso, porque cada padre rellena las zonas con lo que necesita sin tocar el componente.

Para ver la reutilización en acción, la misma tarjeta sirve para un contenido por completo distinto sin cambiar una línea de su código: una noticia con imagen en la cabecera y una fecha en el pie.

<Tarjeta>  <img slot="cabecera" src="/portada.jpg" alt="Portada del artículo" />  <p>Astro 7 estabiliza el renderizado en el servidor y afina los islands.</p>  <time slot="pie" datetime="2026-07">Julio de 2026</time></Tarjeta>

Fíjate en el reparto de responsabilidades. La tarjeta decide el orden de las zonas, sus etiquetas semánticas y su estilo; el padre decide qué contenido llena cada una. Rediseñar la tarjeta —mover el pie, cambiar el <header>— afecta a todos sus usos a la vez, y ninguno se rompe, porque el contrato entre ambos es un mapa de nombres, no un acuerdo sobre el contenido concreto.

Reglas de emparejamiento

El sistema es simple, pero tiene esquinas que conviene conocer para no perseguir fantasmas cuando una zona aparece vacía.

Del emparejamiento se derivan tres reglas más. Varios fragmentos con el mismo slot se concatenan en el orden del documento, así que puedes mandar dos elementos a una zona sin agruparlos. Todo lo que no lleve atributo slot se acumula en el hueco por defecto. Y si el padre proyecta contenido sin marca pero el componente no declara un <slot /> por defecto, ese contenido no tiene dónde ir y se pierde sin aviso.

<Tarjeta>  <h3 slot="cabecera">Plan Pro</h3>  <span slot="cabecera" class="insignia">Nuevo</span>  <p>Ambos elementos anteriores se concatenan dentro del header, en este orden.</p></Tarjeta>