Cuando trabajamos con Esbelte, una de las habilidades fundamentales que debemos dominar es la creación de componentes anidados. Esta técnica nos permite construir aplicaciones modulares y organizadas, donde cada parte de la interfaz se encapsula en un componente independiente que puede contener a su vez otros componentes. Así, podemos pensar en una aplicación como un conjunto jerárquico de piezas que se ensamblan para formar una experiencia completa.
Para ilustrar esto, imaginemos que queremos crear un componente llamado Interior que muestre un saludo personalizado. Lo primero que hacemos es crear un archivo interior.esbelte dentro de la carpeta src. En este componente, definimos un encabezado que saluda a un nombre que recibirá como propiedad (prop). Además, le aplicamos un estilo sencillo para diferenciarlo visualmente, por ejemplo, un color púrpura y un tamaño de fuente de 2.5 rem.
<script>
export let nombre;
</script>
<h1 style="color: purple; font-size: 2.5rem;">
Hola, {nombre}
</h1>
Una vez que tenemos este componente, podemos utilizarlo dentro del componente principal, que suele ser App. Para ello, primero importamos Interior en el archivo App.esbelte con la sintaxis habitual de importación, asegurándonos de incluir la extensión .esbelte para que el compilador lo reconozca correctamente.
<script>
import Interior from './interior.esbelte';
</script>
Luego, para insertar el componente en el marcado, usamos una etiqueta con el mismo nombre que la variable importada, respetando la mayúscula inicial para diferenciarlo de las etiquetas HTML estándar. Si el componente no tiene contenido hijo, cerramos la etiqueta con una barra diagonal al final, como en <Interior />.
<Interior nombre="Dani" />
Es importante pasar las propiedades que el componente espera. En este caso, Interior requiere la prop nombre, que le proporcionamos como un atributo en la etiqueta. Si olvidamos pasarla, Esbelte nos avisará de que falta ese dato.
Además, podemos pasar variables como props usando llaves para interpolar su valor. Por ejemplo, si tenemos una variable momento con el valor "bonita tarde", podemos pasarla así:
<script>
import Interior from './interior.esbelte';
let momento = "bonita tarde";
</script>
<Interior nombre={momento} />
Esto hará que el saludo muestre Hola, bonita tarde. También existe una sintaxis abreviada para pasar props cuando el nombre del atributo y el de la variable coinciden. En lugar de escribir nombre={nombre}, podemos simplemente escribir:
<Interior {nombre} />
Esto es especialmente útil para mantener el código limpio y legible.
Un detalle que merece la pena destacar es cómo Esbelte maneja los estilos de los componentes. Aunque usemos etiquetas HTML iguales en diferentes componentes, sus estilos se aíslan para evitar conflictos. Por ejemplo, un <h1> en App y otro en Interior pueden tener estilos distintos sin interferir entre sí, gracias a que Esbelte genera clases únicas para cada componente.
Finalmente, la convención de usar mayúsculas para los nombres de componentes es clave para que Esbelte distinga entre etiquetas HTML nativas y componentes personalizados. Esto facilita la lectura del código y evita confusiones, siguiendo una práctica común en frameworks modernos como React y Vue.
Con estas bases, podemos empezar a construir aplicaciones más complejas y organizadas, combinando componentes anidados y pasando datos entre ellos de forma sencilla y clara.