Infinite scrolling loses styles

[jiangfengming]

Describe the bug The cloned DOM nodes loses data-v-xxx attributes generated by scoped css. So the style is lost.

To Reproduce Steps to reproduce the behavior: Just use <style scoped> to style some slides and set infinite-scroll attribute.

The DOM tree:

<section data-v-aa537ff2="" tabindex="0" class="fixed hooper is-vertical">
  <div class="hooper-list">
    <ul class="hooper-track" style="transform: translate(0px, -86px);">
      <li aria-hidden="true" class="slide slide1 hooper-slide" style="height: 43px;"></li>
      <li aria-hidden="true" class="slide slide2 hooper-slide is-prev" style="height: 43px;"></li>
      <li data-v-aa537ff2="" class="slide slide1 hooper-slide is-active is-current" style="height: 43px;"></li>
      <li data-v-aa537ff2="" aria-hidden="true" class="slide slide2 hooper-slide is-next" style="height: 43px;"></li>
      <li aria-hidden="true" class="slide slide1 hooper-slide is-clone" style="height: 43px;"></li>
      <li aria-hidden="true" class="slide slide2 hooper-slide is-clone" style="height: 43px;"></li>
    </ul>
    <div aria-live="polite" aria-atomic="true" class="hooper-liveregion hooper-sr-only">Item 1 of 2</div>
  </div>
</section>

Expected behavior <li> has data-v-xxx attribute.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 0.0.x]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 0.0.x]

Additional context Add any other context about the problem here.

[Teraln]

I have the same problem. Cloned elements jump around on end of loop, because the styles i used to center them aren't applied.

Edit: Removing the "scoped" attribute from the styles fixes the issue. Should make it pretty clear what's wrong. :)

[lejungdu]

@Teraln Thank you so much your answer solved my problem!!!