Introduction to LitElement

The use of powerful frameworks and libraries is very widespread nowadays. We can name Angular, React.js, Vue, Svelte, among others.

It's hard to imagine building a web application without the use of any of these component-based frameworks. For these options, the components are reusable and configurable widgets. They are able to provide a custom behavior and styling and they're used as building blocks for the application.

Can we share a component between these frameworks? The short answer is no. Every framework/library has a custom API definition to build components and they are not interoperable with each other.

What is LitElement?

According to the official LitElement website:

LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.

That means we can use the OOP (Object-Oriented Programming) paradigm using JavaScript or even better: TypeScript.

JavaScript vs TypeScript

To create your first custom Web Component using JavaScript, you'll need to define a class that implements the appearance and functionality of it as follows:

import { LitElement, html } from 'lit-element';

class HelloComponent extends LitElement {
  static get properties() {
    return { name: { type: String } };
  }

  constructor() {
    super();
    this.name = 'Luis'; // Set a default value here
  }

  // Defines a template to be "rendered" as part of the component.
  render() { 
    return html`Hello ${this.name}. Welcome to LitElement!`;
  }
}

// Register as a custom element named <hello-component>
customElements.define('hello-component', HelloComponent);

Now let's see how you can write your first Web Component using the power of TypeScript:

import { LitElement, html, property, customElement } from 'lit-element';

//Decorator that register as a custom element named <hello-component>
@customElement('hello-component') 
export class HelloComponent extends LitElement {
  // You can assign the default value here.
  @property({type: String}) name = 'Luis'; 

  // Defines a template to be "rendered" as part of the component.
  render() { 
    return html`Hello, ${this.name}. Welcome to LitElement!</p>`;
  }
}

As you may note, the use of TypeScript decorators will provide the ability to annotate the class declarations and members.

In the next section, you can find more articles to learn and get started with LitElement and TypeScript.

More about LitElement

In the past months, I've been publishing several articles about using LitElement with TypeScript. Also, I've been using these technologies actively to build Single-page applications, and I'm happy to share these resources with you:

• Getting started with LitElement and TypeScript
• Routing Management with LitElement and TypeScript
• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
• Web Components Integration using LitElement and TypeScript
• Testing Web Components with Cypress and TypeScript
• Testing Web Components with Karma and TypeScript
• Using Route Guards, Actions and Web Components
• How to Serve a Single Page Application (SPA) using Rollup.js and Web Dev Server
• How to Setup a TypeScript project using Rollup.js
• How to Build a LitElement Application with Rollup.js and TypeScript

More articles are coming soon! Do not miss any of them and visit the This Dot Blog to be up-to-date.

Feel free to reach out on Twitter if you have any questions. Follow me on GitHub to see more about my work.

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.