joicomponents/test/polyfill/q_frame/d.html

Design patterns to build native web components

<script>
  /*mini-framework-functions-que*/
  window.WebComponents = window.WebComponents || {};
  window.WebComponents.waitFor = window.WebComponents.waitFor || function (waitFn) {
    console.log("waitFor");
    if (!waitFn)
      return;
    if (window.WebComponents._waitingFunctions) {
      window.WebComponents._waitingFunctions.push(waitFn);
    } else if (waitFn instanceof Function) {
      console.log("waitForExecute");
      waitFn();
      //bug in customElements polyfill?
      //    if the waitFn() customElements.define does not trigger a call to customElements.upgrade. why?
      customElements.upgrade && customElements.upgrade(document);
    }
  };
  window.WebComponents._waitingFunctions = window.WebComponents._waitingFunctions || [];
  window.WebComponents.flushWaitingFunctions = window.WebComponents.flushWaitingFunctions || function () {
    console.log("flushing");
    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);
    });
  };
  window.WebComponents.pauseCustomElementsPolyfill = window.WebComponents.pauseCustomElementsPolyfill || function () {
    console.log("pausing CE");
    if (window.customElements && customElements.polyfillWrapFlushCallback) {
      customElements.polyfillWrapFlushCallback(function () {});
      if (document.readyState === "loading")
        document.addEventListener("DOMContentLoaded", function(){
          customElements.upgrade(document);
        });
    }
  };
  window.WebComponents.restartCustomElementsPolyfill = window.WebComponents.restartCustomElementsPolyfill || function () {
    console.log("restart CE");
    if (!window.customElements || !customElements.polyfillWrapFlushCallback)
      return;
    console.log("restart 2");
    customElements.polyfillWrapFlushCallback(function (fn) {fn();});
    customElements.upgrade(document);
  };
  window.WebComponents.bootstrapTemplatePolyfill = window.WebComponents.bootstrapTemplatePolyfill || function () {
    if (window.HTMLTemplateElement && HTMLTemplateElement.bootstrap)
      HTMLTemplateElement.bootstrap(window.document);
  };
</script>


<!--<script src="polyfill-loader.js"></script>-->
<!--<script src="polyfill-loader.js" defer></script>-->
<!--<script src="https://rawgit.com/webcomponents/webcomponentsjs/15b1b3e2/webcomponents-bundle.js" onload="window.WebComponents.flushWaitingFunctions()"></script>-->
<!-- This works, when a bugfix call to customElements.upgrade is added in waitFor. But that should not be necessary. Why? -->
<script defer src="https://rawgit.com/webcomponents/webcomponentsjs/15b1b3e2/webcomponents-bundle.js" onload="window.WebComponents.flushWaitingFunctions()"></script>

<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>