<!DOCTYPE html>
<html>
  <head>
    <script>
      class MyThing extends HTMLElement {
        constructor() {
          super();

          this.shadow = this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
         let style = document.createElement('style');
          style.innerText = '@import url("./styles.css");';

          let h1 = document.createElement('h1');
          h1.innerText = 'I am a custom element';

          document.body.appendChild(style);
          this.shadow.appendChild(h1);
        }
      }

      customElements.define('my-thing', MyThing);
    </script>
  </head>

  <body>
    <span>This renders</span>
    <my-thing></my-thing>
    <span>This should also render</span>
  </body>
</html>