allFeaturesTogether.js

let tmpl = document.createElement("template"); // (1)
tmpl.innerHTML = `
 <ul id="webcomponents"> 
   <li>HTML Template</li>
   <li>HTML Import</li>
   <li>Shadow DOM</li>
   <li>Custom Elements</li>
 </ul>`;

class WebComponents extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.
    let shadowRoot = this.attachShadow({
      //(2)
      mode: "open"
    });
    shadowRoot.appendChild(tmpl.content.cloneNode(true)); // (3)
  }
}
window.customElements.define("web-components", WebComponents);