Skip to content

Commit d6f4618

Browse files
Rich-HarrisRich-Harris
committed
tweaks
1 parent c0fbb24 commit d6f4618

File tree

6 files changed

+74
-89
lines changed

6 files changed

+74
-89
lines changed

‎documentation/docs/99-legacy/20-legacy-slots.md‎

Lines changed: 50 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,85 +2,75 @@
22
title: <slot>
33
---
44

5-
```svelte
6-
<slot><!-- optional fallback --></slot>
7-
```
5+
In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).
86

9-
```svelte
10-
<slot name="x"><!-- optional fallback --></slot>
11-
```
7+
In legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `<slot>` element:
128

139
```svelte
14-
<slot prop={value} />
15-
```
16-
17-
Components can have child content, in the same way that elements can.
10+
<!--- file: App.svelte --->
11+
<script>
12+
import Modal from './Modal.svelte';
13+
</script>
1814
19-
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.
15+
<Modal>This is some slotted content</Modal>
16+
```
2017

2118
```svelte
22-
<!-- Widget.svelte -->
23-
<div>
24-
<slot>
25-
this fallback content will be rendered when no content is provided, like in the first example
26-
</slot>
19+
<!--- file: Modal.svelte --->
20+
<div class="modal">
21+
<slot></slot>
2722
</div>
28-
29-
<!-- App.svelte -->
30-
<Widget />
31-
<!-- this component will render the default content -->
32-
33-
<Widget>
34-
<p>this is some child content that will overwrite the default slot content</p>
35-
</Widget>
3623
```
3724

38-
Note: If you want to render regular `<slot>` element, You can use `<svelte:element this="slot" />`.
39-
40-
> [!NOTE]
41-
> In Svelte 5+, use snippets instead
25+
> [!NOTE] If you want to render a regular `<slot>` element, you can use `<svelte:element this={'slot'} />`.
4226
43-
## `<slot name="`_name_`">`
27+
## Named slots
4428

45-
Named slots allow consumers to target specific areas. They can also have fallback content.
29+
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.
4630

4731
```svelte
48-
<!-- Widget.svelte -->
49-
<div>
50-
<slot name="header">No header was provided</slot>
51-
<p>Some content between header and footer</p>
52-
<slot name="footer" />
53-
</div>
54-
55-
<!-- App.svelte -->
56-
<Widget>
57-
<h1 slot="header">Hello</h1>
58-
<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
59-
</Widget>
32+
<!--- file: App.svelte --->
33+
<script>
34+
import Modal from './Modal.svelte';
35+
36+
let open = true;
37+
</script>
38+
39+
{#if open}
40+
<Modal>
41+
This is some slotted content
42+
43+
+++<div slot="buttons">+++
44+
<button on:click={() => open = false}>
45+
close
46+
</button>
47+
+++</div>+++
48+
</Modal>
49+
{/if}
6050
```
6151

62-
Components can be placed in a named slot using the syntax `<Component slot="name" />`.
63-
In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
52+
On the child side, add a corresponding `<slot name="...">` element:
6453

6554
```svelte
66-
<!-- Widget.svelte -->
67-
<div>
68-
<slot name="header">No header was provided</slot>
69-
<p>Some content between header and footer</p>
70-
<slot name="footer" />
55+
<!--- file: Modal.svelte --->
56+
<div class="modal">
57+
<slot></slot>
58+
<hr>
59+
+++<slot name="buttons"></slot>+++
7160
</div>
61+
```
7262

73-
<!-- App.svelte -->
74-
<Widget>
75-
<HeaderComponent slot="header" />
76-
<svelte:fragment slot="footer">
77-
<p>All rights reserved.</p>
78-
<p>Copyright (c) 2019 Svelte Industries</p>
79-
</svelte:fragment>
80-
</Widget>
63+
## Fallback content
64+
65+
If no slotted content is provided, a component can define fallback content by putting it inside the `<slot>` element:
66+
67+
```svelte
68+
<slot>
69+
This will be rendered if no slotted content is provided
70+
</slot>
8171
```
8272

83-
## `<slot key={`_value_`}>`
73+
## Passing data to slotted content
8474

8575
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.
8676

@@ -122,3 +112,5 @@ Named slots can also expose values. The `let:` directive goes on the element wit
122112
<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
123113
</FancyList>
124114
```
115+
116+

‎documentation/docs/99-legacy/21-legacy-$$slots.md‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,26 @@
22
title: $$slots
33
---
44

5-
`$$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.
5+
In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.
66

7-
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.
7+
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.
88

99
```svelte
10-
<!-- Card.svelte -->
10+
<!--- file: Card.svelte --->
1111
<div>
1212
<slot name="title" />
1313
{#if $$slots.description}
14-
<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
14+
<!-- This <hr> and slot will render only if `slot="description"` is provided. -->
1515
<hr />
1616
<slot name="description" />
1717
{/if}
1818
</div>
19+
```
1920

20-
<!-- App.svelte -->
21+
```svelte
22+
<!--- file: App.svelte --->
2123
<Card>
2224
<h1 slot="title">Blog Post Title</h1>
2325
<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
2426
</Card>
2527
```
26-
27-
> [!NOTE]
28-
> In Svelte 5+, this concept is obsolete, as you pass snippets as component props and can check whether or not that prop is set

‎documentation/docs/99-legacy/22-legacy-svelte-fragment.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,20 @@ title: <svelte:fragment>
55
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.
66

77
```svelte
8-
<!-- Widget.svelte -->
8+
<!--- file: Widget.svelte --->
99
<div>
1010
<slot name="header">No header was provided</slot>
1111
<p>Some content between header and footer</p>
1212
<slot name="footer" />
1313
</div>
14+
```
15+
16+
```svelte
17+
<!--- file: App.svelte --->
18+
<script>
19+
import Widget from './Widget.svelte';
20+
</script>
1421
15-
<!-- App.svelte -->
1622
<Widget>
1723
<h1 slot="header">Hello</h1>
1824
<svelte:fragment slot="footer">

‎documentation/docs/99-legacy/30-legacy-svelte-component.md‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,12 @@
22
title: <svelte:component>
33
---
44

5-
```svelte
6-
<svelte:component this={expression} />
7-
```
5+
In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes.
86

9-
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.
10-
11-
If `this` is falsy, no component is rendered.
7+
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:
128

139
```svelte
14-
<svelte:component this={currentSelection.component} foo={bar} />
10+
<svelte:component this={MyComponent} />
1511
```
1612

17-
> [!NOTE]
18-
> In Svelte 5+, this concept is obsolete, as you can just reference `$state` or `$derived` variables containing components
19-
> ```svelte
20-
> <script>
21-
> let Component = $derived(currentSelection.component);
22-
> </script>
23-
>
24-
> <Component />
25-
> <!-- or -->
26-
> <currentSelection.component foo={bar} />
27-
> ```
13+
If `this` is falsy, no component is rendered.

‎documentation/docs/99-legacy/31-legacy-svelte-self.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
2020
```
2121

2222
> [!NOTE]
23-
> This concept is obsolete, as you can just self-import components
23+
> This concept is obsolete, as components can import themselves:
2424
> ```svelte
2525
> <!--- file: App.svelte --->
2626
> <script>
2727
> import Self from './App.svelte'
2828
> export let count;
2929
> </script>
30-
>
30+
>
3131
> {#if count > 0}
3232
> <p>counting down... {count}</p>
3333
> <Self count={count - 1} />

‎documentation/docs/99-legacy/40-legacy-component-api.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: Imperative component API
33
---
44

5+
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.
6+
57
## Creating a component
68

79
```ts
@@ -156,7 +158,7 @@ Unlike client-side components, server-side components don't have a lifespan afte
156158

157159
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.
158160

159-
You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
161+
You can import a Svelte component directly into Node using `svelte/register`.
160162

161163
```js
162164
// @noErrors

0 commit comments

Comments
 (0)