lazy-lit-element v0.1.0-pre.1

LazyLitElement

Experimental

LazyLitElement erformss updates and renders on the browser's task queue, rather than the microtask queue. This makes rendering non-blocking to other tasks such as event handling, layout, paint, etc.

Using LazyLitElement for lower priority and/or high-rendering-cost elements that don't need to have updates rendered synchronously with each frame can improve the responsiveness of the page it's on.

Example

Use LazyLitElement just like LitElement:

import {LazyLitElement, customElement, property, html, LitElement} from '../lazy-lit-element';

@customElement('my-lazy-element')
export class MyLazyElement extends LazyLitElement {
  @property() name?: string;

  render() {
    return html`<h1>Hello ${this.name}</h1>`;
  }
}

You can force urgent updates with requestUrgentUpdate():

@customElement('my-lazy-element')
export class MyLazyElement extends LazyLitElement {
  @property() name?: string;

  private _onClick() {
    this.requestUrgentUpdate();
  }

  render() {
    return html`
      <h1>Hello ${this.name}</h1>
      <button @click=${this._onClick}>Urgent</button>
    `;
  }
}