xtal-vlist
Current Status
The current functionality of xtal-vlist is being transplanted over to laissez-list, as that is a better description of what it does currently.
Another attempt may be made in the future to restore true virtual list functionality to 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