Manejo Global de Eventos y Más

Al construir aplicaciones web sofisticadas, llega un momento en que los límites ordenados del manejo de eventos con alcance de componente simplemente no son suficientes. Necesitas responder a un atajo de teclado presionado en cualquier lugar de la página.

Necesitas detectar cuándo los usuarios hacen clic fuera de un menú desplegable. Necesitas coordinar operaciones de arrastrar y soltar que abarcan todo el viewport. Estos escenarios exigen acceso a eventos a nivel del body del documento, y Svelte 5 proporciona una solución elegante y declarativa a través del elemento especial <svelte:body>.

Este tutorial explora en profundidad <svelte:body>, examinando no solo cómo usarlo, sino por qué existe, cuándo recurrir a él y cómo arquitectar soluciones robustas en torno al manejo de eventos a nivel del body. Trabajaremos con ejemplos progresivamente más complejos, descubriremos sutiles inconvenientes que pueden sorprender incluso a desarrolladores experimentados, y estableceremos patrones que escalan de manera adecuada en aplicaciones del mundo real.

Entendiendo el Espacio del Problema: Por Qué Importan los Eventos a Nivel del Body

Antes de adentrarnos en la sintaxis y la implementación, establezcamos una comprensión clara de por qué el manejo de eventos a nivel del body representa una categoría distinta de problemas en el desarrollo frontend.

Considera una arquitectura típica basada en componentes. Cada componente encapsula su propia estructura DOM, estilos y comportamiento. Los manejadores de eventos se adjuntan a elementos específicos dentro de la plantilla de ese componente. Este modelo funciona muy bien para interacciones que ocurren completamente dentro de los límites de un componente: hacer clic en un botón, escribir en un campo de entrada, pasar el cursor sobre una tarjeta.

Pero las aplicaciones web requieren rutinariamente interacciones que trascienden estos límites. Imagina implementar un diálogo modal. El modal en sí es un componente, quizás renderizado condicionalmente en algún lugar de tu árbol de componentes. Pero el comportamiento esperado del usuario —presionar Escape para cerrar el modal, o hacer clic en el fondo fuera del contenido del modal— implica eventos que pueden originarse en elementos completamente fuera del subárbol DOM del componente modal.

La solución ingenua podría implicar adjuntar escuchadores de eventos directamente a document.body dentro del ciclo de vida de tu componente:

// This works, but it's imperative and error-prone
import { onMount, onDestroy } from 'svelte'

let cleanup

onMount(() => {
	const handler = (event) => {
		if (event.key === 'Escape') {
			closeModal()
		}
	}
	document.body.addEventListener('keydown', handler)
	cleanup = () => document.body.removeEventListener('keydown', handler)
})

onDestroy(() => {
	cleanup?.()
})

Este enfoque tiene varias desventajas. Es imperativo en lugar de declarativo, mezclando la gestión del ciclo de vida con la lógica de manejo de eventos. Requiere limpieza explícita para prevenir fugas de memoria. No se integra de forma natural con el sistema de reactividad de Svelte. Y dispersa la lógica de manejo de eventos en múltiples ubicaciones en tu código.

El elemento especial <svelte:body> aborda todas estas preocupaciones, proporcionando una sintaxis declarativa que se integra perfectamente con el modelo de componentes de Svelte y, en Svelte 5, con el sistema de reactividad basado en runes.

La Anatomía de `<svelte:body>`

El elemento <svelte:body> es uno de varios elementos especiales que Svelte proporciona para interactuar con partes del DOM que existen fuera de la plantilla de tu componente. A diferencia de los elementos regulares, <svelte:body> no renderiza nada en el DOM — sirve puramente como punto de adjunción declarativo para escuchadores de eventos y acciones en el elemento document.body. Además de los manejadores de eventos, también puedes usar la directiva {@attach} (Svelte 5.29+) para adjuntar comportamientos directamente al elemento body.

En Svelte 5, los manejadores de eventos usan la nueva sintaxis de atributo on* en lugar de la sintaxis de directiva on:* de versiones anteriores. Aquí está la estructura fundamental:

<script>
	function handleKeydown(event) {
		console.log('Key pressed:', event.key)
	}
</script>

<svelte:body onkeydown={handleKeydown} />

Cuando este componente se monta, Svelte adjunta automáticamente el escuchador del evento keydown a document.body. Cuando el componente se desmonta, Svelte elimina automáticamente el escuchador. Esta gestión automática del ciclo de vida elimina toda una categoría de errores relacionados con la limpieza olvidada.

El elemento acepta cualquier manejador de eventos DOM válido como atributo. La convención de nombres sigue el patrón estándar de atributos HTML: el nombre del evento con el prefijo on, todo en minúsculas. Así que keydown se convierte en onkeydown, mouseup se convierte en onmouseup, dragover se convierte en ondragover, y así sucesivamente.

Manejadores en Línea y Funciones Flecha

Puedes definir manejadores en línea para operaciones simples:

<script>
	let lastKey = $state('')
</script>

<svelte:body onkeydown={(e) => (lastKey = e.key)} />

<p>Last key pressed: {lastKey || 'None yet'}</p>

Este patrón funciona bien para actualizaciones de estado sencillas, aunque la lógica más compleja generalmente se beneficia de ser extraída en funciones con nombre para mejorar la legibilidad y la capacidad de prueba.

Múltiples Manejadores de Eventos

Un solo elemento <svelte:body> puede adjuntar múltiples manejadores de eventos:

<script>
	let mousePosition = $state({ x: 0, y: 0 })
	let isMouseDown = $state(false)

	function trackMouse(event) {
		mousePosition = { x: event.clientX, y: event.clientY }
	}
</script>

<svelte:body
	onmousemove={trackMouse}
	onmousedown={() => (isMouseDown = true)}
	onmouseup={() => (isMouseDown = false)}
/>

<div class="tracker">
	Position: ({mousePosition.x}, {mousePosition.y})
	{#if isMouseDown}
		<span class="indicator">🖱️ Mouse button held</span>
	{/if}
</div>

También puedes tener múltiples elementos <svelte:body> en un solo componente si eso mejora la organización del código, aunque consolidar los manejadores relacionados en un solo elemento suele ser más limpio.

Análisis Profundo

Construyendo un Sistema de Atajos de Teclado

Construyamos un ejemplo realista que demuestre el poder y los matices de <svelte:body>. Crearemos un sistema de atajos de teclado que admita teclas modificadoras, prevenga conflictos con los campos de formulario y proporcione retroalimentación visual a los usuarios.

<script>
	// Reactive state using Svelte 5 runes
	let shortcuts = $state([
		{ keys: ['Control', 's'], action: 'save', description: 'Save document' },
		{ keys: ['Control', 'Shift', 'p'], action: 'preview', description: 'Toggle preview' },
		{ keys: ['Escape'], action: 'close', description: 'Close dialog' },
		{ keys: ['Control', 'k'], action: 'search', description: 'Open search' }
	])

	let activeKeys = $state(new Set())
	let lastTriggeredAction = $state(null)
	let showShortcutHint = $state(false)

	// Derived state: compute which shortcut matches current key combination
	let matchingShortcut = $derived.by(() => {
		if (activeKeys.size === 0) return null

		return shortcuts.find((shortcut) => {
			if (shortcut.keys.length !== activeKeys.size) return false
			return shortcut.keys.every((key) => activeKeys.has(key))
		})
	})

	function shouldIgnoreEvent(event) {
		// Don't capture shortcuts when user is typing in form elements
		const target = event.target
		const tagName = target.tagName.toLowerCase()
		const isEditable = target.isContentEditable
		const isFormElement = ['input', 'textarea', 'select'].includes(tagName)

		// Exception: always allow Escape key
		if (event.key === 'Escape') return false

		return isEditable || isFormElement
	}

	function normalizeKey(event) {
		// Normalize modifier key names for cross-platform consistency
		if (event.key === 'Meta') return 'Control' // Treat Cmd as Ctrl on Mac
		return event.key
	}

	function handleKeydown(event) {
		if (shouldIgnoreEvent(event)) return

		const key = normalizeKey(event)

		// Create new Set to trigger reactivity
		activeKeys = new Set([...activeKeys, key])

		// Check if current combination matches a shortcut
		const matched = shortcuts.find((shortcut) => {
			if (shortcut.keys.length !== activeKeys.size) return false
			return shortcut.keys.every((k) => activeKeys.has(k))
		})

		if (matched) {
			event.preventDefault() // Prevent browser default behavior
			lastTriggeredAction = matched.action
			executeAction(matched.action)

			// Clear after short delay for visual feedback
			setTimeout(() => {
				lastTriggeredAction = null
			}, 1000)
		}
	}

	function handleKeyup(event) {
		const key = normalizeKey(event)

		// Create new Set without the released key
		const newKeys = new Set(activeKeys)
		newKeys.delete(key)
		activeKeys = newKeys
	}

	function executeAction(action) {
		// In a real application, these would trigger actual functionality
		console.log(`Executing action: ${action}`)

		switch (action) {
			case 'save':
				alert('Document saved!')
				break
			case 'preview':
				alert('Preview toggled!')
				break
			case 'close':
				alert('Dialog closed!')
				break
			case 'search':
				alert('Search opened!')
				break
		}
	}

	// Toggle shortcut hint overlay with ? key
	function handleQuestionMark(event) {
		if (event.key === '?' && !shouldIgnoreEvent(event)) {
			showShortcutHint = !showShortcutHint
		}
	}
</script>

<svelte:body onkeydown={handleKeydown} onkeyup={handleKeyup} onkeypress={handleQuestionMark} />

<div class="app-container">
	<header>
		<h1>Keyboard Shortcut Demo</h1>
		<p class="hint">Press <kbd>?</kbd> to view available shortcuts</p>
	</header>

	<main>
		<div class="status-panel">
			<h2>Current State</h2>
			<div class="active-keys">
				<strong>Active keys:</strong>
				{#if activeKeys.size > 0}
					{#each [...activeKeys] as key}
						<kbd>{key}</kbd>
					{/each}
				{:else}
					<span class="none">None</span>
				{/if}
			</div>

			{#if lastTriggeredAction}
				<div class="triggered-action">
					✓ Triggered: <strong>{lastTriggeredAction}</strong>
				</div>
			{/if}
		</div>

		<div class="test-area">
			<h2>Test Input (shortcuts disabled here)</h2>
			<input type="text" placeholder="Type here - shortcuts won't trigger" />
			<textarea placeholder="Or here - shortcuts won't trigger either"></textarea>
		</div>
	</main>

	{#if showShortcutHint}
		<div class="shortcut-overlay" role="dialog" aria-label="Keyboard shortcuts">
			<div class="shortcut-panel">
				<h2>Keyboard Shortcuts</h2>
				<ul>
					{#each shortcuts as shortcut}
						<li>
							<span class="keys">
								{#each shortcut.keys as key, i}
									<kbd>{key}</kbd>{#if i < shortcut.keys.length - 1}
										+
									{/if}
								{/each}
							</span>
							<span class="description">{shortcut.description}</span>
						</li>
					{/each}
				</ul>
				<button onclick={() => (showShortcutHint = false)}>Close (or press ?)</button>
			</div>
		</div>
	{/if}
</div>

<style>
	.app-container {
		font-family:
			system-ui,
			-apple-system,
			sans-serif;
		max-width: 800px;
		margin: 0 auto;
		padding: 2rem;
	}

	kbd {
		background: #e0e0e0;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 0.2em 0.5em;
		font-family: monospace;
		font-size: 0.9em;
		margin: 0 0.2em;
	}

	.status-panel {
		background: #f5f5f5;
		padding: 1rem;
		border-radius: 8px;
		margin: 1rem 0;
	}

	.triggered-action {
		color: green;
		font-weight: bold;
		margin-top: 0.5rem;
	}

	.test-area input,
	.test-area textarea {
		display: block;
		width: 100%;
		padding: 0.5rem;
		margin: 0.5rem 0;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.shortcut-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shortcut-panel {
		background: white;
		padding: 2rem;
		border-radius: 12px;
		max-width: 400px;
	}

	.shortcut-panel ul {
		list-style: none;
		padding: 0;
	}

	.shortcut-panel li {
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0;
		border-bottom: 1px solid #eee;
	}
</style>

Este ejemplo demuestra varios patrones importantes. Primero, observa cómo el estado del teclado se gestiona de forma reactiva usando $state. El Set activeKeys rastrea qué teclas están presionadas actualmente, actualizándose tanto en los eventos keydown como en los keyup. Esto permite la detección de combinaciones de teclas, no solo pulsaciones individuales.

La función shouldIgnoreEvent implementa un patrón UX crítico: deshabilitar los atajos cuando el usuario está interactuando con elementos de formulario. Sin esta protección, los usuarios no podrían escribir la letra 's' en un campo de entrada sin desencadenar una acción de guardar. La excepción para la tecla Escape refleja las expectativas comunes — los usuarios generalmente esperan que Escape funcione en cualquier lugar.

La normalización de teclas maneja las diferencias entre plataformas. En macOS, la tecla Command se reporta como 'Meta', pero muchas aplicaciones tratan Command en Mac de forma equivalente a Control en Windows/Linux. La normalización permite que una sola definición de atajo funcione en todas las plataformas.

El Patrón de Clic Fuera: Un Caso de Uso Clásico

Una de las razones más comunes para recurrir a <svelte:body> es implementar el comportamiento de "clic fuera para cerrar". Este patrón aparece en menús desplegables, diálogos modales, cierre de tooltips y muchas otras interacciones de interfaz de usuario.

La implementación ingenua tiene un error sutil pero significativo:

<!-- AVOID: Don't do this -->
<script>
	let isOpen = $state(false)
</script>

<svelte:body onclick={() => (isOpen = false)} />

<div class="dropdown">
	<button onclick={() => (isOpen = !isOpen)}>Toggle Menu</button>
	{#if isOpen}
		<div class="menu">
			<a href="/profile">Profile</a>
			<a href="/settings">Settings</a>
			<a href="/logout">Logout</a>
		</div>
	{/if}
</div>

El error: hacer clic en el botón de alternancia dispara tanto el manejador de clic del botón (que intenta abrir el menú) como el manejador de clic del body (que lo cierra). Debido al burbujeo de eventos, hacer clic en cualquier lugar dentro del componente también activa el manejador del body.

Aquí está la implementación corregida con el manejo adecuado de eventos:

<script>
	let isOpen = $state(false)
	let dropdownElement = $state(null)

	function handleBodyClick(event) {
		// Only close if click originated outside the dropdown
		if (dropdownElement && !dropdownElement.contains(event.target)) {
			isOpen = false
		}
	}

	function toggleDropdown(event) {
		// Stop propagation to prevent immediate close
		event.stopPropagation()
		isOpen = !isOpen
	}

	function handleMenuClick(event) {
		// Optional: close menu after selecting an option
		// Remove this if you want the menu to stay open
		isOpen = false
	}
</script>

<svelte:body onclick={handleBodyClick} />

<div class="dropdown" bind:this={dropdownElement}>
	<button onclick={toggleDropdown} aria-expanded={isOpen}>
		Toggle Menu
		<span class="arrow">{isOpen ? '▲' : '▼'}</span>
	</button>

	{#if isOpen}
		<nav class="menu" role="menu">
			<a href="/profile" role="menuitem" onclick={handleMenuClick}>Profile</a>
			<a href="/settings" role="menuitem" onclick={handleMenuClick}>Settings</a>
			<a href="/logout" role="menuitem" onclick={handleMenuClick}>Logout</a>
		</nav>
	{/if}
</div>

<style>
	.dropdown {
		position: relative;
		display: inline-block;
	}

	.menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: white;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		min-width: 150px;
		z-index: 100;
	}

	.menu a {
		display: block;
		padding: 0.75rem 1rem;
		color: inherit;
		text-decoration: none;
	}

	.menu a:hover {
		background: #f5f5f5;
	}
</style>

La idea clave es usar element.contains(event.target) para determinar si el clic ocurrió dentro o fuera del dropdown. Este enfoque es más robusto que detener la propagación en todas partes, lo que puede interferir con otro manejo de eventos en tu aplicación.

Una Implementación Más Sofisticada de Clic Fuera

Para aplicaciones en producción, considera una acción reutilizable o un sistema de detección más sofisticado:

<script>
	let isOpen = $state(false)
	let menuEl = $state(null)
	let buttonEl = $state(null)

	// Track the last interaction source to handle edge cases
	let lastInteractionSource = $state(null)

	function handleBodyClick(event) {
		// Ignore if the dropdown isn't open
		if (!isOpen) return

		// Check if click was inside the menu or button
		const clickedInside = menuEl?.contains(event.target) || buttonEl?.contains(event.target)

		if (!clickedInside) {
			isOpen = false
			lastInteractionSource = 'outside-click'
		}
	}

	function handleBodyKeydown(event) {
		if (!isOpen) return

		switch (event.key) {
			case 'Escape':
				isOpen = false
				lastInteractionSource = 'escape-key'
				// Return focus to the trigger button
				buttonEl?.focus()
				break

			case 'Tab':
				// Close dropdown when tabbing away
				// Slight delay to allow focus to move first
				requestAnimationFrame(() => {
					const focusInDropdown =
						menuEl?.contains(document.activeElement) || buttonEl?.contains(document.activeElement)

					if (!focusInDropdown) {
						isOpen = false
						lastInteractionSource = 'tab-away'
					}
				})
				break
		}
	}

	function toggleDropdown() {
		isOpen = !isOpen
		lastInteractionSource = isOpen ? 'button-click' : 'button-toggle'

		// Focus first menu item when opening
		if (isOpen) {
			requestAnimationFrame(() => {
				menuEl?.querySelector('a')?.focus()
			})
		}
	}
</script>

<svelte:body onclick={handleBodyClick} onkeydown={handleBodyKeydown} />

<div class="dropdown-container">
	<button bind:this={buttonEl} onclick={toggleDropdown} aria-expanded={isOpen} aria-haspopup="menu">
		Options
	</button>

	{#if isOpen}
		<nav bind:this={menuEl} class="dropdown-menu" role="menu" aria-label="Options menu">
			<a href="/edit" role="menuitem">Edit</a>
			<a href="/duplicate" role="menuitem">Duplicate</a>
			<a href="/archive" role="menuitem">Archive</a>
			<hr />
			<a href="/delete" role="menuitem" class="danger">Delete</a>
		</nav>
	{/if}
</div>

Esta implementación maneja la navegación por teclado correctamente, devuelve el foco al elemento disparador al cerrar mediante Escape, y rastrea el origen de las interacciones para depuración o análisis.

Modificadores de Eventos y Fase de Captura

En versiones anteriores de Svelte, podías aplicar modificadores como capture, once y passive usando la sintaxis de barra: on:click|capture|once. En Svelte 5, el enfoque es diferente — trabajas con las opciones del manejador de eventos de forma más directa.

Para el manejo de eventos en fase de captura (donde interceptas los eventos durante la fase de captura en lugar de la fase de burbujeo), puedes usar el patrón de atributo onclickcapture:

<script>
	let log = $state([])

	function addToLog(message) {
		log = [...log, { time: Date.now(), message }]
	}

	// Capture phase - fires first, before any target handlers
	function handleCaptureClick(event) {
		addToLog(`Capture phase: ${event.target.tagName}`)
	}

	// Bubble phase - fires after target handlers, during bubbling
	function handleBubbleClick(event) {
		addToLog(`Bubble phase: ${event.target.tagName}`)
	}
</script>

<!-- Capture phase handler - note the 'capture' suffix -->
<svelte:body onclickcapture={handleCaptureClick} onclick={handleBubbleClick} />

<div class="demo">
	<button onclick={() => addToLog('Button clicked directly')}>
		Click me to see event phases
	</button>

	<div class="log">
		{#each log as entry}
			<div class="log-entry">{entry.message}</div>
		{/each}
	</div>

	<button onclick={() => (log = [])}>Clear Log</button>
</div>

El manejo en fase de captura es particularmente útil cuando necesitas interceptar eventos antes de que lleguen a sus destinos previstos. Un caso de uso común es implementar un aviso global de "¿estás seguro de que quieres salir?":

<script>
	let hasUnsavedChanges = $state(false)

	function interceptNavigation(event) {
		// Only intercept anchor clicks
		const anchor = event.target.closest('a')
		if (!anchor) return

		// Only intercept internal navigation
		if (anchor.hostname !== window.location.hostname) return

		if (hasUnsavedChanges) {
			event.preventDefault()
			event.stopPropagation()

			const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave?')

			if (confirmed) {
				hasUnsavedChanges = false
				// Programmatically navigate after confirmation
				window.location.href = anchor.href
			}
		}
	}
</script>

<svelte:body onclickcapture={interceptNavigation} />

Integración con la Reactividad de Svelte 5: La Conexión con `$effect`

El verdadero poder de <svelte:body> emerge cuando se combina con el sistema de reactividad de Svelte 5. Puedes crear manejadores de eventos que respondan al estado reactivo, usar $effect para gestionar los efectos secundarios desencadenados por eventos a nivel del body, y construir patrones de interacción sofisticados.

Considera este ejemplo de una funcionalidad de "modo presentación" que responde tanto a la entrada del teclado como al estado externo:

<script>
	// Core presentation state
	let slides = $state([
		{ id: 1, title: 'Introduction', content: 'Welcome to the presentation' },
		{ id: 2, title: 'Main Points', content: 'Here are the key ideas' },
		{ id: 3, title: 'Deep Dive', content: 'Let us explore further' },
		{ id: 4, title: 'Conclusion', content: 'Thank you for attending' }
	])

	let currentSlideIndex = $state(0)
	let isPresentationMode = $state(false)
	let isPointerVisible = $state(true)
	let pointerHideTimeout = $state(null)

	// Derived values
	let currentSlide = $derived(slides[currentSlideIndex])
	let progress = $derived(((currentSlideIndex + 1) / slides.length) * 100)
	let canGoBack = $derived(currentSlideIndex > 0)
	let canGoForward = $derived(currentSlideIndex < slides.length - 1)

	// Navigation functions
	function nextSlide() {
		if (canGoForward) {
			currentSlideIndex++
		}
	}

	function previousSlide() {
		if (canGoBack) {
			currentSlideIndex--
		}
	}

	function goToSlide(index) {
		if (index >= 0 && index < slides.length) {
			currentSlideIndex = index
		}
	}

	// Keyboard navigation for presentation mode
	function handlePresentationKeydown(event) {
		if (!isPresentationMode) return

		switch (event.key) {
			case 'ArrowRight':
			case 'ArrowDown':
			case ' ':
			case 'PageDown':
				event.preventDefault()
				nextSlide()
				break

			case 'ArrowLeft':
			case 'ArrowUp':
			case 'PageUp':
				event.preventDefault()
				previousSlide()
				break

			case 'Home':
				event.preventDefault()
				goToSlide(0)
				break

			case 'End':
				event.preventDefault()
				goToSlide(slides.length - 1)
				break

			case 'Escape':
				event.preventDefault()
				isPresentationMode = false
				break

			case 'f':
			case 'F':
				event.preventDefault()
				toggleFullscreen()
				break
		}
	}

	// Hide pointer after inactivity
	function handleMouseMove() {
		if (!isPresentationMode) return

		isPointerVisible = true

		// Clear existing timeout
		if (pointerHideTimeout) {
			clearTimeout(pointerHideTimeout)
		}

		// Set new timeout to hide pointer
		pointerHideTimeout = setTimeout(() => {
			isPointerVisible = false
		}, 3000)
	}

	function toggleFullscreen() {
		if (!document.fullscreenElement) {
			document.documentElement.requestFullscreen()
		} else {
			document.exitFullscreen()
		}
	}

	// Effect to manage body class for presentation mode styling
	$effect(() => {
		if (isPresentationMode) {
			document.body.classList.add('presentation-active')
		} else {
			document.body.classList.remove('presentation-active')
		}

		// Cleanup when effect re-runs or component unmounts
		return () => {
			document.body.classList.remove('presentation-active')
		}
	})

	// Effect to announce slide changes for screen readers
	$effect(() => {
		if (isPresentationMode && currentSlide) {
			// Create an aria-live announcement
			const announcement = document.createElement('div')
			announcement.setAttribute('aria-live', 'polite')
			announcement.setAttribute('aria-atomic', 'true')
			announcement.className = 'sr-only'
			announcement.textContent = `Slide ${currentSlideIndex + 1} of ${slides.length}: ${currentSlide.title}`

			document.body.appendChild(announcement)

			// Remove after announcement is made
			setTimeout(() => {
				announcement.remove()
			}, 1000)
		}
	})
</script>

<svelte:body onkeydown={handlePresentationKeydown} onmousemove={handleMouseMove} />

{#if !isPresentationMode}
	<div class="editor-view">
		<header>
			<h1>Presentation Editor</h1>
			<button onclick={() => (isPresentationMode = true)}> Start Presentation </button>
		</header>

		<div class="slide-list">
			{#each slides as slide, index}
				<div
					class={['slide-thumbnail', index === currentSlideIndex && 'active']}
					onclick={() => (currentSlideIndex = index)}
				>
					<span class="slide-number">{index + 1}</span>
					<span class="slide-title">{slide.title}</span>
				</div>
			{/each}
		</div>

		<div class="slide-editor">
			<h2>{currentSlide.title}</h2>
			<p>{currentSlide.content}</p>
		</div>
	</div>
{:else}
	<div class={['presentation-view', !isPointerVisible && 'pointer-hidden']}>
		<div class="slide">
			<h1>{currentSlide.title}</h1>
			<p>{currentSlide.content}</p>
		</div>

		<div class="presentation-controls">
			<div class="progress-bar">
				<div class="progress-fill" style="width: {progress}%"></div>
			</div>

			<div class="slide-counter">
				{currentSlideIndex + 1} / {slides.length}
			</div>
		</div>

		<nav class="presentation-nav" aria-label="Slide navigation">
			<button onclick={previousSlide} disabled={!canGoBack} aria-label="Previous slide"> ← </button>
			<button onclick={nextSlide} disabled={!canGoForward} aria-label="Next slide"> → </button>
		</nav>
	</div>
{/if}

<style>
	.presentation-view {
		position: fixed;
		inset: 0;
		background: #1a1a2e;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.presentation-view.pointer-hidden {
		cursor: none;
	}

	.slide {
		text-align: center;
		padding: 2rem;
	}

	.slide h1 {
		font-size: 3rem;
		margin-bottom: 1rem;
	}

	.progress-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: rgba(255, 255, 255, 0.2);
	}

	.progress-fill {
		height: 100%;
		background: #4ade80;
		transition: width 0.3s ease;
	}

	.presentation-nav {
		position: fixed;
		bottom: 2rem;
		display: flex;
		gap: 1rem;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
</style>

Este ejemplo muestra varios patrones avanzados. Los bloques $effect gestionan efectos secundarios que se extienden más allá de la plantilla del componente — añadiendo una clase al body del documento y creando anuncios de accesibilidad. El manejador de movimiento del ratón crea un comportamiento de "ocultar el cursor cuando está inactivo" común en software de presentación. Y el manejador de teclado demuestra cómo el manejo de eventos de <svelte:body> puede estar activo condicionalmente según el estado de la aplicación.

Consideraciones sobre la Renderización del Lado del Servidor

Al construir aplicaciones que usan renderización del lado del servidor (SSR), debes considerar cómo se comporta <svelte:body> durante la fase de renderización en el servidor. Dado que no hay un DOM real en el servidor, <svelte:body> efectivamente se convierte en una operación sin efecto durante SSR — no se adjuntan escuchadores de eventos.

Este suele ser el comportamiento deseado. Sin embargo, debes ser cauteloso con cualquier lógica en tus manejadores de eventos que asuma un entorno de navegador:

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

	function handleKeydown(event) {
		// This check isn't strictly necessary for <svelte:body> handlers
		// (they only fire in the browser), but it's good practice
		// for any shared utilities that might be called from handlers
		if (!browser) return

		// Safe to use browser APIs here
		const isInputFocused = document.activeElement?.tagName === 'INPUT'

		if (!isInputFocused && event.key === '/') {
			event.preventDefault()
			document.querySelector('#search-input')?.focus()
		}
	}
</script>

<svelte:body onkeydown={handleKeydown} />

De manera más sutil, si tu componente inicializa el estado basándose en APIs del navegador durante la creación del componente, ese código se ejecutará en el servidor donde esas APIs no existen:

<script>
	// AVOID:This will error during SSR
	// let windowWidth = $state(window.innerWidth);

	// PREFERRED: Safe - initialize with a default, update in effect
	let windowWidth = $state(0)

	$effect(() => {
		// This only runs in the browser
		windowWidth = window.innerWidth

		function handleResize() {
			windowWidth = window.innerWidth
		}

		window.addEventListener('resize', handleResize)

		return () => {
			window.removeEventListener('resize', handleResize)
		}
	})
</script>

<svelte:body onkeydown={handleKeydown} />

<div>Window width: {windowWidth || 'Loading...'}</div>

Ten en cuenta que para los eventos de cambio de tamaño de ventana específicamente, normalmente usarías <svelte:window> en lugar de <svelte:body>, pero la consideración de SSR se aplica a cualquier inicialización dependiente del navegador.

Consideraciones de Rendimiento y Mejores Prácticas

Aunque <svelte:body> proporciona una abstracción limpia, es importante entender las implicaciones de rendimiento del manejo de eventos a nivel del body.

Eventos de Alta Frecuencia

Eventos como mousemove, scroll (en el body) y pointermove pueden dispararse decenas de veces por segundo. Adjuntar manejadores para estos eventos requiere una consideración cuidadosa:

<script>
	let mousePosition = $state({ x: 0, y: 0 })

	// AVOID: Potentially problematic: updates state on every mouse move
	function handleMouseMove(event) {
		mousePosition = { x: event.clientX, y: event.clientY }
	}

	// PREFERRED: throttle updates
	let lastUpdate = 0
	const THROTTLE_MS = 16 // ~60fps

	function handleMouseMoveThrottled(event) {
		const now = Date.now()
		if (now - lastUpdate < THROTTLE_MS) return

		lastUpdate = now
		mousePosition = { x: event.clientX, y: event.clientY }
	}

	// PREFERRED Alternative: use requestAnimationFrame for visual updates
	let rafId = null
	let pendingPosition = null

	function handleMouseMoveRAF(event) {
		pendingPosition = { x: event.clientX, y: event.clientY }

		if (rafId === null) {
			rafId = requestAnimationFrame(() => {
				mousePosition = pendingPosition
				rafId = null
			})
		}
	}
</script>

<svelte:body onmousemove={handleMouseMoveRAF} />

Adjuntar Manejadores de Forma Condicional

En algunos casos, puede que quieras evitar adjuntar manejadores de eventos por completo cuando no son necesarios. Desafortunadamente, <svelte:body> no admite renderizado condicional de la misma manera que los elementos regulares—siempre está presente. Sin embargo, puedes hacer que los manejadores sean esencialmente no-ops:

<script>
	let featureEnabled = $state(false)

	// Handler returns early when feature is disabled
	function handleKeydown(event) {
		if (!featureEnabled) return

		// Actual handling logic
		if (event.key === 'Enter') {
			performAction()
		}
	}
</script>

<svelte:body onkeydown={handleKeydown} />

Para un manejo de eventos verdaderamente opcional donde quieras evitar por completo la sobrecarga del listener, puede que necesites recurrir al enfoque imperativo con $effect:

<script>
	let featureEnabled = $state(false)

	$effect(() => {
		if (!featureEnabled) return

		function handleKeydown(event) {
			if (event.key === 'Enter') {
				performAction()
			}
		}

		document.body.addEventListener('keydown', handleKeydown)

		return () => {
			document.body.removeEventListener('keydown', handleKeydown)
		}
	})
</script>

Múltiples Componentes con Manejadores en el Body

Cuando múltiples componentes en tu aplicación usan <svelte:body>, todos sus manejadores se ejecutarán para cada evento. Esto generalmente está bien, pero puede llevar a comportamientos inesperados si no se considera:

<!-- ComponentA.svelte -->
<script>
  function handleClick(event) {
    console.log('Component A saw click');
    // This doesn't prevent ComponentB from also seeing the click
  }
</script>

<svelte:body onclick={handleClick} />

<!-- ComponentB.svelte -->
<script>
  function handleClick(event) {
    console.log('Component B saw click');
  }
</script>

<svelte:body onclick={handleClick} />

Si necesitas coordinar entre múltiples manejadores a nivel del body, considera usar un sistema centralizado de gestión de eventos:

<!-- eventBus.svelte.js -->
<script module>
	let handlers = $state(new Map())
	let handlerPriorities = $state(new Map())

	export function registerHandler(id, handler, priority = 0) {
		handlers.set(id, handler)
		handlerPriorities.set(id, priority)
	}

	export function unregisterHandler(id) {
		handlers.delete(id)
		handlerPriorities.delete(id)
	}

	export function dispatch(event) {
		// Sort handlers by priority (higher priority = runs first)
		const sortedHandlers = [...handlers.entries()].sort(
			(a, b) => handlerPriorities.get(b[0]) - handlerPriorities.get(a[0])
		)

		for (const [id, handler] of sortedHandlers) {
			const result = handler(event)

			// Allow handlers to stop propagation to other handlers
			if (result === false) break
		}
	}
</script>

Errores Comunes y Cómo Evitarlos

Cataloguemos los errores más comunes que cometen los desarrolladores con <svelte:body> y establezcamos patrones claros para evitarlos.

1. Olvidar la Limpieza de Eventos al Usar Patrones Imperativos

Si alguna vez necesitas complementar <svelte:body> con manejo imperativo de eventos, siempre asegura la limpieza:

<script>
	$effect(() => {
		// Some imperative setup that complements <svelte:body>
		const handler = () => {
			/* ... */
		}
		document.body.addEventListener('custom-event', handler)

		// CRITICAL: Return cleanup function
		return () => {
			document.body.removeEventListener('custom-event', handler)
		}
	})
</script>

2. Bloquear el Comportamiento Predeterminado del Navegador de Forma Inesperada

Ten cuidado con event.preventDefault() en los manejadores a nivel del body. Puedes accidentalmente romper el comportamiento esperado del navegador:

<script>
	function handleKeydown(event) {
		// AVOID:This prevents ALL keyboard shortcuts, including browser ones
		// event.preventDefault();

		// PREFERRED: only prevent default for specific keys you're handling
		if (event.key === 's' && (event.ctrlKey || event.metaKey)) {
			event.preventDefault()
			saveDocument()
		}
	}
</script>

<svelte:body onkeydown={handleKeydown} />

3. No Considerar el Estado del Foco

Los manejadores de teclado especialmente necesitan considerar qué elemento tiene el foco actualmente:

<script>
	function handleKeydown(event) {
		// AVOID: This fires even when user is typing in a form
		// if (event.key === 'Delete') { deleteSelectedItem(); }

		// PREFERRED: Check if we're in an editable context
		const activeElement = document.activeElement
		const isEditing = activeElement?.matches('input, textarea, select, [contenteditable="true"]')

		if (!isEditing && event.key === 'Delete') {
			deleteSelectedItem()
		}
	}
</script>

<svelte:body onkeydown={handleKeydown} />

4. Suposiciones sobre el Orden de los Manejadores de Eventos

No asumas un orden específico de ejecución entre los manejadores de <svelte:body> en diferentes componentes. Si el orden importa, usa mecanismos explícitos de coordinación:

<script>
	import { getContext, setContext } from 'svelte'

	// Create a context for coordinating keyboard handlers
	const KEYBOARD_CONTEXT = Symbol('keyboard')

	// In a parent component
	setContext(KEYBOARD_CONTEXT, {
		layers: [],
		register(handler, priority) {
			this.layers.push({ handler, priority })
			this.layers.sort((a, b) => b.priority - a.priority)
		},
		unregister(handler) {
			this.layers = this.layers.filter((l) => l.handler !== handler)
		},
		dispatch(event) {
			for (const layer of this.layers) {
				if (layer.handler(event) === false) return
			}
		}
	})
</script>

5. Fugas de Memoria con Closures

Los manejadores de eventos que capturan estado reactivo en un closure pueden inadvertidamente crear fugas de memoria o problemas de closures desactualizados:

<script>
	let items = $state(['a', 'b', 'c'])

	// AVOID: This handler closes over `items` at definition time
	// In Svelte 5, this actually works correctly due to how $state
	// creates reactive references, but be aware of the pattern
	function handleKeydown(event) {
		console.log('Items:', items) // This will see current items
	}
</script>

<svelte:body onkeydown={handleKeydown} />

En Svelte 5 con runes, esto generalmente se maneja correctamente porque $state crea referencias reactivas en lugar de valores estáticos. Sin embargo, si estás trabajando con estado anidado complejo o valores no reactivos, ten en cuenta la semántica de los closures.

Comparación con Patrones Relacionados

Vale la pena entender cuándo usar <svelte:body> versus enfoques alternativos.

`<svelte:body>` vs `<svelte:window>`

<svelte:window> adjunta manejadores al objeto window, mientras que <svelte:body> adjunta a document.body. Las diferencias prácticas:

Los eventos resize y scroll (a nivel de window) deben usar <svelte:window>
La mayoría de los eventos de teclado y mouse pueden usar cualquiera de los dos, pero <svelte:body> es más semánticamente apropiado para eventos que conceptualmente ocurren "dentro de la página"
beforeunload y hashchange deben usar <svelte:window>

<svelte:window onresize={handleResize} onbeforeunload={handleBeforeUnload} />

<svelte:body onkeydown={handleKeydown} onclick={handleClick} />

Usar Actions con `<svelte:body>`

El elemento <svelte:body> admite la directiva use:, lo que te permite adjuntar actions de Svelte directamente al elemento body. Esto es útil para comportamientos que necesitan aplicarse a todo el cuerpo del documento:

<script>
	function trackClicks(node) {
		function handleClick(event) {
			console.log('Body clicked at:', event.clientX, event.clientY)
		}

		node.addEventListener('click', handleClick)

		return {
			destroy() {
				node.removeEventListener('click', handleClick)
			}
		}
	}
</script>

<svelte:body use:trackClicks />

Este patrón es particularmente útil cuando se integran librerías de terceros que necesitan adjuntar comportamiento al elemento body, o cuando tienes comportamientos reutilizables a nivel del body en múltiples componentes.

`<svelte:body>` vs `<svelte:document>`

Svelte también proporciona <svelte:document> para adjuntar manejadores al objeto document. Úsalo para eventos a nivel de documento como visibilitychange:

<script>
	let isVisible = $state(true)

	function handleVisibilityChange() {
		isVisible = !document.hidden
	}
</script>

<svelte:document onvisibilitychange={handleVisibilityChange} />

{#if !isVisible}
	<!-- Pause videos, animations, etc. when tab is hidden -->
{/if}

`<svelte:body>` vs Attachments

Para comportamiento reutilizable a nivel de elemento, Svelte 5.29+ proporciona attachments mediante la directiva {@attach}. Los attachments son el reemplazo moderno de las actions (use:), ofreciendo mejor reactividad y composabilidad. Sin embargo, para eventos verdaderamente globales, <svelte:body> sigue siendo la opción correcta:

<script>
	// Attachment: reusable, element-specific behavior (Svelte 5.29+)
	function clickOutside(callback) {
		return (node) => {
			function handleClick(event) {
				if (!node.contains(event.target)) {
					callback()
				}
			}

			document.body.addEventListener('click', handleClick, true)

			// Cleanup function runs when element is removed
			return () => {
				document.body.removeEventListener('click', handleClick, true)
			}
		}
	}
</script>

<!-- Use attachments for element-specific click-outside -->
<div {@attach clickOutside(() => (isOpen = false))}>
	<!-- Dropdown content -->
</div>

<!-- Use <svelte:body> for global keyboard shortcuts -->
<svelte:body onkeydown={handleGlobalKeydown} />

Los attachments tienen varias ventajas sobre la sintaxis de action use: más antigua:

Totalmente reactivos: Se re-ejecutan automáticamente cuando las dependencias cambian
Componibles: Pueden distribuirse en componentes y pasarse a través de props
Soporte inline: Pueden definirse inline sin declaraciones de funciones separadas
Mejor soporte de TypeScript: Soporte genérico completo e inferencia de tipos mejorada

Integrando Todo: Un Ejemplo Completo

Concluyamos con un ejemplo exhaustivo que demuestra múltiples patrones de <svelte:body> trabajando en armonía—una aplicación de dibujo con atajos de teclado, cambio de herramientas y comportamiento de clic-fuera:

<script>
	// Application state
	let currentTool = $state('brush')
	let brushSize = $state(10)
	let brushColor = $state('#000000')
	let isDrawing = $state(false)
	let showColorPicker = $state(false)
	let showHelp = $state(false)

	let canvasRef = $state(null)
	let colorPickerRef = $state(null)
	let lastPosition = $state(null)

	// Tool definitions
	const tools = [
		{ id: 'brush', key: 'b', name: 'Brush', icon: '🖌️' },
		{ id: 'eraser', key: 'e', name: 'Eraser', icon: '🧹' },
		{ id: 'fill', key: 'f', name: 'Fill', icon: '🪣' },
		{ id: 'picker', key: 'i', name: 'Color Picker', icon: '💉' }
	]

	// Keyboard shortcuts handler
	function handleKeydown(event) {
		// Don't intercept when typing in inputs
		if (event.target.matches('input, textarea')) return

		// Help overlay toggle
		if (event.key === '?' || (event.key === '/' && event.shiftKey)) {
			event.preventDefault()
			showHelp = !showHelp
			return
		}

		// Close any open panels with Escape
		if (event.key === 'Escape') {
			if (showHelp) showHelp = false
			if (showColorPicker) showColorPicker = false
			return
		}

		// Don't process other shortcuts if help is showing
		if (showHelp) return

		// Tool switching with single keys
		const tool = tools.find((t) => t.key === event.key.toLowerCase())
		if (tool) {
			currentTool = tool.id
			return
		}

		// Brush size adjustment
		if (event.key === '[') {
			brushSize = Math.max(1, brushSize - 5)
			return
		}
		if (event.key === ']') {
			brushSize = Math.min(100, brushSize + 5)
			return
		}

		// Color picker toggle
		if (event.key === 'c') {
			showColorPicker = !showColorPicker
			return
		}

		// Undo/Redo
		if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
			event.preventDefault()
			if (event.shiftKey) {
				redo()
			} else {
				undo()
			}
			return
		}
	}

	// Click outside handler for color picker
	function handleClick(event) {
		if (showColorPicker && colorPickerRef && !colorPickerRef.contains(event.target)) {
			// Check if click was on the toggle button
			if (!event.target.closest('[data-color-toggle]')) {
				showColorPicker = false
			}
		}
	}

	// Canvas interaction handlers via body (for drag that might leave canvas)
	function handleMouseMove(event) {
		if (!isDrawing || !canvasRef) return

		const rect = canvasRef.getBoundingClientRect()
		const x = event.clientX - rect.left
		const y = event.clientY - rect.top

		if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
			draw(x, y)
		}

		lastPosition = { x: event.clientX, y: event.clientY }
	}

	function handleMouseUp() {
		if (isDrawing) {
			isDrawing = false
			lastPosition = null
			saveToHistory()
		}
	}

	// Canvas-specific mouse down (not on body)
	function handleCanvasMouseDown(event) {
		isDrawing = true
		const rect = canvasRef.getBoundingClientRect()
		lastPosition = {
			x: event.clientX - rect.left,
			y: event.clientY - rect.top
		}
	}

	// Drawing implementation
	function draw(x, y) {
		if (!canvasRef || !lastPosition) return

		const ctx = canvasRef.getContext('2d')

		ctx.beginPath()
		ctx.moveTo(lastPosition.x, lastPosition.y)
		ctx.lineTo(x, y)
		ctx.strokeStyle = currentTool === 'eraser' ? '#ffffff' : brushColor
		ctx.lineWidth = brushSize
		ctx.lineCap = 'round'
		ctx.lineJoin = 'round'
		ctx.stroke()

		lastPosition = { x, y }
	}

	// History management (simplified)
	let history = $state([])
	let historyIndex = $state(-1)

	function saveToHistory() {
		// Save canvas state to history
		if (!canvasRef) return
		const imageData = canvasRef.toDataURL()
		history = [...history.slice(0, historyIndex + 1), imageData]
		historyIndex = history.length - 1
	}

	function undo() {
		if (historyIndex > 0) {
			historyIndex--
			restoreFromHistory()
		}
	}

	function redo() {
		if (historyIndex < history.length - 1) {
			historyIndex++
			restoreFromHistory()
		}
	}

	function restoreFromHistory() {
		if (!canvasRef || !history[historyIndex]) return

		const img = new Image()
		img.onload = () => {
			const ctx = canvasRef.getContext('2d')
			ctx.clearRect(0, 0, canvasRef.width, canvasRef.height)
			ctx.drawImage(img, 0, 0)
		}
		img.src = history[historyIndex]
	}

	// Initialize canvas
	$effect(() => {
		if (canvasRef) {
			const ctx = canvasRef.getContext('2d')
			ctx.fillStyle = '#ffffff'
			ctx.fillRect(0, 0, canvasRef.width, canvasRef.height)
			saveToHistory()
		}
	})
</script>

<!-- Body-level event handlers -->
<svelte:body
	onkeydown={handleKeydown}
	onclick={handleClick}
	onmousemove={handleMouseMove}
	onmouseup={handleMouseUp}
/>

<div class="drawing-app">
	<header class="toolbar">
		<div class="tool-group">
			{#each tools as tool}
				<button
					class="tool-button"
					class:active={currentTool === tool.id}
					onclick={() => (currentTool = tool.id)}
					title="{tool.name} ({tool.key})"
				>
					{tool.icon}
				</button>
			{/each}
		</div>

		<div class="tool-group">
			<label class="size-control">
				Size: {brushSize}px
				<input type="range" min="1" max="100" bind:value={brushSize} />
			</label>
		</div>

		<div class="tool-group">
			<button
				class="color-button"
				data-color-toggle
				onclick={() => (showColorPicker = !showColorPicker)}
				style="background-color: {brushColor}"
				title="Color (c)"
			>
				<span class="sr-only">Select color</span>
			</button>

			{#if showColorPicker}
				<div class="color-picker-popup" bind:this={colorPickerRef}>
					<input type="color" bind:value={brushColor} />
					<div class="color-presets">
						{#each ['#000000', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'] as color}
							<button
								class="preset"
								style="background-color: {color}"
								onclick={() => {
									brushColor = color
									showColorPicker = false
								}}
							></button>
						{/each}
					</div>
				</div>
			{/if}
		</div>

		<div class="tool-group">
			<button onclick={() => (showHelp = true)} title="Help (?)"> ❓ </button>
		</div>
	</header>

	<main class="canvas-container">
		<canvas bind:this={canvasRef} width="800" height="600" onmousedown={handleCanvasMouseDown}
		></canvas>

		<div class="status-bar">
			Tool: {tools.find((t) => t.id === currentTool)?.name} | Size: {brushSize}px | Color: {brushColor}
		</div>
	</main>

	{#if showHelp}
		<div class="help-overlay" role="dialog" aria-label="Keyboard shortcuts">
			<div class="help-panel">
				<h2>Keyboard Shortcuts</h2>

				<section>
					<h3>Tools</h3>
					<ul>
						{#each tools as tool}
							<li><kbd>{tool.key}</kbd> {tool.name}</li>
						{/each}
					</ul>
				</section>

				<section>
					<h3>Brush Size</h3>
					<ul>
						<li><kbd>[</kbd> Decrease size</li>
						<li><kbd>]</kbd> Increase size</li>
					</ul>
				</section>

				<section>
					<h3>Other</h3>
					<ul>
						<li><kbd>c</kbd> Toggle color picker</li>
						<li><kbd>Ctrl+Z</kbd> Undo</li>
						<li><kbd>Ctrl+Shift+Z</kbd> Redo</li>
						<li><kbd>?</kbd> Toggle this help</li>
						<li><kbd>Esc</kbd> Close panels</li>
					</ul>
				</section>

				<button onclick={() => (showHelp = false)}>Close</button>
			</div>
		</div>
	{/if}
</div>

<style>
	.drawing-app {
		display: flex;
		flex-direction: column;
		height: 100vh;
		font-family: system-ui, sans-serif;
	}

	.toolbar {
		display: flex;
		gap: 1rem;
		padding: 0.5rem 1rem;
		background: #f5f5f5;
		border-bottom: 1px solid #ddd;
		align-items: center;
	}

	.tool-group {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		position: relative;
	}

	.tool-button {
		width: 40px;
		height: 40px;
		font-size: 1.25rem;
		border: 2px solid transparent;
		background: white;
		border-radius: 4px;
		cursor: pointer;
	}

	.tool-button.active {
		border-color: #007bff;
		background: #e7f1ff;
	}

	.color-button {
		width: 40px;
		height: 40px;
		border: 2px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}

	.color-picker-popup {
		position: absolute;
		top: 100%;
		left: 0;
		background: white;
		padding: 1rem;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		z-index: 100;
	}

	.color-presets {
		display: flex;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.preset {
		width: 24px;
		height: 24px;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}

	.canvas-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		background: #e0e0e0;
	}

	canvas {
		border: 1px solid #ccc;
		background: white;
		cursor: crosshair;
	}

	.status-bar {
		margin-top: 0.5rem;
		font-size: 0.875rem;
		color: #666;
	}

	.help-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.help-panel {
		background: white;
		padding: 2rem;
		border-radius: 12px;
		max-width: 500px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.help-panel h2 {
		margin-top: 0;
	}

	.help-panel section {
		margin: 1rem 0;
	}

	.help-panel ul {
		list-style: none;
		padding: 0;
	}

	.help-panel li {
		padding: 0.25rem 0;
	}

	kbd {
		background: #eee;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 0.1em 0.4em;
		font-family: monospace;
		font-size: 0.9em;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
</style>

Conclusión

<svelte:body> representa una de las soluciones más elegantes de Svelte a un desafío común del desarrollo web—gestionar interacciones a nivel global sin comprometer la arquitectura declarativa y basada en componentes que hace valiosos a los frameworks modernos. Desde atajos de teclado hasta patrones de clic-fuera, desde drag-and-drop hasta modos de presentación, la capacidad de adjuntar declarativamente listeners de eventos al body del documento abre patrones de interacción sofisticados que de otro modo requerirían un tedioso boilerplate imperativo.

Los patrones y ejemplos en este tutorial demuestran que dominar <svelte:body> no se trata solo de aprender sintaxis—se trata de entender la propagación de eventos, considerar la accesibilidad, gestionar el rendimiento y diseñar soluciones reutilizables. A medida que construyas aplicaciones más complejas, las técnicas discutidas aquí—lógica de manejadores condicional, gestión de estado coordinada, inicialización consciente del SSR—resultarán invaluables.

Conclusiones Clave

<svelte:body> proporciona manejo de eventos declarativo y seguro para SSR a nivel del body del documento con limpieza automática de listeners, eliminando riesgos de fugas de memoria y gestión imperativa del ciclo de vida
Los manejadores de eventos usan la sintaxis de atributo on* en Svelte 5 (onkeydown, onclick, onmousemove) con manejo opcional de la fase de captura mediante el sufijo capture (onclickcapture)
La detección de clic-fuera requiere verificaciones de element.contains(event.target) para evitar activarse en clics dentro del componente, combinadas con event.stopPropagation() en los botones de alternancia
Los sistemas de atajos de teclado necesitan filtrado de entrada usando shouldIgnoreEvent() para prevenir interferencia con los inputs de formularios mientras se permiten teclas de escape, y normalización de teclas multiplataforma para teclas modificadoras
Los eventos de alta frecuencia (mousemove, scroll) requieren throttling mediante requestAnimationFrame o throttling basado en tiempo para prevenir la degradación del rendimiento por docenas de actualizaciones de estado por segundo
Múltiples componentes con manejadores en el body ejecutan todos los manejadores para cada evento, requiriendo mecanismos de coordinación centralizados o sistemas de prioridad cuando el orden de ejecución importa
La directiva {@attach} (Svelte 5.29+) ofrece una alternativa para comportamiento específico de elementos con mejor reactividad que las actions use:, aunque <svelte:body> sigue siendo ideal para eventos verdaderamente globales
El comportamiento SSR hace que <svelte:body> sea un no-op en el servidor sin listeners de eventos adjuntos, aunque los manejadores que hacen referencia a APIs del navegador aún deben verificar el contexto del navegador en utilidades compartidas

Ver También

Documentación Oficial de Svelte 5 - <svelte:body>
MDN Web Docs - Burbujeo y Captura de Eventos
<svelte:window> - Manejo de eventos a nivel de window para resize, scroll y otros eventos específicos de window
<svelte:document> - Eventos a nivel de documento como cambios de visibilidad y pantalla completa
Manejo de Eventos de Teclado - Comprensión de las propiedades de eventos de teclado y diferencias multiplataforma
Mejores Prácticas de ARIA - Patrones de accesibilidad para navegación por teclado y gestión del foco
Svelte 5 Runes - $effect - Efectos secundarios que complementan el manejo de eventos a nivel del body
API de Rendimiento - requestAnimationFrame - Throttling eficiente de eventos de alta frecuencia