joicomponents/test/polyfill/r_925/b.html

Design patterns to build native web components

<!--<script src="polyfill-loader.js"></script>-->
<script src="polyfill-loader.js" defer></script>
<!--<script src="polyfill-bundle.js"></script>-->
<!--<script src="polyfill-bundle.js" defer></script>--><!-- This works, when a bugfix call to customElements.upgrade is added in waitFor. But that should not be necessary. Why? -->

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

    console.log("customElements.define");
    customElements.define("my-element", MyElement);
  });

  setTimeout(
    () => {
      let me = document.createElement("my-element");
      document.body.appendChild(me);
      me.style.border = "2px dotted red";
    },
    1000
  );
  setTimeout(
    () => document.body.innerHTML += "<my-element></my-element>",
    2000
  );
</script>
<script>console.log("adding my-element"); </script>
<my-element></my-element>