Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.