custom element shadow dom

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <script>
    class AppDrawer extends HTMLElement {
      constructor() {
        super(); // always call super() first in the ctor.

        // Attach a shadow root to the element.
        let shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
          <slot></slot>
          <style>:host { ... }</style> <!-- look ma, scoped styles -->
          <b>I'm in shadow dom!</b>
        `;
      }
      //...
    }
    customElements.define('app-drawer', AppDrawer);
  </script>

  <h1>custom element</h1>
  <h2>Element-Defined Content</h2>

  <app-drawer>
    <h3>foo</h3>
  </app-drawer>
</body>

</html>