Svelte 22: Snippets — Fragmentos Reutilizables Locales
easy⏱ 5 mincoursesvelte
Declara una vez, renderiza muchas veces
Un snippet luce como una mini función plantilla: {#snippet statRow(label, value, color)}...{/snippet}. Dentro escribes markup normal de Svelte usando los nombres de los parámetros. Lo invocas en cualquier parte del mismo archivo con {@render statRow('Users', 1240, '#3ecf8e')}.
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}
{@render greeting('Alice')}
{@render greeting('Bob')}
No es un componente, ni un store
Un snippet no tiene objeto de props, ni ciclo de vida, y no puede importarse en otro archivo — es reutilización de markup simple, con alcance limitado al componente que lo declara. Usa un componente real cuando el fragmento necesite su propia lógica de script o deba compartirse entre archivos.
Agrega una cuarta fila de estadística
Agrega una nueva entrada al arreglo stats (por ejemplo { label: 'Uptime', value: '99.9%', color: '#3ecf8e' }) y renderízala con una cuarta llamada {@render statRow(...)}, reutilizando el mismo snippet.