infinite-list-with-shadow-stuff.html

infinite-list-with-shadow-stuff.html

<!-- Clean light DOM: -->
<std-list id="list">
  <div class="item">0 - Domenic</div>
  <div class="item">1 - Ojan</div>
  <div class="item">2 - Drew</div>
  <div class="item">3 - Kevin</div>
  <div class="item">4 - Gray</div>
</std-list>

<!-- Via this structure: -->

<std-list id="list">
  #shadow-root
    <style>/*... shared styles */</style>
    <style>
      /* configurable styles (this <style>'s contents may get blown away and replaced) */
      :host { overflow-y: auto; }
    </style>
    <div id="std-items" style="height: 9000px;">
      <div class="std-item" style="transform: translate3d(0px, 0px, 0px);" tabindex="-1"><slot name="slot1"></slot></div>
      <div class="std-item" style="transform: translate3d(0px, 18px, 0px);" tabindex="0"><slot name="slot2"></slot></div>
      <div class="std-item" style="transform: translate3d(0px, 36px, 0px);" tabindex="-1"><slot name="slot3"></slot></div>
      <div class="std-item" style="transform: translate3d(0px, 54px, 0px);" tabindex="-1"><slot name="slot4"></slot></div>
      <div class="std-item" style="transform: translate3d(0px, 72px, 0px);" tabindex="-1"><slot name="slot5"></slot></div>
    </div>
  (end #shadow-root)
</std-list>

<!-- This would only be possible with an imperative API like https://github.com/whatwg/html/issues/3534.
     Otherwise you would have to add slot="slot1", slot="slot2", etc. to the <div class="item"> elements -->