LitJS without build #javascript #webcomponent #lit

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body
    h1 Hello World
    my-element

script.js

import { LitElement, css, html } from 'https://cdn.skypack.dev/lit';

export class MyElement extends LitElement {
  static styles = css`
    h2 {
      color: blue;
    }

    .active {
      color: red;
    }
  `;
  static properties = {
    name: { type: String },
    demo: { type: Boolean },
  };
  constructor() {
    super();
    this.name = 'Dave';
    this.demo = true;
    this.list = ['one', 'two', 'three'];
    this.renderList = this.renderList.bind(this);
  }

  renderList() {
    return html`
      <ul>
        ${this.list.map(item => {
          return html`<li>${item}</li>`;
        })}
      </ul>
    `;
  }

  render() {
    return html`<h2 class="${this.demo ? 'active' : null}">
        Hello ${this.name}! ${this.demo ? '👋' : null}
      </h2>
      ${this.renderList()}
      <button
        @click=${() => {
          this.demo = !this.demo;
          console.log(this.demo);
          console.log('clicked');
          // this.list.push('four');
        }}
      >
        Click
      </button> `;
  }
}
customElements.define('my-element', MyElement);

style.scss

‎‎​