Can I use a slotted component to display other components in svelte?

Question

Hello I'm using the _layout to divide my app into sections like this

_layout.html

    <div class="container"> <-- creates a 12 column grid
      {#if $user} 
        <Header /> <-- spans the first row of the 12 columns
        <Menu segment={child.segment}/> <-- spans the first 2 columns of the remaining rows
        <Content slot={child.component}/> <-- spans the other 10 columns
      {:else}
        <Login /> 
      {/if}
    </div>

And this is what I'm trying to achieve

Currently I use the svelte lifecycle hooks in the content component to set the "component to display" into the slot manually but this feels wrong since the route dosnt include the component to display

<content>
  <slot>
    {#if dashboard}
      <Dashboard />
    {:elseif users}
      <Users />
    {/if}
  </slot>
</content>

<script>
  var dashboard, users = false;

   export default {
     oncreate() {
       this.dashboard = true;
     },
     ...

Feels like i should include the components through the routes '/' & '/users' and the content component should just display the child.component

If the vertical menu is contextual to the right side content I will manage it inside each route. You can check this Work In Progress: github.com/appshore/SvelteSapperGraphQL/blob/master/src/routes/… — Brice
No the menu is static but i have realized that this question is irrelevant, ill post why — Matti

Matti Matti · Accepted Answer · 2019-01-16T15:42:04

According to the Svelte doc "a slot can contain anything"

In my example there was no need for a slot at all, i just needed to include the components and control each was shown with a variable.

I guess the takeaway point from this post is: even though a slot can contain anything, that doesn't mean it should.

Can I use a slotted component to display other components in svelte?

1 Answers