Invocando Snippets con Precisión

Donde #snippet define bloques de marcado reutilizables, el tag @render es quien les da vida. Esta división de responsabilidades crea una poderosa separación entre cómo se ve el contenido y dónde aparece.

Este tutorial asume que estás familiarizado/a con los conceptos básicos de snippets del artículo #snippet. Aquí nos enfocamos en los patrones de invocación: renderizado opcional, selección dinámica, el patrón children y la construcción de APIs de componentes sofisticadas.

Invocación Básica

El uso más simple de @render llama a un snippet sin argumentos:

{#snippet logo()}
	<svg viewBox="0 0 100 100" class="logo">
		<circle cx="50" cy="50" r="40" fill="currentColor" />
	</svg>
{/snippet}

<header>
	{@render logo()}
	<h1>My Application</h1>
</header>

<footer>
	{@render logo()}
</footer>

El snippet logo se define una sola vez pero se renderiza dos veces. Cualquier cambio en la definición se propaga automáticamente a ambos lugares.

Renderizado con Argumentos

Pasa datos a snippets parametrizados:

{#snippet userCard(name, role)}
	<div class="user-card">
		<h3>{name}</h3>
		<span class="role">{role}</span>
	</div>
{/snippet}

{@render userCard('Alice Chen', 'Lead Developer')}
{@render userCard('Bob Smith', 'UI Designer')}

Los argumentos fluyen hacia el snippet igual que los argumentos de una función. Para datos complejos, pasa objetos:

{#snippet productCard(product)}
	<article class="product">
		<h3>{product.name}</h3>
		<p class="price">${product.price.toFixed(2)}</p>
	</article>
{/snippet}

{#each products as product (product.id)}
	{@render productCard(product)}
{/each}

Snippets Opcionales: Patrones de Renderizado Seguro

Un escenario común: una prop de tipo snippet puede o no estar provista. Intentar renderizar un snippet undefined lanza un error. Svelte ofrece dos patrones para manejar esto de forma elegante.

1. Encadenamiento Opcional

El enfoque más simple usa el operador de encadenamiento opcional de JavaScript:

<script>
	let { icon, children } = $props()
</script>

<button class="btn">
	{@render icon?.()}
	{@render children?.()}
</button>

Si icon es undefined, icon?.() evalúa a undefined y no se renderiza nada—sin error, sin elemento vacío. Esto es perfecto cuando el contenido faltante simplemente significa "no mostrar nada".

2. Renderizado Condicional con Fallback

Cuando necesitas contenido de respaldo para snippets faltantes, usa un bloque {#if}:

<script>
	let { header, children, footer } = $props()
</script>

<article class="card">
	{#if header}
		<header class="card-header">
			{@render header()}
		</header>
	{:else}
		<header class="card-header">
			<span class="default-header">Untitled</span>
		</header>
	{/if}

	<div class="card-body">
		{#if children}
			{@render children()}
		{:else}
			<p class="empty-state">No content provided</p>
		{/if}
	</div>

	{@render footer?.()}
</article>

Esto demuestra ambos patrones:

header tiene un fallback cuando falta
children tiene un fallback diferente (mensaje de estado vacío)
footer simplemente no se renderiza si está ausente

Cadenas de Fallback en Cascada

Combina condicionales con encadenamiento opcional para lógica de fallback sofisticada:

<script>
	let { primaryAction, secondaryAction, tertiaryAction } = $props()
</script>

<div class="action-bar">
	{#if primaryAction}
		{@render primaryAction()}
	{:else if secondaryAction}
		{@render secondaryAction()}
	{:else}
		{@render tertiaryAction?.()}
		{#if !tertiaryAction}
			<button class="default-action">Continue</button>
		{/if}
	{/if}
</div>

Esto crea un fallback en cascada: intenta con primaryAction, luego secondaryAction, luego tertiaryAction, y finalmente un valor predeterminado hardcodeado.

Selección Dinámica de Snippets

El tag de renderizado acepta cualquier expresión que evalúe a un snippet—no solo identificadores. Esto habilita poderosos patrones dinámicos.

Selección Ternaria

Elige entre snippets según una condición:

<script>
	let isExpanded = $state(false)
</script>

{#snippet compactView(item)}
	<div class="compact">{item.title}</div>
{/snippet}

{#snippet expandedView(item)}
	<div class="expanded">
		<h3>{item.title}</h3>
		<p>{item.description}</p>
	</div>
{/snippet}

{#each items as item}
	{@render (isExpanded ? expandedView : compactView)(item)}
{/each}

<button onclick={() => (isExpanded = !isExpanded)}>
	{isExpanded ? 'Collapse' : 'Expand'} All
</button>

Los paréntesis alrededor de la expresión ternaria son necesarios—agrupan la expresión antes de la invocación ().

Lógica Condicional para Múltiples Opciones

Para más de dos opciones, usa bloques condicionales:

<script>
	let viewMode = $state('grid') // 'grid' | 'list' | 'table'
</script>

{#snippet gridView(items)}
	<div class="grid">
		{#each items as item}
			<div class="grid-card">{item.name}</div>
		{/each}
	</div>
{/snippet}

{#snippet listView(items)}
	<ul class="list">
		{#each items as item}
			<li class="list-item">{item.name}</li>
		{/each}
	</ul>
{/snippet}

{#snippet tableView(items)}
	<table>
		<tbody>
			{#each items as item}
				<tr><td>{item.name}</td><td>{item.status}</td></tr>
			{/each}
		</tbody>
	</table>
{/snippet}

{#if viewMode === 'grid'}
	{@render gridView(items)}
{:else if viewMode === 'list'}
	{@render listView(items)}
{:else}
	{@render tableView(items)}
{/if}

Selección Basada en Funciones

Para una selección con lógica compleja, encapsula la decisión en una función:

<script>
	function getRenderer(item) {
		if (item.type === 'image') return imageRenderer
		if (item.type === 'video') return videoRenderer
		return fallbackRenderer
	}
</script>

{#snippet imageRenderer(item)}
	<img src={item.src} alt={item.alt} />
{/snippet}

{#snippet videoRenderer(item)}
	<video src={item.src} controls></video>
{/snippet}

{#snippet fallbackRenderer(item)}
	<div class="unknown-type">Unsupported: {item.type}</div>
{/snippet}

{#each mediaItems as item}
	{@render getRenderer(item)(item)}
{/each}

Los paréntesis dobles—getRenderer(item)(item)—primero llaman a la función para obtener un snippet, y luego invocan ese snippet.

Usando `$derived` para Selección Dinámica

Combina $derived con la selección de snippets para un renderizado reactivo y computado:

<script>
	let { items, filter = '' } = $props()

	let filteredItems = $derived(
		items.filter((item) => item.name.toLowerCase().includes(filter.toLowerCase()))
	)

	let hasResults = $derived(filteredItems.length > 0)
</script>

{#snippet itemList(items)}
	<ul>
		{#each items as item (item.id)}
			<li>{item.name}</li>
		{/each}
	</ul>
{/snippet}

{#snippet emptyState()}
	<div class="empty">
		<p>No items found matching "{filter}"</p>
	</div>
{/snippet}

{@render (hasResults ? itemList : emptyState)(filteredItems)}

El Patrón de Snippet `children`

Cuando se coloca contenido dentro de las etiquetas de un componente sin un wrapper #snippet, Svelte crea automáticamente un snippet llamado children:

<!-- Parent component usage -->
<Card>
	<h2>Welcome Back</h2>
	<p>You have 3 new notifications.</p>
</Card>

<!-- Card.svelte -->
<script>
	let { children } = $props()
</script>

<article class="card">
	{@render children?.()}
</article>

Pasando Datos de Vuelta a través de Children

Los componentes pueden pasar datos de regreso al snippet children, habilitando patrones de componentes "sin renderizado" o "headless":

<!-- DataProvider.svelte -->
<script>
	let { url, children } = $props()

	let data = $state(null)
	let loading = $state(true)
	let error = $state(null)

	$effect(() => {
		loading = true
		fetch(url)
			.then((r) => r.json())
			.then((d) => {
				data = d
				loading = false
			})
			.catch((e) => {
				error = e
				loading = false
			})
	})
</script>

{@render children?.({ data, loading, error })}

<!-- Usage -->
<DataProvider url="/api/users">
	{#snippet children({ data, loading, error })}
		{#if loading}
			<p>Loading...</p>
		{:else if error}
			<p>Error: {error.message}</p>
		{:else}
			<ul>
				{#each data as user}
					<li>{user.name}</li>
				{/each}
			</ul>
		{/if}
	{/snippet}
</DataProvider>

El DataProvider gestiona la lógica mientras delega el renderizado completamente a los consumidores.

Patrones de Diseño de API de Componentes

Al construir componentes reutilizables, los snippets y el tag de renderizado permiten una proyección y personalización flexible del contenido. Existen dos patrones principales para pasar snippets como props.

Props de Snippet Explícitos vs Implícitos

Los snippets pueden pasarse tanto de forma explícita (como props con nombre) como implícita (definidos dentro de las etiquetas del componente):

Explícito:

{#snippet header()}
	<th>Name</th><th>Email</th>
{/snippet}

<Table data={users} {header} />

Implícito:

<Table data={users}>
	{#snippet header()}
		<th>Name</th><th>Email</th>
	{/snippet}
</Table>

Ambos enfoques producen un comportamiento idéntico—la elección es estilística. Los props implícitos agrupan visualmente los snippets relacionados con su componente destino.

Componente Flexible con Múltiples Puntos de Renderizado

<!-- DataTable.svelte -->
<script>
	let { data, header, row, emptyState } = $props()
</script>

<table class="data-table">
	{#if header}
		<thead>{@render header()}</thead>
	{/if}
	<tbody>
		{#if data.length > 0}
			{#each data as item (item.id)}
				{@render row(item)}
			{/each}
		{:else if emptyState}
			<tr><td colspan="100%">{@render emptyState()}</td></tr>
		{:else}
			<tr><td colspan="100%">No data available</td></tr>
		{/if}
	</tbody>
</table>

Uso:

<DataTable data={users}>
	{#snippet header()}
		<tr><th>Name</th><th>Email</th><th>Actions</th></tr>
	{/snippet}

	{#snippet row(user)}
		<tr>
			<td>{user.name}</td>
			<td>{user.email}</td>
			<td><button onclick={() => edit(user)}>Edit</button></td>
		</tr>
	{/snippet}

	{#snippet emptyState()}
		<div class="empty">
			<img src="/empty-table.svg" alt="" />
			<p>No users found</p>
		</div>
	{/snippet}
</DataTable>

Patrones del Mundo Real

En aplicaciones del mundo real, la etiqueta render y los snippets habilitan patrones avanzados para la composición de componentes, contenedores de estado y estructuras recursivas. Exploremos ejemplos prácticos que encontrarás en aplicaciones en producción.

1. Composición de Layout

Los componentes de layout frecuentemente aceptan múltiples props de snippet para diferentes regiones:

<!-- Layout.svelte -->
<script>
	let { header, sidebar, children, footer } = $props()
</script>

<div class="layout">
	<header class="layout-header">
		{#if header}
			{@render header()}
		{:else}
			<nav class="default-nav"><a href="/">Home</a></nav>
		{/if}
	</header>

	<div class="layout-body">
		{#if sidebar}
			<aside class="layout-sidebar">{@render sidebar()}</aside>
		{/if}
		<main class="layout-main">{@render children?.()}</main>
	</div>

	{@render footer?.()}
</div>

2. Patrón Modal/Diálogo

Los modales se benefician de la proyección de contenido basada en snippets y $bindable para la gestión de estado:

<!-- Modal.svelte -->
<script>
	let { isOpen = $bindable(false), title, children, footer } = $props()

	let dialogEl = $state(null)

	$effect(() => {
		if (isOpen && dialogEl) {
			dialogEl.showModal()
		} else if (!isOpen && dialogEl) {
			dialogEl.close()
		}
	})

	function handleClose() {
		isOpen = false
	}
</script>

<dialog bind:this={dialogEl} onclose={handleClose}>
	<header>
		{#if title}
			<h2>{title}</h2>
		{/if}
		<button onclick={handleClose} aria-label="Close">×</button>
	</header>

	<div class="content">
		{@render children?.()}
	</div>

	{#if footer}
		<footer>{@render footer()}</footer>
	{/if}
</dialog>

<style>
	dialog {
		max-width: 500px;
		border-radius: 8px;
		border: 1px solid #ccc;
	}

	dialog::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}
</style>

Uso:

<script>
	let showModal = $state(false)

	function handleDelete() {
		// Delete logic
		showModal = false
	}
</script>

<button onclick={() => (showModal = true)}>Delete Item</button>

<Modal bind:isOpen={showModal} title="Confirm Action">
	<p>Are you sure you want to delete this item? This action cannot be undone.</p>

	{#snippet footer()}
		<button onclick={() => (showModal = false)}>Cancel</button>
		<button onclick={handleDelete} class="danger">Delete</button>
	{/snippet}
</Modal>

3. Patrón de Componente de Pestañas

Las pestañas demuestran la selección dinámica de snippets con gestión de estado:

<!-- Tabs.svelte -->
<script>
	let { tabs = [], activeTab = $bindable(0), children } = $props()
</script>

<div class="tabs">
	<div role="tablist">
		{#each tabs as tab, index}
			<button
				role="tab"
				aria-selected={activeTab === index}
				tabindex={activeTab === index ? 0 : -1}
				onclick={() => (activeTab = index)}
			>
				{tab}
			</button>
		{/each}
	</div>

	<div role="tabpanel">
		{@render children?.(activeTab)}
	</div>
</div>

<style>
	.tabs {
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	[role='tablist'] {
		display: flex;
		gap: 4px;
		border-bottom: 1px solid #ddd;
		padding: 8px;
	}

	[role='tab'] {
		padding: 8px 16px;
		border: none;
		background: transparent;
		cursor: pointer;
	}

	[role='tab'][aria-selected='true'] {
		border-bottom: 2px solid blue;
	}

	[role='tabpanel'] {
		padding: 16px;
	}
</style>

Uso:

<script>
	let activeTab = $state(0)
</script>

<Tabs tabs={['Profile', 'Settings', 'Notifications']} bind:activeTab>
	{#snippet children(index)}
		{#if index === 0}
			<h3>Profile</h3>
			<p>Manage your profile information</p>
		{:else if index === 1}
			<h3>Settings</h3>
			<p>Configure your preferences</p>
		{:else}
			<h3>Notifications</h3>
			<p>Manage notification settings</p>
		{/if}
	{/snippet}
</Tabs>

4. Patrón de Estado de Carga

Maneja los estados de carga, error y éxito de manera elegante:

<!-- LoadingState.svelte -->
<script>
	let { loading, error, data, skeleton, errorFallback, children } = $props()
</script>

{#if loading}
	{#if skeleton}
		{@render skeleton()}
	{:else}
		<div class="skeleton-loader" aria-busy="true" aria-live="polite">
			<div class="skeleton-line"></div>
			<div class="skeleton-line"></div>
			<div class="skeleton-line short"></div>
		</div>
	{/if}
{:else if error}
	{#if errorFallback}
		{@render errorFallback(error)}
	{:else}
		<div class="error-state" role="alert">
			<p>Something went wrong: {error.message}</p>
		</div>
	{/if}
{:else}
	{@render children?.(data)}
{/if}

<style>
	.skeleton-loader {
		padding: 16px;
	}

	.skeleton-line {
		height: 16px;
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: loading 1.5s infinite;
		margin-bottom: 8px;
		border-radius: 4px;
	}

	.skeleton-line.short {
		width: 60%;
	}

	@keyframes loading {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}
</style>

Uso:

<script>
	let users = $state(null)
	let loading = $state(true)
	let error = $state(null)

	$effect(() => {
		fetch('/api/users')
			.then((r) => r.json())
			.then((data) => {
				users = data
				loading = false
			})
			.catch((err) => {
				error = err
				loading = false
			})
	})
</script>

<LoadingState {loading} {error} data={users}>
	{#snippet skeleton()}
		<div class="user-skeleton">
			<div class="skeleton-avatar"></div>
			<div class="skeleton-text"></div>
			<div class="skeleton-text short"></div>
		</div>
	{/snippet}

	{#snippet errorFallback(err)}
		<div class="custom-error">
			<h3>Failed to load users</h3>
			<p>{err.message}</p>
			<button onclick={() => window.location.reload()}>Retry</button>
		</div>
	{/snippet}

	{#snippet children(userData)}
		<ul class="user-list">
			{#each userData as user (user.id)}
				<li>{user.name}</li>
			{/each}
		</ul>
	{/snippet}
</LoadingState>

5. Sistema de Notificaciones Toast

Construye un sistema de notificaciones flexible con renderizado personalizable:

<!-- ToastContainer.svelte -->
<script>
	let { toasts = [], toast, position = 'top-right' } = $props()

	function removeToast(id) {
		toasts = toasts.filter((t) => t.id !== id)
	}
</script>

<div class="toast-container toast-{position}">
	{#each toasts as item (item.id)}
		{#if toast}
			{@render toast(item, removeToast)}
		{:else}
			<div class="toast toast-{item.type}">
				{item.message}
				<button onclick={() => removeToast(item.id)} aria-label="Close notification"> × </button>
			</div>
		{/if}
	{/each}
</div>

<style>
	.toast-container {
		position: fixed;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 16px;
	}

	.toast-top-right {
		top: 0;
		right: 0;
	}

	.toast {
		background: white;
		padding: 12px 16px;
		border-radius: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 300px;
	}

	.toast-success {
		border-left: 4px solid green;
	}

	.toast-error {
		border-left: 4px solid red;
	}
</style>

Uso con renderizado personalizado:

<script>
	let toasts = $state([])
	let nextId = $state(1)

	function addToast(type, title, message) {
		toasts = [...toasts, { id: nextId++, type, title, message }]
	}
</script>

<ToastContainer {toasts}>
	{#snippet toast(item, onClose)}
		<article class="custom-toast" class:success={item.type === 'success'}>
			<header>
				<strong>{item.title}</strong>
				<button onclick={() => onClose(item.id)} aria-label="Close">×</button>
			</header>
			<p>{item.message}</p>
		</article>
	{/snippet}
</ToastContainer>

<button onclick={() => addToast('success', 'Success!', 'Your changes have been saved.')}>
	Show Toast
</button>

6. Contenedor de Estado Sin Renderizado

Un componente "renderless" gestiona el estado y lo pasa a los hijos para su renderizado:

<!-- Toggleable.svelte -->
<script>
	let { children, initialOpen = false } = $props()

	let isOpen = $state(initialOpen)

	function toggle() {
		isOpen = !isOpen
	}

	function open() {
		isOpen = true
	}

	function close() {
		isOpen = false
	}
</script>

{@render children({ isOpen, toggle, open, close })}

Uso:

<Toggleable>
	{#snippet children({ isOpen, toggle })}
		<div class="accordion">
			<button onclick={toggle} aria-expanded={isOpen}>
				FAQ: How do I reset my password?
				<span>{isOpen ? '−' : '+'}</span>
			</button>
			{#if isOpen}
				<div class="accordion-body">
					<p>Click on "Forgot Password" on the login page...</p>
				</div>
			{/if}
		</div>
	{/snippet}
</Toggleable>

7. Renderizado Recursivo (Estructuras de Árbol)

Los snippets pueden llamarse a sí mismos para renderizar estructuras de datos recursivas:

<script>
	let tree = $state({
		name: 'Root',
		children: [
			{
				name: 'Documents',
				children: [{ name: 'Resume.pdf' }, { name: 'Cover-Letter.docx' }]
			},
			{
				name: 'Pictures',
				children: [{ name: 'beach.jpg' }, { name: 'sunset.png' }]
			}
		]
	})
</script>

{#snippet treeNode(node, depth = 0)}
	<div class="tree-node" style="--depth: {depth}">
		<button
			onclick={() => {
				if (node.children) {
					node.expanded = !node.expanded
				}
			}}
		>
			<span>{node.children ? (node.expanded ? '📂' : '📁') : '📄'}</span>
			<span>{node.name}</span>
		</button>

		{#if node.children && node.expanded}
			{#each node.children as child}
				{@render treeNode(child, depth + 1)}
			{/each}
		{/if}
	</div>
{/snippet}

{@render treeNode(tree)}

<style>
	.tree-node {
		padding-left: calc(var(--depth) * 1.5rem);
	}

	.tree-node button {
		display: flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: none;
		padding: 4px 8px;
		cursor: pointer;
	}

	.tree-node button:hover {
		background: #f0f0f0;
	}
</style>

Integración con TypeScript

Tipifica los props de snippet para una mejor experiencia de desarrollo y seguridad de tipos. Svelte proporciona un tipo Snippet para este propósito:

<script lang="ts">
	import type { Snippet } from 'svelte'

	interface Props {
		data: User[]
		children: Snippet // No parameters
		row: Snippet<[User]> // One parameter
		cell?: Snippet<[User, keyof User]> // Optional, two parameters
	}

	let { data, children, row, cell }: Props = $props()
</script>

Para seguridad de tipos genérica:

<script lang="ts" generics="T extends { id: string | number }">
	import type { Snippet } from 'svelte'

	interface Props {
		items: T[]
		renderItem: Snippet<[T, number]>
	}

	let { items, renderItem }: Props = $props()
</script>

<ul>
	{#each items as item, index (item.id)}
		<li>{@render renderItem(item, index)}</li>
	{/each}
</ul>

Errores Comunes

Dominar la etiqueta @render de Svelte desbloquea patrones de composición poderosos, pero es fácil cometer errores sutiles—especialmente al trabajar con snippets, selección dinámica o contenido opcional. Comprender estos errores te ayudará a evitar bugs y escribir código más mantenible.

1. Olvidar Invocar el Snippet

Un snippet siempre debe invocarse con paréntesis—incluso si no recibe argumentos. Omitir los paréntesis no renderizará el snippet; en su lugar, simplemente referencia la función del snippet sin llamarla.

Consejo: Siempre verifica que haya paréntesis () después del nombre de tu snippet:

<!-- AVOID: Wrong: Just references the snippet -->
{@render mySnippet}

<!-- PREFERRED: Invokes the snippet -->
{@render mySnippet()}

2. Renderizar Snippets Indefinidos

Intentar renderizar un snippet que es undefined lanzará un error. Esto ocurre comúnmente cuando se espera que una prop o slot sea opcional pero se olvida verificar si está ausente.

Solución: Usar encadenamiento opcional (?.()) o verificaciones condicionales:

<!-- AVOID: Throws error if maybeSnippet is undefined -->
{@render maybeSnippet()}

<!-- PREFERRED: Safe with optional chaining -->
{@render maybeSnippet?.()}

<!-- PREFERRED: Safe with conditional -->
{#if maybeSnippet}
	{@render maybeSnippet()}
{/if}

3. Colocar Mal los Paréntesis en la Selección Dinámica

Al seleccionar dinámicamente entre snippets—como usar una expresión ternaria—es un error común invocar ambos snippets antes de realizar la selección. Esto puede generar comportamientos inesperados o errores.

Buena práctica: Envuelve tu selección en paréntesis antes de invocarla: (condition ? snippetA : snippetB)()

<!-- AVOID: Calls both snippets before selecting -->
{@render condition ? snippetA() : snippetB()}

<!-- PREFERRED: Selects snippet first, then invokes -->
{@render (condition ? snippetA : snippetB)()}

4. Esperar que los Snippets Retornen Valores

Los snippets están diseñados únicamente para renderizar UI y no retornan valores que puedan usarse en expresiones JavaScript o asignarse a variables. Producen elementos DOM dentro del contexto de la plantilla.

Recuerda: Los snippets producen DOM, no datos. Úsalos para renderizar UI dentro de tu plantilla—nunca esperes que retornen valores para usar en expresiones JavaScript.

<!-- AVOID: This doesn't work -->
<script>
	let result = someSnippet() // Snippets don't return values
</script>

<!-- PREFERRED:Snippets are rendered in templates -->
{@render someSnippet()}

5. Usar en Exceso Snippets Grandes o Complejos

Si bien los snippets son poderosos, usarlos en exceso para contenido grande o profundamente anidado puede dificultar la lectura, el mantenimiento y la optimización del código. Los snippets grandes se vuelven monolíticos, mezclan múltiples responsabilidades y hacen difícil razonar sobre las actualizaciones o reutilizar partes de la UI.

Ejemplo de un snippet excesivamente complejo:

{#snippet dashboard(user, stats, notifications)}
	<section class="dashboard">
		<header>
			<h1>Welcome, {user.name}</h1>
			<span>{stats.points} points</span>
		</header>
		<main>
			<div class="stats">
				<!-- lots of markup and logic here -->
			</div>
			<div class="notifications">
				{#each notifications as note}
					<div class="note">{note.message}</div>
				{/each}
			</div>
			<!-- more nested content -->
		</main>
		<footer>
			<!-- more markup -->
		</footer>
	</section>
{/snippet}

Mejor enfoque: Divide los snippets grandes en otros más pequeños y enfocados:

{#snippet dashboardHeader(user, stats)}
	<header>
		<h1>Welcome, {user.name}</h1>
		<span>{stats.points} points</span>
	</header>
{/snippet}

{#snippet dashboardNotifications(notifications)}
	<div class="notifications">
		{#each notifications as note}
			<div class="note">{note.message}</div>
		{/each}
	</div>
{/snippet}

{#snippet dashboard(user, stats, notifications)}
	<section class="dashboard">
		{@render dashboardHeader(user, stats)}
		<main>
			{@render dashboardNotifications(notifications)}
		</main>
	</section>
{/snippet}

Consejo: Prefiere snippets pequeños y de propósito único, y compónlos para UIs complejas. Esto mejora la legibilidad, el mantenimiento y el rendimiento.

Consideraciones de Rendimiento

Si bien la etiqueta @render es muy flexible y permite patrones de composición poderosos, es importante ser consciente del rendimiento al usar snippets de forma extensiva. Cada invocación de @render crea nuevos nodos DOM, y los re-renders innecesarios pueden afectar la capacidad de respuesta—especialmente en UIs grandes o dinámicas.

Las etiquetas de render son ligeras—esencialmente llamadas a funciones que producen DOM. Sin embargo:

Cada @render produce nuevos nodos DOM. Si un snippet es costoso y se renderiza con frecuencia, asegúrate de que los re-renders sean necesarios.
Usa #key para actualizaciones controladas cuando quieras forzar la recreación:

{#key data.id}
	{@render expensiveSnippet(data)}
{/key}

Mantén los snippets enfocados. Los snippets monolíticos grandes son más difíciles de optimizar que los pequeños y compuestos.
Evita invocaciones innecesarias de snippets en bucles. Si renderizas cientos de elementos, asegúrate de que la lógica de tu snippet sea mínima:

<!-- Better: Pre-compute outside the loop -->
<script>
	let itemsWithMetadata = $derived(
		items.map((item) => ({
			...item,
			formattedDate: formatDate(item.date),
			isExpired: Date.now() > item.expiryTime
		}))
	)
</script>

<!-- Less optimal: Complex logic in snippet -->
{#snippet itemCard(item)}
	<div>
		{@const formattedDate = formatDate(item.date)}
		{@const isExpired = Date.now() > item.expiryTime}
		<!-- ... complex rendering ... -->
	</div>
{/snippet}

{#each itemsWithMetadata as item}
	{@render itemCard(item)}
{/each}

Consideraciones de Accesibilidad

Al usar @render para contenido dinámico u opcional, asegúrate de que tus snippets renderizados mantengan una accesibilidad adecuada:

Roles y Etiquetas ARIA

Siempre establece los atributos ARIA apropiados dentro de tus snippets:

{#snippet accessibleButton(label, action)}
	<button type="button" aria-label={label} onclick={action}>
		{label}
	</button>
{/snippet}

{@render accessibleButton('Close dialog', closeDialog)}

Gestión del Foco

Para modales y contenido dinámico, gestiona el foco apropiadamente:

<!-- Modal.svelte -->
<script>
	let { isOpen = $bindable(false), children } = $props()
	let dialogEl = $state(null)

	$effect(() => {
		if (isOpen && dialogEl) {
			dialogEl.showModal()
			// Focus first focusable element
			const firstFocusable = dialogEl.querySelector(
				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
			)
			firstFocusable?.focus()
		}
	})
</script>

Anuncios para Lectores de Pantalla

Usa regiones en vivo para contenido dinámico:

{#snippet loadingStatus(loading)}
	<div aria-live="polite" aria-busy={loading}>
		{#if loading}
			Loading content...
		{/if}
	</div>
{/snippet}

Consideraciones de SSR (Renderizado del Lado del Servidor)

La etiqueta @render funciona perfectamente con SSR de SvelteKit. Sin embargo, si tus snippets dependen de APIs exclusivas del navegador, protege esos usos para evitar errores de hidratación:

<script>
	import { browser } from '$app/environment'

	let windowWidth = $state(browser ? window.innerWidth : 0)
</script>

{#snippet clientOnly()}
	{#if browser}
		<p>Window width: {windowWidth}px</p>
	{/if}
{/snippet}

{@render clientOnly()}

Buena práctica: Mueve las llamadas a APIs del navegador a bloques $effect o usa la verificación browser de SvelteKit:

<script>
	import { browser } from '$app/environment'

	let data = $state(null)

	$effect(() => {
		if (browser) {
			data = localStorage.getItem('key')
		}
	})
</script>

Referencia Rápida

<!-- Basic invocation -->
{@render snippetName()}

<!-- With arguments -->
{@render snippetName(arg1, arg2)}

<!-- Optional (safe if undefined) -->
{@render snippetName?.()}

<!-- Conditional with fallback -->
{#if snippetName}
	{@render snippetName()}
{:else}
	<p>Fallback content</p>
{/if}

<!-- Dynamic selection -->
{@render (condition ? snippetA : snippetB)()}

<!-- Children snippet -->
{@render children?.()}

<!-- Children with data -->
{@render children?.({ loading, error, data })}

<!-- With $derived -->
{@render (hasResults ? resultList : emptyState)(filteredData)}

Solución de Problemas

Error: "Cannot read properties of undefined (reading 'call')"

Esto generalmente significa que intentaste renderizar un snippet indefinido
Solución: Usa encadenamiento opcional: {@render maybeSnippet?.()}

No se renderiza nada

¿Olvidaste invocar el snippet con ()?
Siempre usa paréntesis: {@render mySnippet()}

Error de hidratación en SvelteKit

Si usas APIs exclusivas del navegador en snippets, envuélvelas en $effect o verifica con browser
Importa browser desde $app/environment y protege tu código

Las props no son reactivas

Asegúrate de usar los runes de Svelte 5 ($state, $derived, $effect) para la reactividad
Verifica que los componentes padre también estén usando runes correctamente

Problemas de rendimiento con muchos renders

Pre-computa los datos con $derived antes de pasarlos a los snippets
Mantén los snippets pequeños y enfocados
Usa bloques #key con criterio para actualizaciones controladas

Conclusión

La etiqueta {@render} transforma el modelo de plantillas de Svelte al tratar los fragmentos de UI como valores de primera clase que pueden pasarse, almacenarse e invocarse de forma programática. Este cambio de paradigma, de slots a snippets con renderizado explícito, te brinda un control sin precedentes sobre los patrones de composición de componentes. Ya sea que estés construyendo bibliotecas de componentes con renderizado personalizable, implementando diseños condicionales complejos o creando estructuras de datos recursivas, {@render} proporciona la base para APIs de componentes flexibles y mantenibles.

Dominar {@render} implica entender no solo la sintaxis, sino los patrones arquitectónicos que habilita. El renderizado opcional con verificación de nulos se vuelve trivial. La selección dinámica de snippets basada en condiciones en tiempo de ejecución se vuelve elegante. Los patrones de delegación complejos donde los componentes padre controlan el renderizado de los hijos se vuelven naturales. Al combinar {@render} con $derived para la selección computada de snippets y patrones adecuados de seguridad ante valores nulos, puedes construir sistemas de componentes que son tanto poderosos como seguros en cuanto a tipos.

Puntos Clave

{@render} invoca funciones de snippet definidas con #snippet, pasando argumentos a los parámetros del snippet para fragmentos de UI dinámicos y reutilizables
El renderizado opcional requiere verificación de nulos usando {#if snippet} o encadenamiento opcional: {@render snippet?.()} para prevenir errores en tiempo de ejecución cuando los snippets son indefinidos
Los argumentos se pasan entre paréntesis con seguridad de tipos: {@render card({ title, description, imageUrl })} pasa datos a los parámetros del snippet
La selección dinámica de snippets permite patrones de renderizado determinados en tiempo de ejecución como {@render variants[size]?.()} para APIs de componentes basadas en variantes
Los snippets son reactivos - cuando las dependencias de un snippet cambian, Svelte re-renderiza automáticamente la salida sin gestión manual de efectos
Los patrones de delegación en componentes permiten que los componentes padre controlen el renderizado de los hijos a través de props de tipo snippet, habilitando una composición flexible sin prop drilling
Seguros para SSR por defecto, pero las APIs exclusivas del navegador en snippets requieren envoltura con $effect o verificaciones del entorno browser para la seguridad de la hidratación
Las consideraciones de rendimiento incluyen pre-computar datos con $derived antes de pasarlos a los snippets y mantener el alcance de los snippets mínimo para actualizaciones eficientes

Ver También

Documentación oficial de Svelte 5 - {@render}
$props() - Props de componentes incluyendo props de tipo snippet
$derived - Computaciones reactivas para la lógica de selección de snippets
Patrones de Composición de Componentes - Diseño avanzado de APIs de componentes
TypeScript con Svelte - Definiciones de snippets con seguridad de tipos

Invocando Snippets con Precisión

Invocación Básica

Renderizado con Argumentos

Snippets Opcionales: Patrones de Renderizado Seguro

1. Encadenamiento Opcional

2. Renderizado Condicional con Fallback

Cadenas de Fallback en Cascada

Selección Dinámica de Snippets

Selección Ternaria

Lógica Condicional para Múltiples Opciones

Selección Basada en Funciones

Usando $derived para Selección Dinámica

El Patrón de Snippet children

Pasando Datos de Vuelta a través de Children

Patrones de Diseño de API de Componentes

Props de Snippet Explícitos vs Implícitos

Componente Flexible con Múltiples Puntos de Renderizado

Patrones del Mundo Real

1. Composición de Layout

2. Patrón Modal/Diálogo

3. Patrón de Componente de Pestañas

4. Patrón de Estado de Carga

5. Sistema de Notificaciones Toast

6. Contenedor de Estado Sin Renderizado

7. Renderizado Recursivo (Estructuras de Árbol)

Integración con TypeScript

Errores Comunes

1. Olvidar Invocar el Snippet

2. Renderizar Snippets Indefinidos

3. Colocar Mal los Paréntesis en la Selección Dinámica

4. Esperar que los Snippets Retornen Valores

5. Usar en Exceso Snippets Grandes o Complejos

Consideraciones de Rendimiento

Consideraciones de Accesibilidad

Roles y Etiquetas ARIA

Gestión del Foco

Anuncios para Lectores de Pantalla

Consideraciones de SSR (Renderizado del Lado del Servidor)

Referencia Rápida

Solución de Problemas

Conclusión

Puntos Clave

Ver También

Usando `$derived` para Selección Dinámica

El Patrón de Snippet `children`