Create your first Web Component with LitElement
Tags: html, webcomponents, beginners, webdev
Published: 2020-05-19 10:14:17

---
title: Create your first Web Component with LitElement
published: true
description: A simple base class for creating fast, lightweight web components
cover_image: https://i.imgur.com/uwYA17g.jpg
tags: html, webcomponents, beginners, webdev
---

### What is LitElement

[LitElement](https://lit-element.polymer-project.org/) is a simple base class for creating fast, lightweight web components.

LitElement makes it easy to define Web Components. Use your components anywhere you use HTML: in your main document, a CMS, Markdown, or a framework like React or Vue.

**Why use LitElement?**

- It is simple and familiar;
- It is extremely fast;
- Follows the Web Components standards;
- Work with any framework.


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

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
```

```javascript
<simple-greeting name="Everyone"></simple-greeting>
```

Check out the [Documentation](https://lit-element.polymer-project.org/) or [Github](https://github.com/Polymer/lit-element) to learn more.

### Creating a universal navigation bar

**Install dependencies** 

```javascript
yarn add lit-element
```

**Install dev dependencies** 

```javascript
yarn add -D @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators polymer-cli rollup rollup-plugin-node-resolve
```

**package.json** 

```javascript
{
  "name": "bar-service",
  "version": "0.0.2",
  "description": "",
  "main": "build/index.js",
  "module": "build/index.es.js",
  "jsnext:main": "build/index.es.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "polymer serve",
    "build": "rollup -c"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "polymer-cli": "^1.9.11",
    "rollup": "^2.6.0",
    "rollup-plugin-node-resolve": "^5.2.0"
  },
  "dependencies": {
    "lit-element": "^2.3.1"
  }
}
```

**rollup.config.js** 

```javascript
import resolve from "rollup-plugin-node-resolve";

export default {
  input: ["my-element.js"],
  output: {
    file: "build/index.js",
    format: "es",
    sourcemap: true,
  },
  plugins: [resolve()],
};
```

**babel.config.js** 

```javascript
const plugins = [
  "@babel/plugin-proposal-class-properties",
  ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
];

module.exports = { plugins };
```

**my-element.js** 

```javascript
import { LitElement, html, css } from "lit-element";

class MyElement extends LitElement {
  static get styles() {
    return css`
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover:not(.active) {
        background-color: #111;
      }

      .active {
        background-color: #4caf50;
      }
    `;
  }
  render() {
    return html`
      <ul>
        <li><a href="#home">Noticias</a></li>
        <li><a href="#news">Agenda</a></li>
        <li><a href="#contact">Serviços</a></li>
        <li style="float:right"><a class="active" href="#about">Perfil</a></li>
      </ul>
    `;
  }
}
customElements.define("bar-service", MyElement);
```

**index.html** 

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="my-element.js"></script>
</head>
<body>
    <bar-service></bar-service>
</body>
</html>
```

**Build and Publish to NPM** 

```javascript
yarn build
npm publish
```


### Publish Demos:

All the demos are using the publish package from npm **yarn add bar-service"

**React Demo**

{% codesandbox bar-service-react-cjk4l %}

**React Demo**

{% codesandbox bar-service-vanilla-rwpp4 %}

**Vue Demo**

{% codesandbox bar-service-vue-b8on5 %}

### [What is UpStamps?](https://www.upstamps.com)

[UpStamps](https://www.upstamps.com) is a Feature Flag Management Platform to separate code from different environments and projects. 

UpStamps helps teams manage their projects using feature management with a **Central control** to progressively deliver features to users with confidence.

[Sign Up for Free](https://app.upstamps.com)

🛳 Ship when you're ready 
🚀 Accelerate feature release 
🙈 Hide unfinished features

![UpStamps Control Center](https://i.imgur.com/FQEqNbP.png)

Useful links about UpStamps:

- [About](https://www.upstamps.com)
- [Documentation](https://docs.upstamps.com)
- [Start Testing in Production](https://app.upstamps.com)