Does svelte5 have multi {@render} equivalent to ver.4’s multi named slot use inside +layout.svelte？

[thomaschoi721]

I hope to insert multiple different components into the specified {@render} of the upper layout at different routing sub-levels. Since I don’t know a simple way to pass these components to the default children props, my requirement is actually As the title of this question suggests, named slots are used in layouts. I currently use the following code to solve the needs, but I intuitively think that my way is bad and very circuitous, and I do not need to dynamically change the inserted components after loading the page, but I use additional code in order to pass these snippets The writable store and Context methods are added.

Hopefully someone can give me a better idea for my current approach, maybe there should be a direct way to pass props in the +page.svelte html area, but I can't find it.

//+layout.svelte

<script lang="ts">
  import { setContext, createRawSnippet } from 'svelte';
  import { writable } from 'svelte/store';

  const dummySnippet = (text: string) =>
    createRawSnippet(() => {
      return { render: () => text };
    });

  let { children } = $props();

  let slotLeft = writable(dummySnippet('LEFT'));
  let slotCenter = writable(dummySnippet('CENTER'));
  let slotRight = writable(dummySnippet('RIGHT'));

  setContext('LayoutSlot', { slotLeft, slotCenter, slotRight });
</script>

<winbox class="flex flex-row h-full w-full overflow-hidden">
  <listbox class="w-[400px]">
    {@render $slotLeft()}
  </listbox>

  <div class="flex-1 flex flex-col border-x">
    {@render $slotCenter()}
  </div>

  <div class="w-[350px]">
    {@render $slotRight()}
  </div>
</winbox>

{@render children()}

// +page.svelte

<script lang="ts">
  import { onMount, getContext, type Snippet } from 'svelte';
  import type { Writable } from 'svelte/store';

  let {
    slotLeft,
    slotCenter,
    slotRight
  }: {
    slotLeft: Writable<Snippet>;
    slotCenter: Writable<Snippet>;
    slotRight: Writable<Snippet>;
  } = getContext('LayoutSlot');

  onMount(() => {
    $slotLeft = menuLeft;
    $slotCenter = mainContent;
    $slotRight = menuRight;
  });
</script>

{#snippet menuLeft()}
  <p>Left Menu Pending</p>
{/snippet}

{#snippet mainContent()}
  <p>Center Content Pending</p>
{/snippet}

{#snippet menuRight()}
  <p>Right Menu Pending</p>
{/snippet}

<children>TEST</children>

<!-- .... other option snippets from other routing-->
<!-- {#snippet foo1()} -->
<!-- {#snippet foo2()} -->

In addition, when I use this method, I will receive a warning on the browser

[svelte] invalid_raw_snippet_renderTherenderfunction passed tocreateRawSnippetshould return HTML for a single element

[webJose]

I'm unsure if I follow. I'll suggest something and you tell me if I'm close or not.

AFAIK, layout components can only have the children property because there is no way to control what is passed as properties to layout components. Your store+context route seems to be the general consensus since the early days when the file was named __layout.svelte.

As for your example, it makes me wonder: What makes the 3 parts change (left menu, right menu and main content? If it is the route, you should be doing nested +layout.svelte components, where each route will specialize the template according to the route's needs.

If this still doesn't satisfy your need, then I would suggest you simply let the contents of the layout's children snippet to do the laying out. From the code samples that you provided, there is no obvious benefit of having those being rendered in the layout. They could as easily be rendered by the component that the layout mounts.