LitElement Hello World

hello-element.js

/* Lit-element simply re-exports lit-html 'html' tag so that you don't have
 * to care about it.
 * See https://github.com/Polymer/lit-element/blob/v2.0.1/src/lit-element.ts#L21
 */
import { LitElement, html } from 'lit-element';

class HelloElement extends LitElement {
  
  constructor() {
    this.name = 'John';
  }
  
  render() {
    return html`
      <p>Hello ${this.name}!</p>
    `;
  }
  
}

/* In order to complete our Web Component definition, we need to define a Custom
 * Element using this class as its constructor.
 */
customElements.define('hello-element', HelloElement);