xtal-vlist
xtal-vlist provides a declarative "infinite scrolling" virtual list web component.
Note that for Demo 2, if you click expand all, and enable Chrome's Web Vitals dev tool (under rendering tab), there is no Cumulative Layout Shift.
This is done by utilizing the intersectional settings:
<xtal-vlist ...
row-intersectional-settings='{
"rootClosest": ".scroller",
"options": {
"rootMargin": "300px",
"threshold": 0
}
}'>
...
</xtal-vlist>API
Example
<xtal-vlist style="height:600px;width:100%;" id="vlist"
row-transform='{
"span": "."
}'
>
<template slot=row>
<div>
<span></span>
</div>
</template>
</xtal-vlist>
<script>
const list = [];
for (let i = 0; i < 100000; i++) {
list.push(i);
}
vlist.list = list;
</script>The row-transform syntax is based on css-like Declarative Trans-Render syntax (DTR).
Installation
- npm instal xtal-vlist
- In JS, import 'xtal-vlist/xtal-vlist.js';
or
- jsDelivr
<script type=module>
import 'https://esm.run/xtal-vlist/xtal-vlist.js';
</script>Viewing Your Element Locally
$ npm install
$ npm run serve