2019-03-10 14:30:29 +01:00
|
|
|
---
|
|
|
|
title: Slot fallbacks
|
|
|
|
---
|
|
|
|
|
2023-04-02 17:24:33 +02:00
|
|
|
A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `<slot>` element:
|
2019-03-10 14:30:29 +01:00
|
|
|
|
2023-04-02 17:24:33 +02:00
|
|
|
```svelte
|
2019-03-10 14:30:29 +01:00
|
|
|
<div class="box">
|
|
|
|
<slot>
|
|
|
|
<em>no content was provided</em>
|
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
2019-04-23 06:35:50 +02:00
|
|
|
We can now create instances of `<Box>` without any children:
|
2019-03-10 14:30:29 +01:00
|
|
|
|
2023-04-02 17:24:33 +02:00
|
|
|
```svelte
|
2019-03-10 14:30:29 +01:00
|
|
|
<Box>
|
|
|
|
<h2>Hello!</h2>
|
|
|
|
<p>This is a box. It can contain anything.</p>
|
|
|
|
</Box>
|
|
|
|
|
2023-04-02 17:24:33 +02:00
|
|
|
<Box />
|
2019-04-23 06:35:50 +02:00
|
|
|
```
|