Skip to main content

Part 3 / Component composition / Slot fallbacks

A component can specify fallbacks for any slots that are left empty, by putting content inside the <slot> element:

Box.svelte
<div class="box">
	<slot>
		<em>no content was provided</em>
	</slot>
</div>

We can now create instances of <Box> without any children:

App.svelte
<Box>
	<h2>Hello!</h2>
	<p>This is a box. It can contain anything.</p>
</Box>

<Box/>

Next: Named slots

1
2
3
4
5
6
7
8
9
<script>
	import Box from './Box.svelte';
</script>
 
<Box>
	<h2>Hello!</h2>
	<p>This is a box. It can contain anything.</p>
</Box>
initialising