joicomponents/test/polyfill/p_firefox_switcharoo/index.html

Design patterns to build native web components

<script>
  /*mini-framework-functions-que*/
  window.WebComponents = {
    waitFor: function (waitFn) {
      if (!waitFn)
        return;
      if (window.WebComponents._waitingFunctions) {
        window.WebComponents._waitingFunctions.push(waitFn);
      } else if (waitFn instanceof Function) {
        waitFn();
      }
    },
    _waitingFunctions: [],
    flushWaitingFunctions: function () {
      window.WebComponents.pauseCustomElementsPolyfill();
      return Promise.all(window.WebComponents._waitingFunctions.map(function (fn) {
        return fn instanceof Function ? fn() : fn;
      })).then(function () {
        window.WebComponents._waitingFunctions = undefined;
        window.WebComponents.restartCustomElementsPolyfill();
      }).catch(function (err) {
        console.error(err);
      });
    }
  }
</script>


<!--<script src="polyfill-loader.js"></script>-->
<script src="polyfill-loader.js" defer></script>
<!--<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/15b1b3e2/webcomponents-bundle.js"></script>-->
<!--<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/15b1b3e2/webcomponents-bundle.js" defer></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);
  });

  setTimeout(
    () => {
      let me = document.createElement("my-element");
      document.body.appendChild(me);
      me.style.border = "20px dotted red";
    },
    1000
  );
  setTimeout(
    () => document.body.innerHTML += "<my-element></my-element>",
    2000
  );
</script>
<!--<script>console.log("Impatience!"); </script>-->
<!--<script>window.WebComponents.waitFor(() => console.log("I have patience... but only when I need to."));</script>-->
<!--<div style="width: 100px; height: 100px; background: blue;"></div>-->
<!--<script>console.log("More impatience!"); </script>-->
<!--<script>window.WebComponents.waitFor(() => console.log("I can be patient too... but only when I need to."));</script>-->
<my-element></my-element>