Variable Number of Slots in Aurelia

Question

I want to create a custom element that's going to work like an accordion container for other elements. I'm planning on using the Bootstrap 4 Collapse . I want to be able to place a variable number of other custom elements within it so using slots is not enough.

For example if I knew that there will be 3 elements placed in the accordion I would put three slots in accordion.html and then use it like this:

<accordion>
    <first-custom-element slot="first-element"></first-custom-element>
    <second-custom-element slot="second-element"></second-custom-element>
    <third-custom-element slot="third-element"></third-custom-element>
</accordion>

The thing is, I don't know how many elements will need to placed inside the accordion because I want to make it more generic and reusable so I can use it in multiple pages in my application. What I want is a way to read everything placed inside the <accordion> tags and create slots for each one of these elements the fly. Is there such a functionality in Aurelia or should go for a custom implementation?

Answer 1

Split out the items from the overall accordion element, like this:

accordion.html

<template>
  <div id="accordion" role="tablist" aria-multiselectable="true">
      <slot></slot>
  </div>
</template>

accordion-item.html

<template bindable="panelTitle, headingId, itemId">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="${headingId}">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
            ${panelTitle}
          </a>
        </h4>
    </div>
    <div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}">
      <slot></slot>
    </div>
  </div>
</template>

Usage

<template>
    <require from="accordian.html"></require>
    <require from="accordian-item.html"></require>

    <accordian>
        <accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne">
            <accordian item 1 content>
        </accordian-item>
        <accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo">
            <accordian item 2 content>
        </accordian-item>
    </accordian>
</template>

Answer 2

If you need only one accordion, juste use one slot in your template :

<template>
    <slot></slot>
</template>

Don't put slot property in your inside elements and the whole content will be inserted at the <slot> position.

<accordion>
    <first-custom-element></first-custom-element>
    <second-custom-element></second-custom-element>
    <third-custom-element></third-custom-element>
    ...
</accordion>