Skip to content

Introduction to LitElement

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

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(); = 'Luis'; // Set a default value here

  // Defines a template to be "rendered" as part of the component.
  render() { 
    return html`Hello ${}. 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>
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, ${}. 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:

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 is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.