Component composition
Just like elements can have children...
<div>
<p>I'm a child of the div</p>
</div>
...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the <slot>
element. Put this inside Box.svelte
:
<div class="box">
<slot></slot>
</div>
You can now put things in the box:
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
</Box>
App.svelte
Box.svelte
xxxxxxxxxx
7
1
<script>
2
import Box from './Box.svelte';
3
</script>
4
5
<Box>
6
<!-- put content here -->
7
</Box>
Console
xxxxxxxxxx
59
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
init,
7
mount_component,
8
safe_not_equal,
9
transition_in,
10
transition_out
11
} from "svelte/internal";
12
13
import Box from "./Box.svelte";
14
15
function create_fragment(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */