Treat layout pages like components when using named slots

[Aias]

Let's say I have a _layout.svelte like the following:

<slot name="layout-pre"></slot>

<div id="intermediate">Some other intermediate stuff.</div>

<slot></slot>

And now I have a child view (let's call it homepage.svelte which inherits that layout, which puts some stuff into the named slot, and the rest into the default slot:

<h1 slot="layout-pre">This should come before #intermediate.</h1>

<!-- When rendered, the div from above should get inserted here from the layout:
<div id="intermediate">Some other intermediate stuff.</div>
-->

<main>Since this doesn't use a named slot, it'll just get inserted into the unnamed slot above.</main>

Right now this is not allowed, and the following error is thrown: Element with a slot='...' attribute must be a descendant of a component or custom element. Are there technical or usage reasons why we wouldn't want to treat a layout like any other component with respect to slots?

[joakim]

I assumed this would work, only to get that error. I think this would be very useful in various situations.

Here's my use case (_layout.svelte):

<aside>
  <slot name="aside"></slot>
</aside>

<!-- other markup here, for various reasons -->

<main>
  <slot></slot>
</main>

With routes being components, shouldn't this be possible?

[buhrmi]

I guess it doesn't work because the Svelte compiler needs to know at compile-time which parent-component the slots will end up in.

[jdgaravito]

was looking for this. I'm sad its not posible.

[buhrmi]

Well, there's nothing keeping us from writing our pages like

<Layout>
  <h1 slot="above">...</h1>
  <main>derp derp lalalala</main>
</Layout>

[silllli]

Is this the same issue / reason why slot props apparently aren't passed from layout files to components?

As mentioned on Stackoverflow here and here.

[jdgaravito]

but, for example i was unsuccessfully trying to make this :

   <named slot>
 <Navcomponent in layout>
    <slot>

I mean, having 1 slot, then the regular layout in the middle with a navbar, and finally the regular slot. this for having each page to dinamicaly display stuff in two sites

[Bandit]

The issue @silllli mentions is confusing me at the moment. Svelte's docs say that <slot>s are meant to be able to pass props

[zakaria-chahboun]

You have to do it in a regular way, by creating a custom layout: (_myLayout.svelte)
and include it in your index page.

[mrmaglet]

Can someone show how to include a _customLayout.svelte as zakaria-chahboun suggests?

[zakaria-chahboun]

Can someone show how to include a _customLayout.svelte as zakaria-chahboun suggests?

Example:

We have a route called test.
So we just create a folder named test, and inside of this folder we have our svelte files,
One is our router and the second is our custom layout, like so:

• test
  • [id].svelte
  • _customLayout.svelte

The _customLayout.svelte is like this:

<slot name="sidebar"></slot>
<slot name="profile"></slot>

And the [id].svelte is like this:

<script context="module">
  export async function preload(page) {
    const { id } = page.params;
    return {id};
}
</script>

<script>
    import customLayout from "./_customLayout.svelte";
</script>

<customLayout>
    <div slot="sidebar">test</div>
</customLayout>

[mquandalle]

Is there some technical reasons preventing slots to be implemented by default for layouts defined with _layout.svelte/$layout.svelte?

[Nick-Mazuk]

Bit late to the discussion and it looks like this issue was originally from Sapper, but I've found some good uses for named slots in layouts with Svelte/kit.

For instance, let's image a long blog post with a table of contents sidebar. It would be really helpful if the main contents is the default slot and the sidebar is a named slot. This would make development really easy! But let's imagine a more complex scenario because on mobile sites, this sidebar should disappear and potentially be replaced with a hamburger menu in the menu. Using named slots, this is easy as you can define the name in the $layout.svelte. But without it, every page needs to implement the header as well. This may be a contrived example, but the point stands.

Other's earlier in this thread have suggested you can just create a Layout component, import that onto your page, and then use named slots with that. But…

• Doesn't that defeat the purpose of using a $layout.svelte?
• This will impact performance as everything will get redownloaded and rerendered on page navigation
• Destroys all state that could be shared between pages
  • For instance, the YouTube search bar's value persists between page changes
• If your site uses multiple layouts, that means also maintaining multiple layout components and multiple layout pages (if any part of the layout is static)

[stalkerg]

I agree, without this feature any dynamic sidebar becoming a disaster.

[parischap]

I have the same issue.
My web site is divided in three parts : header, rest, footer.
Logically, header and footer would go in $layout.svelte and rest would go in each page and be rendered in the layout by <slot/>.

However, on mobile devices, I want header and part of the rest to have the height of the viewport. So I would need to have two different slots like so:

<div class="flex flex-col flex-nowrap h-screen sm:h-480px">
  <header class="flex-none h-20">
    <MainHeader />
  </header>
  <section class="flex-1">
    <slot ="top_slot"/>
  </section>
</div>
<section>
  <slot />
</section>
<footer class="flex-none h-20">
  <MainFooter />
</footer>