1

Is it possible to have multiple slots in a custom component?

i.e.

<template>
   <slot id="first"></slot> 
   <slot id="second"></slot>
</template>
Meirion Hughes
  • 24,994
  • 12
  • 71
  • 122

1 Answers1

7

Yes, but you should use name instead of id.

<template>  
  <div>
    The first slot:
    <div>
      <slot name="slot1"></slot>
    </div>
    The second slot:
    <div>
      <slot name="slot2"></slot>
    </div>
  </div>
</template>  

It's documented here for now: http://blog.durandal.io/2016/05/23/aurelia-shadow-dom-v1-slots-prerelease/ I'll be adding this to the content projection section of the Custom Elements documentation soon.

Ashley Grant
  • 10,879
  • 24
  • 36