Create your first Web Component with LitElement

#webdev #beginners #webcomponents #html

What is LitElement

LitElement 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.

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>`;
  }
}

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

Check out the Documentation or Github to learn more.

Creating a universal navigation bar

Install dependencies

yarn add lit-element

Install dev dependencies

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

package.json

{
  "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

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

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

module.exports = { plugins };

my-element.js

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

<!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

yarn build
npm publish

Publish Demos:

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

React Demo

Vue Demo

What is UpStamps?

UpStamps 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.

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