Los slots en Svelte son una herramienta fundamental para construir componentes más flexibles y reutilizables. Nos permiten insertar contenido HTML personalizado dentro de otros componentes, superando las limitaciones que tienen los atributos cuando queremos pasar estructuras DOM más complejas.
Para entenderlo mejor, imaginemos que queremos crear un componente llamado Seccion que represente una sección en una barra lateral. Este componente podría tener un título fijo, por ejemplo un h1, y luego un contenido variable que queramos mostrar dentro. Una forma sencilla sería pasar el título como un atributo, algo así como titulo="Menú del día". Pero, ¿qué pasa si queremos pasar varios párrafos con estilos, negritas o cursivas? Intentar meter todo eso en atributos se vuelve poco práctico y limitado.
Aquí es donde entran en juego los slots. Con ellos, podemos definir un espacio dentro del componente donde se insertará el contenido que le pasemos desde fuera, incluyendo todo el árbol DOM que queramos. Para usar un slot, simplemente colocamos una etiqueta <slot> dentro del componente. Por ejemplo, nuestro componente Seccion podría tener esta estructura:
<script>
export let titulo;
</script>
<section>
<h1>{titulo}</h1>
<slot></slot>
</section>
Luego, cuando usemos este componente, podemos pasarle cualquier contenido dentro de sus etiquetas, y ese contenido reemplazará el slot:
<Seccion titulo="Menú del día">
<p>Chopitos</p>
<p><strong>Pescado</strong> y <em>fruta</em> del día</p>
</Seccion>
Esto nos da mucha libertad para componer interfaces con contenido dinámico y estructurado sin complicarnos con atributos para cada elemento.
Además, los slots pueden tener un contenido por defecto o fallback. Esto significa que si no pasamos nada dentro del slot, se mostrará un contenido predeterminado. Por ejemplo, si definimos el slot así:
<slot>
<p>Pregunte en la barra</p>
</slot>
Cuando usemos el componente sin contenido dentro, aparecerá el mensaje Pregunte en la barra. Pero si le pasamos algo, ese contenido sustituirá al fallback.
Esta característica es muy útil para evitar que la interfaz quede vacía cuando no se proporciona contenido, asegurando que siempre haya algo visible para el usuario.
En resumen, los slots en Svelte nos permiten importar árboles DOM completos dentro de componentes, facilitando la creación de interfaces más escalables y personalizables. En la siguiente parte profundizaremos en los slots con nombre, que nos ofrecen aún más control sobre dónde y cómo insertar contenido dentro de nuestros componentes.