Lit Element is a simple library for creating fast, lightweight web components that work in any web page with any framework.

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.

Getting Started

Create a Project Folder and Open it in VS code.

Open console in project directory.

Type npm init

Enter Project name and press enter enter enter …

This will create a Package.json file.

Now We need to install some npm packages.

Type npm install lit-element

We will use webpack to bundle our project.

Type npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server --save-dev

Now we will start creating app components

Create src folder and create App.js file inside it. Copy below code in App.js file

import { LitElement, html, css } from "lit-element";
class App extends LitElement {
  static get styles() {
    return [css``];
  }
  render() {
    return html`
      <div>Loading Application Component Successfully</div>
    `;
  }
  constructor() {
    super();
  }
}

customElements.define("app-container", App);

Now Create another file header.js and copy below code

import { LitElement, css, html } from "lit-element";
class Header extends LitElement {
  static get styles() {
    return [css``];
  }
  render() {
    return html` <div>This is a header in shadow dom</div>`;
  }
  static get properties() {
    return {
      eg: {
        type: String,
      },
    };
  }
  constructor() {
    super();
  }
}

customElements.define("app-header", Header);

Import app-header into App.js

Type import ./header.js

Now inject header component App

Type <app-header></app-header> in render function

  render() {
    return html`
      <app-header></app-header>
      <div>Loading Successfully</div>
    `;
  }

Now create two files in base directory of your project

webpack.dev.js , webpack.prod.js and copy below code respectively

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/App.js",
  },
  devtool: "inline-source-map",
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    app: "./src/App.js",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Add following scripts to package.json file

"start": "webpack-dev-server --hot --inline --config webpack.dev.js", "build": "webpack --config webpack.prod.js",

Now type npm start in console.

This will start dev server and by default will run on port 8080

Now lets add some css to our project

Create App.styles.js file in src folder and copy following code

import { css } from "lit-element";
export const AppStyles = css`
  .app-container {
    border: solid 2px black;
  }
  h1 {
    text-align: center;
  }
  .app-body {
    text-align: justify;
  }
`;

Import this file to App.js import { AppStyles } from "./App.styles"; and add this to styles array

static get styles() {
    return [css``, AppStyles];
  }

Add made some changes to html of app js

render() {
    return html`
      <div class="app-container">
        <app-header></app-header>
        <h1 class="app-title">App title</h1>
        <p class="app-body">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
          numquam in ipsa optio cumque architecto quisquam, at repellendus
          facere iusto consequatur animi inventore possimus quas, sint sunt
          quidem maxime libero?
        </p>
      </div>
    `;
  }

Now if you see in browser you will notice that styles of App component will not effect app-header component. This is because app-header is attached to Shadow DOM of App and thus styles will not pass to it.

This is great for creating reusable independent components which we can directly plug to any part of our application without worrying about styles conflicting with other components.

Finally we have a working lit element project.

In next part we will restructure our project and add routing on it.