小编Den*_*ein的帖子

我正在玩自定义元素.我很难找到缺乏支持的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 …