Saltar al contenido principal

Componentes

  • Pueden contener HTML, CSS y JavaScript/TypeScript
  • Los nombres de los componentes se escriben con inicial mayúscula para diferenciarlos de los elementos HTML
  • Deben terminar con la extensión .svelte
  • Dentro del HTML y dentro de las llaves { } se puede escribir JavaScript/TypeScript, para controlar el texto
  • Se diferencian de las páginas, funciones remotas, etc. porque no llevan el signo más (+)
src/App.svelte
<script lang="ts">
	let name = "Jhon";
</script>

<h1>Hello {name.toUpperCase()}!</h1>

Atributos dinámicos​

  • Se puede manipular los atributos de los elementos con las llaves { }
  • Si el nombre del atributo es el mismo que del valor, se puede omitir uno
src/App.svelte
<script>
	let src = '/tutorial/image.gif';
	let name = "Jhon";
</script>

<!-- Normal -->
<img src={src} alt="{name} dances."/>

<!-- Shorthand -->
<img {src} alt="{name} dances."/>

Importar componentes​

src/App.svelte
<script lang="ts">
	import Nested from "./Nested.svelte"
</script>

<p>This is a paragraph.</p>

<Nested />

Estilo​

  • Los estilos se pueden escribir en el mismo componente
  • Por defecto, los estilos solo aplican al componente y no de forma global
src/App.svelte
<p>This is a paragraph.</p>

<style>
	p {
		color: goldenrod;
		font-family: "Comic Sans MS", cursive;
		font-size: 2em;
	}
</style>

Etiquetas HTML​

  • Normalmente el texto se agrega como texto sin formato, lo que significa que algunos caracteres especiales como < o > no significan nada
  • Si el texto contienen etiquetas especiales, HTML, entonces se puede renderizar con la etiqueta especial {@html ...}
  • Svelte no sanitiza el contenido, entonces es importante saber la procedencia del contenido, si es contenido personal, puede ser seguro, pero si son, por ejemplo, comentarios de usuarios, es necesario sanitizar el contenido, de lo contrario se corre el riesgo de exponer a los usuarios de la aplicación a *Cross-Site Scripting (XSS) *
<script>
	let some_string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html some_string}</p>