Skip to main content

The previous example contained a default slot, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this <ContactCard>. In those cases, we can use named slots.

In ContactCard.svelte, add a name attribute to each slot:

<article class="contact-card">
		<slot name="name">
			<span class="missing">Unknown name</span>

	<div class="address">
		<slot name="address">
			<span class="missing">Unknown address</span>

	<div class="email">
		<slot name="email">
			<span class="missing">Unknown email</span>

Then, add elements with corresponding slot="..." attributes inside the <ContactCard> component:

	<span slot="name"> P. Sherman </span>

	<span slot="address">
		42 Wallaby Way<br />