A .svelte file is a component. An application is composed of one or more of these components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together.
Inside an .svelte file you can add a script, some HTML and some styles.
ex.
<h1>Hello {name.toUpperCase()}</h1>
<script lang="ts">
let name = 'Ishu';
</script>
<style>
h1 {
color: goldenrod;
}
</style>These curly braces are your gateway to JavaScript. You can also use them in element attributes, such as the src of an img. Svelte also provides shorthand attributes, such as <img {src}> which expands to <img src={src}>.
The style rules that you’ve written above are scoped to the component itself, so that you don’t accidentally change the style of h1 elements elsewhere in your app.
Importing components
You can also import components from files saved elsewhere, as it’d be impractical to contain your entire application within one App.svelte.
You can do that like this:
<p>This is a paragraph.</p>
<Nested/>
<style>
p {
color: goldenrod;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<script lang="ts">
import Nested from './Nested.svelte'
</script>Note that for <Nested/> the styles from App.svelte don’t leak into it, it’s got its own styles declared in Nested.svelte. This is what I meant by the styles being scoped to a component.
Rendering HTML directly into a component
Sometimes you need to render HTML directly into a component; you can achieve that using the special {@html ...} tag.
ex.
<script lang="ts">
let string = 'this string contains some <strong>HTML</strong>'
</script>
<p>{@html string}</p>Note that Svelte does not perform any sanitization on the expression inside the @html tag before it gets inserted into the DOM.
Reading order
These notes are to be read in this order: