In many cases you'll want to use slots as Tan Li Hau suggested. However, it is possible to pass components as props. For this, we are going to make use of <svelte:component>. It's quite restrictive, but it's a possibility.
https://svelte.dev/docs#svelte_component
<svelte:component>
Normally, you'd use <svelte:component> like this:
<script>
import Component from './component.svelte'
</script>
<svelte:component this={Component} foo={bar} />
The above is equivalent to this:
<script>
import Component from './component.svelte'
</script>
<Component foo={bar} />
Passing down components through props
This means we can actually pass down components through props.
<!-- app.svelte -->
<script>
import ComponentA from './component-a.svelte'
import ComponentB from './component-b.svelte'
</script>
<ComponentA foo={ComponentB} />
And render the component…
<!-- component-a.svelte -->
<script>
export let foo
</script>
<svelte:component this={foo} />
Caveats
Note there are a few things you can't do:
- Set props on the component passed down through props
- Pass down components which children through props
- Or do pretty much anything else with the component passed down as a prop
Svelte may not even be designed to do this (even though it works). So yeah, unless you really need this, use slots. But now you know this is possible.