Basic Custom Element Example

custom-element-example.js

// https://jsfiddle.net/thegreenhouseio/qjj9hvv9/
class HelloWorld extends HTMLElement {
  constructor(name) {
    super();

    this.subject = name || 'World';

    // creates a Shadow DOM tree
    this.root = this.attachShadow({ mode: 'closed' });
  }

  // run some code when the component is ready
  // in this case insert our template into our component's DOM
  connectedCallback() {
    this.root.innerHTML = this.getTemplate();
  }

  // our component's template to display
  getTemplate() {
    return `<h1>Hello ${this.subject}!</h1>`;
  }
}

// register our custom element
customElements.define('hello-world', HelloWorld);