Svelte · Middle · Question 14 of 75

How do you pass named content areas (formerly named slots) to a component?

<Table data={rows}>
  {#snippet header()}
    <th>Name</th>
  {/snippet}
  {#snippet row(item)}
    <td>{item.name}</td>
  {/snippet}
</Table>

✓Correct answer: Declare snippets inside the component's tags; they become props with the same names
2Use slot="header" attributes only
3Pass HTML strings as props

Explanation

Inside Table they are received with $props() and rendered with {@render header()} and {@render row(item)}.

Further reading

Test yourself

Take the Svelte · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.