Svelte by Example: Slots

The contents of a Svelte component can be passed through slots. Svelte supports default slots, named slots, and slots that pass data back to the slotted content (also known as scoped slots).

In this example, we'll wrap our todo list in a layout component.

A slot can be declared with the self-closing <slot> tag.

Slots can have a name.

Default slot contents can be passed as children.

Named slot contents can be passed by setting a slot attribute on an HTML element.

Layout.svelte

<main>
  <slot />
</main>

<footer>
  <slot name="footer" />
</footer>

TodoList.svelte

<script>
  import Layout from './Layout.svelte';
</script>

<Layout>
  <h1>Todo List</h1>
  <!-- … -->

  <p slot="footer">
    Subtracting from your list of priorities
    is as important as adding to it.
  </p>
</Layout>

You can check whether a component has provided named slot contents through $$slots.

Layout.svelte

{#if $$slots.footer}
  <footer>
    <slot name="footer" />
  </footer>
{/if}

With slot props, a component can pass data to the slot content.

Data can be passed to slot like it's a component.

Data can be bound to a variable with a let:<name> attribute.

Quote.svelte

<script>
  let quote = "Subtracting from your list…";
</script>

<blockquote>
  <slot {quote} />
</blockquote>

MyQuote.svelte

<script>
  import Quote from "./Quote.svelte";
</script>

<Quote let:quote={quote}>
  <p>Quote: {quote}</p>
</Quote>

resources://