custom element Element-Defined Content

<!DOCTYPE html>
<html>

<head>
</head>

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

      connectedCallback() {
        console.log('this time the html is empty', this.innerHTML);
        this.innerHTML += '<h3>first</h3>';
        setTimeout(_ => { //
          this.insertAdjacentHTML('beforeend', '<h3>Added One</h>');
        });
      }
    }

    customElements.define('app-drawer', AppDrawer);
  </script>

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

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

</html>