A component can specify fallbacks for any slots that are left empty, by putting content inside the <slot>
element:
<div class="box">
<slot>
<em>no content was provided</em>
</slot>
</div>
We can now create instances of <Box>
without any children:
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
</Box>
<Box/>
App.svelte
Box.svelte
xxxxxxxxxx
8
1
<script>
2
import Box from './Box.svelte';
3
</script>
4
5
<Box>
6
<h2>Hello!</h2>
7
<p>This is a box. It can contain anything.</p>
8
</Box>
Console
xxxxxxxxxx
95
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
detach,
7
element,
8
init,
9
insert,
10
mount_component,
11
safe_not_equal,
12
space,
13
transition_in,
14
transition_out
15
} from "svelte/internal";
16
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */