<tabs-clab> Tabs first content cut off from dom when is inside a dom-repeat

[equinusocio]

The <tabs-clab> component cut off the first .tab-content div when is inside a dom-repeat element, each template iteration. The issue is present only on Chrome but if you put a <div> element as a wrapper outside the dom-repeat it work.

Not working example:

<template is="dom-repeat" items="{{items}}">
  <tabs-clab labels='["Tab 1", "Tab 2", "Tab 3"]'>
     <div class="tab-content">Tab 1 content</div> <!-- First content is cut off each iteration -->
     <div class="tab-content">Tab 2 content</div>
     <div class="tab-content">Tab 3 content</div>
  </tabs-clab>
</template>

Working example:

<div>
  <template is="dom-repeat" items="{{items}}">
    <tabs-clab labels='["Tab 1", "Tab 2", "Tab 3"]'>
       <div class="tab-content">Tab 1 content</div>
       <div class="tab-content">Tab 2 content</div>
       <div class="tab-content">Tab 3 content</div>
    </tabs-clab>
  </template>
</div>

@LasaleFamine think this can be the "issue".

attached() {
    this._content = this.getEffectiveChildren();
}

[moebiusmania]

we will keep extra attention on this while rewriting for Orkestra Elements, regarding this version we will keep the workaround

[LasaleFamine]

A solution could be just don't handle the "content", like the paper-tabs element and maybe use another element to handle the content (paper-tab).

[equinusocio]

The way is the composition like paper-tabs. Components oa-tabs and oa-tab should not know the tab content. oa-tabs should just handle the oa-tab show/hide, not his slotted content