joicomponents/test/polyfill/m_firefox_noQue_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>
  window.WebComponentsPolyMode = "sync";
</script>
<script src="webcomponents-loader-2.js"></script>
<my-element></my-element>

<script>
  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);

  setTimeout(
    () => {
      let me = document.createElement("my-element");
      document.body.appendChild(me);
      me.style.border = "20px dotted red";
    },
    3000
  );
  setTimeout(
    () => document.body.innerHTML += "<my-element></my-element>",
    6000
  );
</script>
<my-element></my-element>