xtal-vlist

xtal-vlist provides a declarative "infinite scrolling" virtual list web component.

Demo 1 -- Simple

Demo 2 -- Tree View

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

1. npm instal xtal-vlist
   1. In JS, import 'xtal-vlist/xtal-vlist.js';

or

2. jsDelivr

<script type=module>
    import 'https://esm.run/xtal-vlist/xtal-vlist.js';
</script>

Viewing Your Element Locally

$ npm install
$ npm run serve