mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-22 12:27:29 +01:00
docs: Add <svelte:component>
deprecation section also to preview docs. (#12862)
This commit is contained in:
parent
cb124315be
commit
d64aee7432
@ -82,6 +82,36 @@ When authoring custom elements, use the new [host rune](/docs/runes#$host) to di
|
||||
>greet</button>
|
||||
```
|
||||
|
||||
## `<svelte:component>` in runes mode
|
||||
|
||||
In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
|
||||
|
||||
In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
|
||||
|
||||
In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
|
||||
|
||||
For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
|
||||
|
||||
```diff
|
||||
{#each items as item}
|
||||
- <svelte:component this={item.condition ? Y : Z} />
|
||||
+ {@const Component = item.condition ? Y : Z}
|
||||
+ <Component />
|
||||
{/each}
|
||||
```
|
||||
|
||||
A derived value may be used in other contexts:
|
||||
|
||||
```diff
|
||||
<script>
|
||||
...
|
||||
let condition = $state(false);
|
||||
+ const Component = $derived(condition ? Y : Z);
|
||||
</script>
|
||||
- <svelte:component this={condition ? Y : Z} />
|
||||
+ <Component />
|
||||
```
|
||||
|
||||
Note that using `$props` and `$host` will put you in [runes mode](/docs/runes) — be sure to update your props and state accordingly.
|
||||
|
||||
## `immutable`
|
||||
|
Loading…
Reference in New Issue
Block a user