How to write a Web Components with JavaScript ​

class CustomAlert extends HTMLElement {
  static get observedAttributes() {
    return ['icon', 'theme']
  }
  constructor() {
    super();
  }

  connectedCallback() {}    // componentDidMount
  disconnectedCallback() {} // componentWillUnmount
  attributeChangedCallback(oldValue, newValue) {}
}
customElements.define('custom-alert', CustomAlert)

class CustomAlert extends HTMLElement {
  static get observedAttributes() {
    return ['icon', 'theme']
  }
  constructor() {
    super();
  }

  connectedCallback() {}    // componentDidMount
  disconnectedCallback() {} // componentWillUnmount
  attributeChangedCallback(oldValue, newValue) {}
}
customElements.define('custom-alert', CustomAlert)

const myTemplate = document.createElement('template')
myTemplate.innerHTML = `
  <div>Hello, world!</div>
`;

class CustomAlert extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: 'open'    })
    this._shadowRoot.appendChild(myTemplate.content.cloneNode(true))
  }
}

const myTemplate = document.createElement('template')
myTemplate.innerHTML = `
  <div>Hello, world!</div>
`;

class CustomAlert extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: 'open'    })
    this._shadowRoot.appendChild(myTemplate.content.cloneNode(true))
  }
}

import { LitElement, html } from 'lit'

class MyElement extends LitElement {
  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
  }

  update(changed) {
    super.update(changed);
  }

  render() {
    return html`<div></div>`
  }

  updated(changed) {
    super.updated(changed);
  }

  firstUpdated() {
    super.firstUpdated();
  }
}

import { LitElement, html } from 'lit'

class MyElement extends LitElement {
  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
  }

  update(changed) {
    super.update(changed);
  }

  render() {
    return html`<div></div>`
  }

  updated(changed) {
    super.updated(changed);
  }

  firstUpdated() {
    super.firstUpdated();
  }
}