Passing Snippet to grandchildren

[hepiBatman]

I have template module (shown below) which should be unaware of any view being fed into it: Render1, Render2, etc. The view in this case is the grandchildView which needs to be passed down to GrandChildTemplate component. I utilise context but wonder if there is a better way to do it without context or passing props all the way down?

I don't mind if it is Svelte4 or Svelte5 solution.

// Render1.svelte
<ParentTemplate>{#snippet grandchildView()}<a>grandchild render1</a>{/snippet}</ParentTemplate>

// Render2.svelte
<ParentTemplate>{#snippet grandchildView()}<a>grandchild render2</a>{/snippet}</ParentTemplate>

// Render3.svelte
<ParentTemplate>{#snippet grandchildView()}<a>grandchild render3</a>{/snippet}</ParentTemplate>


// ParentTemplate.svelte
const {grandchildView} = $props();
setContext('grandchildView', grandchildView);
{#each children as child}<ChildTemplate {child} />{/each}

// ChildTemplate.svelte
{#each grandChildren as grandChild}<GrandChildTemplate {grandChild} />{/each}

// GrandChildTemplate.svelte
const grandchildView = getContext('grandchildView');
{@render grandchildView()}

[gajendrachary]

Your current approach using setContext / getContext is actually the correct and idiomatic way to pass snippets to grandchildren in Svelte 5 without prop drilling. But here's the complete working pattern for both Svelte 4 and Svelte 5:

---

Svelte 5 solution (Snippets + Context):

<!-- Render1.svelte -->
<script>
  import ParentTemplate from './ParentTemplate.svelte';
</script>

<ParentTemplate>
  {#snippet grandchildView()}
    <p>Content for Render1</p>
  {/snippet}
</ParentTemplate>

<!-- ParentTemplate.svelte -->
<script>
  import { setContext } from 'svelte';
  import ChildTemplate from './ChildTemplate.svelte';

  let { grandchildView, children } = $props();

  // Pass snippet via context so GrandChildTemplate can access it
  setContext('grandchildView', grandchildView);
</script>

{@render children?.()}

<!-- ChildTemplate.svelte -->
<script>
  import GrandChildTemplate from './GrandChildTemplate.svelte';
  let { grandChildren } = $props();
</script>

{#each grandChildren as grandChild}
  <GrandChildTemplate {grandChild} />
{/each}

<!-- GrandChildTemplate.svelte -->
<script>
  import { getContext } from 'svelte';
  const grandchildView = getContext('grandchildView');
</script>

{@render grandchildView()}

---

Key points:

• In Svelte 5, snippets passed as children or named slots become snippet props ($props()). Use {#snippet grandchildView()} in the parent and receive it as a prop.
• setContext / getContext is the recommended approach for passing snippets to deeply nested components — it avoids prop drilling and keeps intermediate components clean.
• {@render grandchildView?.()} (with optional chaining) is safer in case the context is not always provided.

Svelte 4 equivalent:

Use named slots + getContext passing slot content as a component reference.

Your approach is correct — just make sure the snippet is passed as a named snippet prop and not as a regular prop object. Hope this helps!

[yakubka]

context is the right approach for passing snippets to grandchildren when you want the template component to stay unaware of the view. using setContext / getContext with a symbol key is clean and avoids prop drilling.

<!-- TemplateModule.svelte -->
<script>
  import { setContext } from "svelte";
  import { GRANDCHILD_VIEW } from "./context-keys.js";

  let { grandchildView } = $props();
  setContext(GRANDCHILD_VIEW, grandchildView);
</script>

<!-- GrandChildTemplate.svelte -->
<script>
  import { getContext } from "svelte";
  import { GRANDCHILD_VIEW } from "./context-keys.js";

  const view = getContext(GRANDCHILD_VIEW);
</script>

{@render view?.()}

the alternative without context is render props: pass the snippet as a prop all the way down. context is better here because the intermediate TemplateModule does not need to know about GrandChildTemplate internals.

if you are on svelte 5, the snippet is just a function, so getContext returns it directly and you call it with {@render view?.()}.