Slots predeterminados para la proyección de contenido
Coloque un elemento dentro de un componente para aceptar contenido arbitrario de los hijos
Slots predeterminados para la proyección de contenido es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Qué son los slots
Los slots permiten que los componentes padre inserten marcado en lugares específicos de un componente hijo.
El elemento slot
Dentro del hijo, coloque una etiqueta <slot /> donde deba aparecer el contenido.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Uso desde el padre
Coloque los elementos hijos dentro de la etiqueta del componente. Aparecerán donde esté el slot.
<Card>
<p>Hello inside the card!</p>
</Card>Potencia de la composición
Este patrón permite crear estructuras de diseño reutilizables, como tarjetas, modales y páginas.
Varios elementos hijos
Cualquier cantidad de elementos puede rellenar el slot predeterminado.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Cadenas simples
También puede pasar texto simple como contenido del slot.
<Button>Click me</Button>Contenido condicional
Use {#if} dentro del padre para elegir qué contenido insertar en el slot.
Slots de componentes
El contenido de un slot puede incluir libremente otros componentes.
<Card>
<Avatar />
<Username />
</Card>Estilos
El contenido insertado conserva los estilos del padre que lo escribió, no los del hijo.
Diseño frente a lógica
Los slots son una herramienta de diseño y composición, no un mecanismo para pasar datos. Use props para los datos.
Puntos de inserción de slots
Puede tener varias posiciones de slot en un componente: una predeterminada y otras con nombre.
Comprobación rápida
¿Dónde aparece el contenido insertado en un slot?
Repaso
Use <slot /> en un hijo y pase los elementos hijos entre las etiquetas del padre para insertar contenido.
Preguntas frecuentes
¿La lección «Slots predeterminados para la proyección de contenido» es gratis?
Sí — el texto completo de «Slots predeterminados para la proyección de contenido» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Slots predeterminados para la proyección de contenido»?
Coloque un elemento dentro de un componente para aceptar contenido arbitrario de los hijos Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Slots predeterminados para la proyección de contenido»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Slots predeterminados para la proyección de contenido
- Slots con nombre mediante slot="name"
- Contenido alternativo de los slots
- Comprobación del contenido de los slots con $$slots