Cuando trabajamos con componentes en Svelte, no estamos limitados a tener un único slot para insertar contenido externo. Podemos definir múltiples slots dentro de un mismo componente, lo que nos permite crear estructuras más complejas y flexibles. Sin embargo, para que esto funcione correctamente, es necesario asignar un nombre a cada slot mediante el atributo name. Esto es fundamental porque, sin nombres, Svelte no podría distinguir a qué slot corresponde cada fragmento de contenido que queremos insertar.
Imaginemos que queremos que nuestro componente tenga una cabecera y un cuerpo, cada uno con contenido personalizado. En lugar de usar un solo slot para todo, podemos definir un slot llamado header para la cabecera y otro llamado main para el cuerpo. Si no se proporciona contenido para alguno de estos slots, podemos definir un contenido por defecto, como un simple título con una etiqueta h1.
Para asociar contenido externo a estos slots nombrados, utilizamos el atributo slot en las etiquetas que queremos insertar. Por ejemplo, si tenemos un párrafo que queremos que se inserte en el slot main, lo escribiremos así:
<p slot="main">Contenido para el slot principal</p>
Es importante entender que el elemento que recibe el atributo slot se inserta tal cual en el lugar del slot correspondiente, incluyendo su propia etiqueta HTML. Esto significa que si ponemos un strong con slot="header", ese strong aparecerá en el slot header con su etiqueta intacta. Por ejemplo:
<h1 slot="header">Título principal</h1>
<strong slot="header">Texto destacado</strong>
En este caso, el contenido del slot header será reemplazado por el elemento que hayamos definido con el atributo slot="header".
Un detalle importante es que cada slot nombrado solo puede tener un único elemento raíz. No podemos asignar varios elementos hermanos directamente a un mismo slot, ya que esto generaría un error. Para solucionar esto, podemos envolver esos elementos en un contenedor, como un div, y asignarle el atributo slot a ese contenedor. Por ejemplo:
<div slot="main">
<p>Chopitos</p>
<p>Pescado</p>
<p>Fruta</p>
</div>
Esto asegura que el slot main reciba un único elemento raíz, que a su vez contiene varios elementos hijos.
Sin embargo, en algunos casos, añadir un contenedor extra como un div puede romper la maquetación o afectar el estilo de nuestra aplicación, ya que introduce un nodo adicional en el DOM. Para evitar esto, Svelte nos ofrece una solución muy útil: la etiqueta especial <svelte:fragment>. Esta etiqueta actúa como un contenedor invisible que no genera un nodo extra en el DOM, pero nos permite agrupar varios elementos para asignarlos a un slot nombrado.
Así, si queremos insertar varios párrafos en un slot sin añadir un contenedor visible, podemos hacerlo de la siguiente manera:
<svelte:fragment slot="main">
<p>Chopitos</p>
<p>Pescado</p>
<p>Fruta</p>
</svelte:fragment>
Con esto, el contenido se insertará directamente en el slot main sin añadir etiquetas adicionales que puedan interferir con la maquetación.
En resumen, el uso de múltiples slots nombrados en Svelte nos permite crear componentes mucho más flexibles y personalizados, controlando exactamente dónde y cómo se inserta cada fragmento de contenido. Además, con la ayuda de <svelte:fragment>, podemos evitar problemas de maquetación derivados de contenedores innecesarios, manteniendo nuestra estructura limpia y funcional.