improve how to generate dynamic slot content in the carousel

[thescientist13]

currently the carousel component needs to know how many slots are being provided in order to dynamically bind everything together.

<pe-carousel slots$=${this.content.length}>
  ${ this.content.map(this.generateSlotTemplate) }
</pe-carousel>

generateCarouselContent() {
  return new Array(this.slots).fill(null).map((item, index) => {
    const isActiveSlot = index === this.activeIndex ? 'active-slot' : 'slot';

    return html`
      <div class$="${isActiveSlot}"><slot name$="slide${index + 1}"></slot>
    `;
  });
}

Not sure if there would be any performance issues query for number of <slot> elements internally within the component itself instead, i.e.

generateCarouselContent() {
  const slots = this.$('slot');

  return slots.length.map((item, index) => {
    const isActiveSlot = index === this.activeIndex ? 'active-slot' : 'slot';

    return html`
      <div class$="${isActiveSlot}"><slot name$="slide${index + 1}"></slot>
    `;
  });
}