Named slots

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:

  1. <article class="contact-card">
  2.     <h2>
  3.         <slot name="name">
  4.             <span class="missing">Unknown name</span>
  5.         </slot>
  6.     </h2>
  8.     <div class="address">
  9.         <slot name="address">
  10.             <span class="missing">Unknown address</span>
  11.         </slot>
  12.     </div>
  14.     <div class="email">
  15.         <slot name="email">
  16.             <span class="missing">Unknown email</span>
  17.         </slot>
  18.     </div>
  19. </article>

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

  1. <ContactCard>
  2.     <span slot="name">
  3.         P. Sherman
  4.     </span>
  6.     <span slot="address">
  7.         42 Wallaby Way<br>
  8.         Sydney
  9.     </span>
  10. </ContactCard>