Slots

Just like elements can have children…

  1. <div>
  2. <p>I'm a child of the div</p>
  3. </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:

  1. <div class="box">
  2. <slot></slot>
  3. </div>

You can now put things in the box:

  1. <Box>
  2. <h2>Hello!</h2>
  3. <p>This is a box. It can contain anything.</p>
  4. </Box>