joicomponents/test/polyfill/j_firefox_async_sync/index.html

Design patterns to build native web components

<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<!--<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>-->

<script src="webcomponents-loader-2.js"></script>

<script type="module">
  window.WebComponents.waitFor(() => {
    class MyElement extends HTMLElement {
      connectedCallback() {
        this.style.display = "block";
        this.style.width = "200px";
        this.style.height = "250px";
        this.style.borderRadius = "50%";
        this.style.backgroundColor = "orange";
      }
    }

    customElements.define("my-element", MyElement);
  });
</script>
<my-element></my-element>