--- NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: --- In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render). In legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `` element: ```svelte This is some slotted content ``` ```svelte ``` > [!NOTE] If you want to render a regular `` element, you can use ``. ## Named slots A component can have _named_ slots in addition to the default slot. On the parent side, add a `slot="..."` attribute to an element, component or [``](legacy-svelte-fragment) directly inside the component tags. ```svelte {#if open} This is some slotted content +++

+++ +++

+++ {/if} ``` On the child side, add a corresponding `` element: ```svelte ``` ## Fallback content If no slotted content is provided, a component can define fallback content by putting it inside the `` element: ```svelte This will be rendered if no slotted content is provided ``` ## Passing data to slotted content Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. ```svelte

``` ```svelte

{processed.text}

``` The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `` is equivalent to ``. Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute. ```svelte

``` ```svelte

{item.text}

```

Legacy Slots