Polymorphic UI Composition via Typed Snippet Props

Snippet

Polymorphic UI Composition via Typed Snippet Props

Snippets in Svelte 5 replace the old slot system with a more powerful, function-like mechanism. By passing snippets as props, you can create highly polymorphic components. This expert pattern allows the parent to define UI blocks that the child component renders with specific context (like 'item' in the row snippet). This improves type safety and makes the component's API explicit rather than relying on implicit slot placement.

snippet.js
javascript
<script lang="ts">
  import type { Snippet } from 'svelte';
 
  let { 
    data, 
    header, 
    row 
  }: { 
    data: any[], 
    header: Snippet, 
    row: Snippet<[any]> 
  } = $props();
</script>
 
<table>
  <thead>{@render header()}</thead>
  <tbody>
    {#each data as item}
      {@render row(item)}
    {/each}
  </tbody>
</table>

svelte

Breakdown

row: Snippet<[any]>

Defines a snippet prop that accepts one argument of type 'any'.

{@render header()}

The @render tag invokes the snippet function to output its HTML content.

{@render row(item)}

Invokes the snippet while passing data down to the template block provided by the parent.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Polymorphic UI Composition via Typed Snippet Props

Related