为自定义元素加载polyfill的最佳方法是什么？

Question

我正在玩自定义元素.我很难找到缺乏支持的polyfill浏览器的正确方式(或者感觉正确的方式)(看似只有Firefox？).

我目前正在做以下事情:

if ('customElements' in window) {
    var e = document.createElement('script');
    e.src = '/static/elements/my-element.js';
    document.body.appendChild(e);   
} else {
    var e = document.createElement('script');
    // customElements
    e.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.8/webcomponents-sd-ce.js';
    e.onload = function() {
        var c = document.createElement('script');
        // ShadyCSS
        c.src = '/static/js/custom-style-interface.min.js';
        c.onload = function() {
            var i = document.createElement('script');
            i.src = '/static/elements/my-element.js';
            document.body.appendChild(i);
        }
        document.body.appendChild(c);
    }
    document.body.appendChild(e);
}

这可行,但显然效率极低(特别是在慢/高延迟网络上),而且看起来非常嘈杂.在尝试支持Firefox之前,我可以做到:

<script src="/static/elements/my-element.js"></script>

现在我上面有这种憎恶.必须有一个更好的方法,但我似乎找不到一个.

如何确保customElement和ShadyCSS polyfill之前运行my-element.js而不会延迟下载量？任何指针都非常感谢!

编辑: 现在我正在使用另一种方法,我将在这里添加.我不认为它是完美的,但似乎比我的第一种方法更好或强迫每个人下载polyfills无论他们是否需要它们.

function insertScript(url, downloadAsync) {
    const script = document.createElement('script');
    document.head.appendChild(script);
    script.async = downloadAsync;
    script.src = url;
    return script;
}

function downloadAsync(url) {
    return new Promise((resolve, reject) => {
        const script = insertScript(url, 'true');
        script.onload = resolve;
        script.onerror = reject;
    });
}

var deps = [];
if (!('customElements' in window)) {
    deps.push(downloadAsync('/url/of/polyfill.js'));
    // if you need more than 1 polyfill add more deps.push
}

Promise.all(deps).then(() => {
    insertScript('/static/elements/my-element.js');
});

Answer 1

建议的方法是始终加载完整的polyfill(仅限82 ko).

<script src="/path/to/webcomponents-lite.js"></script>
<script src="/static/elements/my-element.js"></script>

由于脚本加载是同步的,因此将按正确的顺序加载polyfill和自定义元素.

如果您只想支持Firefox和Edge,可以用webcomponents- sd-ce.js(64 ko)替换webcomponents-lite.js,但在大多数情况下你只能获得几毫秒.

或者,对于非常糟糕的网络,您可以使用webcomponents-loader.js(4 ko)来执行功能检测和加载.

您也可以将其缩小,甚至更好,将其内容直接插入主页以节省一个请求往返延迟.