Web components using LIT Element

Published in

OffBridge

4 min readApr 5, 2020

Planning to develop a feature which should support to every javascript library? and here is your answer “build a Web Component”.

By using Web components you can build your own custom, reusable components to use in web pages and web apps. Web components are based on existing web standards, so they will work across all modern web browsers and can use in any javascript libraries.

Custom Elements, Shadow DOM, ES Modules and HTML Template are four main specifications where web components builton.

There are few main libraries for building the web components like Hybrids, LitElement , Polymer, Skate.js, Slim.js, Stencil…

So now it’s time for choosing the best library. Personally, I prefer to use Lit Element to build our very first web component.

Might you have question like “ mmm…. why only LIT? ” here is your answer.

“ LitElement uses lit-html to render into the element’s Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html.” Hopefully, this makes convincing explanation to get started with creating the web-component. If not, please know more about LIT(https://lit-element.polymer-project.org/guide) and get convinced(just kidding). You can try any other library too and sure you will come back here.

LIT Element:

What is Lit Element :

LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework. There is nothing better definition than this. Again, you can refer https://lit-element.polymer-project.org/guide to know more.

What is Lit Html :

LitElement uses lit-html to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change.

Setting up the playground :

LitElement uses JavaScript modules to import dependencies by their npm package names. One option is Polymer CLI, another one is Webpack CLI.

ooh.. might confusion arises like which one do I choose?

Polymer CLI - which includes a development server that converts module names to paths on the fly; and a configurable build tool that packages your code for deployment. Cannot convert ES6 modules.

Webpack CLI - webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. Also it helps to convert ES6 modules.

So, I personally choose Webpack CLI, because it supports a web-component with ES6 standards.

Lets setup the app on your local:

Step 1: Clone the repository

https://github.com/EeswarKV/get-started-lit

Step 2: Install dependencies

npm install --save-dev webpack webpack-cli webpack-dev-server copy-webpack-plugin html-webpack-pluginnpm install --save-dev @webcomponents/webcomponentsjscd getting-started-lit-wcnpm install

Step 3: Run the app locally

npm run dev

Aah, that’s it , now you are able to run the first “LIT Hello world “ app locally.

Now it’s time to know more about how to Create a LitElement component:

To create a new class based on LitElement:

In your project folder, make sure you install the lit-element package from npm:

npm install lit-element

2. To write a new element, these are the primary things to do :

Import the LitElement base class and the html helper function.
Create a new class that extends the LitElement base class.
Implement render to define a template for your web component.
Register your component’s HTML tag with the browser.

That’s it, let see the code.

Example:

get-start-lit-element.js

// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';// Extend the LitElement base class
class GetStartLitElement extends LitElement {/**
   * Implement `render` to define a template for your element.
   *
   * You must provide an implementation of `render` for any element
   * that uses LitElement as a base class.
   */
  render(){
    /**
     * `render` must return a lit-html `TemplateResult`.
     *
     * To create a `TemplateResult`, tag a JavaScript template literal
     * with the `html` helper function:
     */
    return html`
      <!-- template content -->
      <p>A paragraph</p>
    `;
  }
}
// Register the new element with the browser.
customElements.define('get-start-lit-element', GetStartLitElement);

Let’s style our component:

The styles you add to your component are scoped using shadow DOM. For a quick overview of shadow DOM styling, see Shadow DOM styling overview.

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

class GetStartLitElement extends LitElement {
  static get styles() {
    return css`
      div { color: red; }
    `;
  }
  render() { 
    return html`
      <div>I'm styled!</div> 
    `;
  }
}

Let’s create a custom-element with properties:-

The following example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel. LitElement also supports a vanilla JavaScript method of declaring reactive properties.

import { LitElement, html } from 'lit-element';class GetStartLitElement extends LitElement {      // Define properties. Properties defined here will be automatically observed.static get properties() {
   return {
     myProperty: { type: String },
   }
}
   // Render element DOM by returning a `lit-html` template.
      render() {
        return html` Web Components are <span>${this.myProperty}</span>! `;
      }

    }<get-start-lit-element myProperty="awesome"></get-start-lit-element>

To play more with LIT, please refer “https://lit-element.polymer-project.org/guide”.

Publishing the component:

Please refer to below page for publishing the component in npm.

https://lit-element.polymer-project.org/guide/publish