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

推荐的方法是始终load the complete 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 但是你会在大多数情况下只能获得几毫秒。

或者，对于非常糟糕的网络，您可以use the webcomponents-loader.js（4 ko）为您执行功能检测和加载。

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

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

1 个答案: