La estructura de script, template y style
Comprenda la estructura de tres partes de un archivo de componente de Svelte
La estructura de script, template y style 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.
Tres secciones
Un archivo de componente de Svelte tiene tres bloques opcionales de nivel superior: <script>, el marcado y <style>.
El bloque script
El bloque script contiene la lógica del componente en JavaScript o TypeScript estándar.
<script>
let name = "Ada";
</script>El marcado
Todo lo que está fuera de las etiquetas script y style es el marcado del componente. Es HTML ampliado con la sintaxis de plantillas de Svelte.
<h1>Hello {name}!</h1>El bloque style
Los estilos se limitan únicamente a este componente. Los demás componentes conservan su propio aspecto.
<style>
h1 { color: rebeccapurple; }
</style>Un componente completo
Combine los tres elementos en un solo archivo .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Convención de orden
Por convención, el script va primero, el marcado después y style al final. Svelte no impone este orden.
Variante con TypeScript
Añada lang="ts" a la etiqueta script para utilizar TypeScript en su interior.
<script lang="ts">
let name: string = "Ada";
</script>Contexto de script de módulo
Utilice <script context="module"> para el código que se ejecuta una vez por módulo, no una vez por instancia.
<script context="module">
export const VERSION = "1.0";
</script>Sin bloques múltiples
Puede tener como máximo un script de instancia y un script de módulo por archivo.
Etiqueta style opcional
Si su componente no tiene estilos, omita por completo el bloque style.
Etiqueta script opcional
Los componentes con marcado estático también pueden omitir el bloque script. Un archivo .svelte compuesto únicamente por marcado es válido.
Comprobación rápida
¿Dónde se coloca el CSS con ámbito?
Resumen
Un archivo de Svelte tiene hasta tres bloques: script para la lógica, marcado y style para el CSS con ámbito.
Preguntas frecuentes
¿La lección «La estructura de script, template y style» es gratis?
Sí — el texto completo de «La estructura de script, template y style» 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 «La estructura de script, template y style»?
Comprenda la estructura de tres partes de un archivo de componente de Svelte 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 «La estructura de script, template y style»?
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
- La estructura de script, template y style
- Variables reactivas con let
- Interpolación: {expression}
- Valores calculados: declaraciones reactivas $: