Javascript 为自定义图元加载多边形填充的最佳方式是什么？

我目前正在玩自定义元素。我正在努力找到正确的方法（或者说感觉是正确的方法）来填充缺乏支持的浏览器（似乎只有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>

---

建议的方法是始终（仅82 ko）

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

如果你只想支持Firefox和Edge，你可以用webcomponents-sd-ce.js（64KO）替换webcomponents-lite.js，但是在大多数情况下你只能获得几毫秒

---

或者，对于非常糟糕的网络，您可以（4KO）为您执行特征检测和加载

---

你也可以缩小它，甚至更好，直接在主页中插入它的内容，以节省一次请求往返延迟。

强制每个人使用82kb/64kb，不管他们是否需要，这是我不愿意做的事情。我尝试使用

webcomponents loader.js

，但我的自定义元素似乎在实际polyfill运行之前运行（动态加载的脚本似乎是异步运行的？）。是的，它是异步的，因此您应该等待WebComponentsReady事件，如链接中所述

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');
});

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