A Quick Introduction to Lit.js and Lit-Element

Lit.js is a modern lightweight library for building customizable reusable components that work across most browsers and platforms. One key feature of Lit.js is Lit-Element. Lit-Element can be used to create professional looking web features, such as a story viewer or a step-by-step building block construction guide using components.

Web Components

Lit.js uses web component, which are reusable custom element one can use in HTML like any other HTML element. Web Components provide a way to create custom UI elements that can be used across multiple web pages and applications. One can manipulate the styles, behaviors, and structures, of the page a user might see when visiting a website.

Lit-Element intro

Lit-Element is a powerful library for building web components and is well adapted at using Custom Elements, Shadow DOM, and ES Modules. Lit-Element is built on top of the Lit HTML templating system, which provides a fast and efficient way to render HTML templates using JavaScript. Lit-Element allows one to easily define properties, handle events, and render templates, all without needing complex frameworks. Lit-Element allows one to create dynamic, reactive user interfaces that update in real-time. Below is an example of how one can create a custom element with Lit-Element.

import { LitElement, html } from 'lit';

class ExampleElement extends LitElement {
  static get properties() {
    return {
      message: { type: String }
    };
  }

  render() {
    return html`
      <p>${this.message}</p>
    `;
  }
}

customElements.define('example-element', ExampleElement);

In the above example I imported the LitElement and html functions from the library. I then define a class called ExampleElement that extends LitElement. The static get properties() method is used to define the property (message) of the custom element. The render() method is used to render the content of the custom element using the Lit HTML templating system. I used a template literal to render a paragraph element with the message property. Finally, I use the customElements.define() method to define the custom element with the tag name example-element. I then use the custom element in HTML as seen below.

<example-element message="Hello World"></example-element>

In the above code I am using the example-example tag to rendered Hello World to the page using the render method

Lit-Element Features

Lit-Element has versatile tools, that can be used for a wide variety of projects, from simple UI elements to complex web applications. Lit-Element is very useful in Building reusable UI components, such as buttons, forms, and modals that can be used across multiple pages and applications. Lit.js and Lit-Element are excellent tools for practically any project by providing an easily customizable and efficient reactive user interface that updates in real-time.

Sources:

Build a Story Component with lit-element
Build a Brick Viewer with lit-element
Lit.js Documents