export function loadPolyfills(){
    /**
     * Shamelessly taken from @webcomponents, adapted to fit own bundling purposes
     */

    // global for (1) existence means `WebComponentsReady` will fire,
    // (2) WebComponents.ready == true means event has fired.
    window.WebComponents = window.WebComponents || {};
    // Feature detect which polyfill needs to be imported.
    let polyfills = [];
    if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
        (window.ShadyDOM && window.ShadyDOM.force)) {
        polyfills.push('sd');
    }
    if (!window.customElements || window.customElements.forcePolyfill) {
        polyfills.push('ce');
    }
    // NOTE: any browser that does not have template or ES6 features
    // must load the full suite (called `lite` for legacy reasons) of polyfills.
    if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
        // Edge has broken fragment cloning which means you cannot clone template.content
        !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
        polyfills = ['lite'];
    }

    if (polyfills.length) {
        let newScript = document.createElement('script');
        // Load it from the right place.
        let url = `/lib/polyfills/webcomponents-${polyfills.join('-')}.js`;
        newScript.src = url;
        // NOTE: this is required to ensure the polyfills are loaded before
        // *native* html imports load on older Chrome versions. This *is* CSP
        // compliant since CSP rules must have allowed this script to run.
        // In all other cases, this can be async.
        if (document.readyState === 'loading' && ('import' in document.createElement('link'))) {
            document.write(newScript.outerHTML);
        } else {
            document.head.appendChild(newScript);
        }
    } else {
        // Ensure `WebComponentsReady` is fired also when there are no polyfills loaded.
        // however, we have to wait for the document to be in 'interactive' state,
        // otherwise a rAF may fire before scripts in <body>

        var fire = function() {
            requestAnimationFrame(function() {
                window.WebComponents.ready = true;
                document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true}));
            });
        };

        if (document.readyState !== 'loading') {
            fire();
        } else {
            document.addEventListener('readystatechange', function wait() {
                fire();
                document.removeEventListener('readystatechange', wait);
            });
        }
    }
}