mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
473 B
28 lines
473 B
6 years ago
|
---
|
||
|
|
title: Slots
|
||
|
|
---
|
||
|
|
|
||
|
|
Just like elements can have children...
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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`:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div class="box">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
You can now put things in the box:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<Box>
|
||
|
|
<h2>Hello!</h2>
|
||
|
|
<p>This is a box. It can contain anything.</p>
|
||
|
|
</Box>
|
||
|
|
```
|