Contenido alternativo de los slots
Renderice contenido predeterminado dentro de un cuando el padre no proporcione nada
Contenido alternativo de los slots es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 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.
Contenido predeterminado dentro del slot
El contenido colocado dentro de la etiqueta <slot> se muestra cuando el padre no proporciona nada.
<button>
<slot>Click me</slot>
</button>Valores predeterminados adecuados
Proporcione valores predeterminados razonables que funcionen en la mayoría de los casos sin intervención del padre.
Contenido alternativo para slots con nombre
Los slots con nombre también admiten contenido alternativo.
<slot name="title">Default Title</slot>Estrategia por slot
Puede tener distintas estrategias de contenido alternativo para cada slot. Combínelas según sea necesario.
Se reemplaza al rellenarlo
Si el padre proporciona contenido, el contenido alternativo se reemplaza por completo.
Útil para componentes headless
Los componentes de UI headless suelen tener contenido alternativo mínimo; los consumidores los personalizan por completo.
Evitar contenido alternativo pesado
Mantenga pequeños los valores predeterminados. Un contenido alternativo grande aumenta el tamaño de los componentes que no lo utilizan.
Iconos y etiquetas
Es habitual en botones con iconos: el contenido alternativo muestra un icono genérico si no se proporciona ninguno.
Combinar con condiciones
El contenido alternativo se combina bien con comprobaciones de $$slots para patrones avanzados.
¿No se permite marcado?
El contenido alternativo puede incluir cualquier marcado, incluidos otros componentes.
Prueba visual
Previsualice siempre el componente sin contenido para ningún slot, a fin de comprobar el contenido alternativo.
Comprobación rápida
¿Cuándo se muestra el contenido alternativo del slot?
Repaso
Coloque contenido predeterminado entre las etiquetas <slot> para proporcionar contenido alternativo cuando el padre omita contenido.
Preguntas frecuentes
¿La lección «Contenido alternativo de los slots» es gratis?
Sí — el texto completo de «Contenido alternativo de los slots» 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 «Contenido alternativo de los slots»?
Renderice contenido predeterminado dentro de un cuando el padre no proporcione nada 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 3 de 4.
¿Cuánto tiempo toma la lección «Contenido alternativo de los slots»?
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