A component that just renders some static markup isn't very interesting. Let's add some data.
First, add a script tag to your component and declare a name
variable:
<script>
let name = 'world';
</script>
<h1>Hello world!</h1>
Then, we can refer to name
in the markup:
<h1>Hello {name}!</h1>
Inside the curly braces, we can put any JavaScript we want. Try changing name
to name.toUpperCase()
for a shoutier greeting.
App.svelte
9
1
2
›
<h1>Hello world!</h1>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
detach,
element,
init,
insert,
noop,
safe_not_equal
} from "svelte/internal";
import "svelte/internal/disclose-version";
function create_fragment(ctx) {
let h1;
return {
c() {
h1 = element("h1");
h1.textContent = "Hello world!";
},
m(target, anchor) {
insert(target, h1, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) {
detach(h1);
}
}
};
}
class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
export default App;
result = svelte.compile(source, {
generate:
css:
});9
1
›
/* Add a <style> tag to see compiled CSS */