Create Standard Web Components. Welcome Lit!

Create Standard Web Components. Welcome Lit!

Explore your new Front-End framework based on standard web components

Today I'd like to introduce you to a new era of web components. Lit is a simple, fast and lightweight way of developing new applications. You can choose to write it as JavaScript or as a TypeScript syntax, both based on React Class Component.

Lit is not as new as you would think. First release was back in 2019 at the beginning and now Lit is on version 2.

Lit has been adopted by big crops in their web components. As an example, the next web components use Lit: Carbon Web Components ( IBM ), Spectrum Web Components ( Adobe ), Momentum UI Web Components ( Momentum UI ), Google in many projects, PWA Starter ( Microsoft ) and the list can go on.

What is Lit?

Lit is a simple library for building fast, lightweight web components. It is a component base class that provides reactive state, scoped styles and declarative template system. The first thing to know about Lit is that every Lit component is a standard web component. Web components have the superpower of interoperability: natively supported by browsers, web components can be used in any HTML environment, with any framework or none at all.

This makes Lit an ideal choice for developing shareable components or design systems. Lit components can be used across multiple apps that are built on a variety of front-end stacks.

Lit is also perfect for progressively enhancing basic HTML sites. Browsers will recognize Lit components in your markup and initialize them automatically. Or you can also build highly interactive, feature-rich apps out of Lit components, just as you would with a framework like React or Vue.

How do you write Lit?

Well, if you want to start to use Lit and you already know React or Angular, you are lucky! You can choose if you want to use a JS syntax like React or a TypeScript syntax like Angular. I will give you a little overview of both of them. Both JavaScript and TypeScript ways of writing Lit are based on classes.

JavaScript Syntax

first we will need to create a new class named MyElement

import {LitElement, html, css} from 'lit';

export class MyElement extends LitElement {

  static properties = {};

  static styles = css``;


  constructor() {
    super();
    }

  render() {
    return html`
    /* HTML CODE */
    `
    }

}

customElements.define('my-element', MyElement);

So, what did we do here? First, we will import 3 most important things from Lit, the LitElement which we extend in our class, html which is used to render our HTML template and css which will help us with styling.

So, after we create our class, which inherits LitElement, we will need to define the properties of our class in the static properties. This looks like a JSON but actually the values will be store between the brackets.

This will be our properties:

static properties = {
    version: {},

  };

Here we just define version but we do not initialize it.

After that, we will define the constructor of our class

constructor() {
  super();
  this.version = 'STARTING';
  }

We will write the render method which will return an HTML.

render() {
    return html`
    <p>Welcome to the Lit tutorial!</p>
    <p>This is the ${this.version} code.</p>
    `;
  }

In the end we will write our CSS code for our HTML.

static styles = css`
    :host {
      display: block;
      background-color: lightgray;
      padding: 8px;
    }
    :host(.blue) {
      color: blue;
    }
  `;

OR

static styles = css`
    :host {
      display: block;
      background-color: lightgray;
      padding: 8px;
    }
   .red {
      color: red;
    }
  `;

:host will refer to the component itself. You can think of it as a body of the HTML page. The difference between the first and the second style is how you use it. If we want to use the second way of styling, then we will modify our rendered HTML into this

render() {
    return html`
    <p>Welcome to the Lit tutorial!</p>
    <p class="red">This is the ${this.version} code.</p>
    `;
  }

After you did this, you just have to call your component in an HTML file like this

<my-element>Hello World</my-element>

The output will be this

Screenshot 2022-04-19 at 21.13.34.png

But, if we want to use the first method of styling, and here comes the tricky part, we will use that class into our HTML file. So, when you call your component you can give it a class that is defined in styles. Let's call our component into an HTML file.

<my-element class="blue">Hello World</my-element>

For this, the output will look like this one

Screenshot 2022-04-19 at 21.14.39.png

There are more things about Lit but if you want to try something new and fresh, you could give it a try in your next project.