lit-html.js

import { html, render } from 'lit-html';
import { repeat } from 'lit-html/lib/repeat';


const label = (props) => html`<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><label id="${props.id}" class=${props.class} style="${props.style}" for="${props.for}" tabindex="${props.tabindex}" title="${props.title}">${props.text}</label></div>`;

const app = (props) => html`<div>
  <h2>Dynamic Title</h2>
  <section>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
      ${repeat(props, (data) => data.id, (data, index) => label(data))}
      
    </div>
  </section>`;

const container = document.getElementById("container");

let items = [];

for (var i = 0; i < 5000; i++) {
  items.push({ text: "Example " + Math.random(), "class": "test", "style": "asdf", "for": "", "tabindex": 1, "title": "title", "id": i });
}

setTimeout(clearInterval, 10000, setInterval(function () {
  let item = items.shift();
  items.push(item);

  render(app(items), container);
}.bind(this), 0));