[Web-API] HTML5 Create an custom element

This sample shows that how to define a custom HTML docuemnt using window.customElements.

customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
  }
});

To use, include shadow element to a HTML DOM.

<show-hello name="John"></show-hello>

Check out the documents for more details and Browser compatibility. Window.customElements