Un componente de Svelte no tiene por qué tener un único slot para introducir descendencia, sino que podremos fabricar componentes donde haya varios slots, aunque en ese caso existen algunas restricciones a tener en cuenta: que cada slot tenga un nombre único, y que cada slot vaya asociado con un...

Los slots son huecos que tienen los componentes y que pueden ser rellenados por los componentes descendientes. La idea es permitir crear componentes más reusables, o componentes de alto nivel, donde se pueden proporcionar a un componente ya no solo atributos, sino también todo un nodo DOM descendiente.

El operador $ (dolar o peso) sirve para declarar secciones que tienen que re-evaluarse cuando un componente se actualice y se repinte. Esto es necesario cuando tenemos propiedades en un componente que no se actualizan directamente, pero que son derivadas de otras propiedades que sí se van a actualizar.

Cuando todo vaya a ser global, será más eficiente tener una hoja de estilos externa que importemos desde JavaScript. Esta técnica también la podemos usar para importar hojas de estilo procedentes de npm, que se ponen en el bloque script, por raro que parezca.

Cómo aprovechar los estilos globales para que unos componentes puedan crear estilos que no tengan modificadores locales y así ser funcionales en toda la aplicación, un recurso que podemos usar para definir el look and feel global de la aplicación, como pueda ser tipografía y colores principales.

Con los estilos en línea se puede meter pequeños cambios a estilo usando directamente la etiqueta style. Svelte soporta el atributo style estandar de HTML, pero también alguna sorpresilla más.

Las clases condicionales permiten utilizar en función de una determinada condición una clase u otra, y es un recurso muy práctico, por ejemplo, para señalar clases cuando un estado es inválido o en general para hacer que el aspecto de un componente dependa en sus propiedades.

Comenzamos el módulo de CSS hablando de lo más simple: cómo haríamos para incorporar estilos a una aplicación de Svelte. El resultado probablemente no te sorprenda: dentro de la etiqueta style de cada componente de Svelte se pueden insertar estilos CSS y usarlos localmente en el componente como se ha...

Aparentemente no hablé acerca de esto antes. Los modificadores de eventos permiten declarar aspectos adicionales sobre un evento. La lista completá está en la documentación de Svelte, pero los que creo que vais a encontrar más útiles son el modificador preventDefault, para añadirle automáticamente un preventDefault a cualquier evento, y...

En la segunda parte del ejemplo vamos a crear los componentes que quedan, que requieren un poco más de caso, antes de considerar este ejemplo como completado. Veremos cómo crear eventos propios y cómo propagar hacia arriba mediante binds.