joicomponents/test/polyfill/e_firefox_async_ugly/webcomponents-loader-2.js

Design patterns to build native web components

/**
 * @license
 * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

(function () {
  'use strict';

  function doYourThing(){
    console.log("boo");
    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";
      }
    }
    window.WebComponents1.waitFor(()=>
      customElements.define("my-element", MyElement)
    );
  }



  window.WebComponents1 = {
    waitFor: function (waitFn) {
      if (!waitFn)
        return;
      if (!window.WebComponents1._waitingFunctions)
        return waitFn instanceof Function ? waitFn() : waitFn;
      window.WebComponents1._waitingFunctions.push(waitFn);
    },
    _waitingFunctions: [],
    flushWaitingFunctions: function () {
      var tmp = window.WebComponents1._waitingFunctions;
      window.WebComponents1._waitingFunctions = undefined;
      return Promise.all(tmp.map(function (fn) {
        return fn instanceof Function ? fn() : fn;
      }));
    }
  };

  window.WebComponents2 = {
    _pausedCustomElementsFlushFn: undefined,
    pauseCustomElementsPolyfill: function () {
      if (!window.customElements || !customElements.polyfillWrapFlushCallback)
        return;
      customElements.polyfillWrapFlushCallback(function (originalFlushCallback) {
        window.WebComponents2._pausedCustomElementsFlushFn = originalFlushCallback;
      });
    },
    restartCustomElementsPolyfill: function () {
      if (!window.customElements || !customElements.polyfillWrapFlushCallback)
        return;
      window.WebComponents2._pausedCustomElementsFlushFn && window.WebComponents2._pausedCustomElementsFlushFn();
      // window.WebComponents2._pausedCustomElementsFlushFn = undefined;
      customElements.polyfillWrapFlushCallback(function (originalFlushCallback) {
        originalFlushCallback();
      });
    }
  };

  window.WebComponents3 = {
    bootstrapTemplatePolyfill: function () {
      if (window.HTMLTemplateElement && HTMLTemplateElement.bootstrap)
        HTMLTemplateElement.bootstrap(window.document);
    }
  };

  var newScript = document.createElement('script');
  newScript.src = "https://rawgit.com/webcomponents/webcomponentsjs/master/bundles/webcomponents-sd-ce.js";
  // doYourThing();                  //BROKEN, Illegal constructor
  newScript.addEventListener('load', function () {
    // doYourThing();                 //OK
    window.WebComponents2.pauseCustomElementsPolyfill();
    doYourThing();              //OK
    window.WebComponents3.bootstrapTemplatePolyfill();
    window.WebComponents1.flushWaitingFunctions().then(function(){
      window.WebComponents2.restartCustomElementsPolyfill();
      // doYourThing();             //BROKEN, no error msg no update of the view
    });
    // doYourThing();            //OK
    // setTimeout(doYourThing, 1000);   //BROKEN, no error msg no update of the view
  });
  document.head.append(newScript);
  // doYourThing();        //BROKEN, Illegal constructor
})();