0
0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-28 16:12:17 +01:00
svelte/documentation/docs/99-legacy/21-legacy-$$slots.md
Simon H 4c7cfff434
docs: legacy docs (#13756)
* docs: legacy docs

add docs on old syntax

* rename section

* tweaks

* tweak

* tweaks

* tweaks

* tweaks

* fix link

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
2024-10-21 23:35:51 -04:00

744 B

title
$$slots

In runes mode, we know which snippets were provided to a component, as they're just normal props.

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.

<!--- file: Card.svelte --->
<div>
	<slot name="title" />
	{#if $$slots.description}
		<!-- This <hr> and slot will render only if `slot="description"` is provided. -->
		<hr />
		<slot name="description" />
	{/if}
</div>
<!--- file: App.svelte --->
<Card>
	<h1 slot="title">Blog Post Title</h1>
	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
</Card>