In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).
```svelte
<slotname="x"><!-- optional fallback --></slot>
```
In legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `<slot>` element:
```svelte
<slotprop={value}/>
```
Components can have child content, in the same way that elements can.
<!--- file: App.svelte --->
<script>
import Modal from './Modal.svelte';
</script>
The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided.
<Modal>This is some slotted content</Modal>
```
```svelte
<!-- Widget.svelte -->
<div>
<slot>
this fallback content will be rendered when no content is provided, like in the first example
</slot>
<!--- file: Modal.svelte --->
<divclass="modal">
<slot></slot>
</div>
<!-- App.svelte -->
<Widget/>
<!-- this component will render the default content -->
<Widget>
<p>this is some child content that will overwrite the default slot content</p>
</Widget>
```
Note: If you want to render regular `<slot>` element, You can use `<svelte:element this="slot" />`.
> [!NOTE]
> In Svelte 5+, use snippets instead
> [!NOTE] If you want to render a regular `<slot>` element, you can use `<svelte:element this={'slot'} />`.
## `<slot name="`_name_`">`
## Named slots
Named slots allow consumers to target specific areas. They can also have fallback content.
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 [`<svelte:fragment>`](legacy-svelte-fragment) directly inside the component tags.
Components can be placed in a named slot using the syntax `<Component slot="name" />`.
In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
On the child side, add a corresponding `<slot name="...">` element:
```svelte
<!-- Widget.svelte -->
<div>
<slotname="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slotname="footer" />
<!--- file: Modal.svelte --->
<divclass="modal">
<slot></slot>
<hr>
+++<slotname="buttons"></slot>+++
</div>
```
<!-- App.svelte -->
<Widget>
<HeaderComponentslot="header"/>
<svelte:fragmentslot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
</Widget>
## Fallback content
If no slotted content is provided, a component can define fallback content by putting it inside the `<slot>` element:
```svelte
<slot>
This will be rendered if no slotted content is provided
</slot>
```
## `<slot key={`_value_`}>`
## 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.
@ -122,3 +112,5 @@ Named slots can also expose values. The `let:` directive goes on the element wit
`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.
Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child.
In legacy mode, the way to know if content was provided for a given slot is with the `$$slots` object, whose keys are the names of the slots passed into the component by the parent.
```svelte
<!-- Card.svelte -->
<!--- file: Card.svelte --->
<div>
<slotname="title"/>
{#if $$slots.description}
<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
<!-- This <hr> and slot will render only if `slot="description"` is provided. -->
<hr/>
<slotname="description"/>
{/if}
</div>
```
<!-- App.svelte -->
```svelte
<!--- file: App.svelte --->
<Card>
<h1slot="title">Blog Post Title</h1>
<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
</Card>
```
> [!NOTE]
> In Svelte 5+, this concept is obsolete, as you pass snippets as component props and can check whether or not that prop is set
The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes.
The `<svelte:component>` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated.
If `this` is falsy, no component is rendered.
In legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:
In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application.
## Creating a component
```ts
@ -156,7 +158,7 @@ Unlike client-side components, server-side components don't have a lifespan afte
A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
You can import a Svelte component directly into Node using `svelte/register`.
Rich Harris
2 years ago