Javascript 如何修复Microsoft Edge中未显示的web组件

我正在试用lit元素，在Chrome和Firefox等浏览器上一切都很顺利。但我在尝试微软Edge和IE11时遇到了一个问题。在Chrome和Firefox中显示的web组件在Microsoft Edge和IE11中没有显示

我在互联网上做了一些搜索，也阅读了Lit元素的文档，它说我需要加载polyfills，以便web组件在Edge和IE11中工作，但是我在尝试这样做时遇到了问题

我用来加载多边形填充的代码如下：

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js"></script>

<script type="module">
  window.WebComponents = window.WebComponents || {
    waitFor(cb){ addEventListener('WebComponentReady', cb) }
  }
  WebComponents.waitFor(async () => {
    import('mypath/somecomponent.js');
  });
</script>

window.WebComponents=window.WebComponents | |{
waitFor（cb）{addEventListener（'WebComponentReplay'，cb）}
}
WebComponents.waitFor（异步（）=>{
导入（'mypath/somecomponent.js'）；
});

我使用了Microsoft Edge中的开发人员工具，如下所示

SCRIPT5022:SCRIPT5022:语法错误

当我点击调试器时，它还会显示以下消息

找不到https://unpkg.com/@网络组件/webcomponentsjs@2.2.7/在源映射中指定了[synthetic:util/global]https://unpkg.com/@网络组件/webcomponentsjs@2.2.7/webcomponents bundle.js.map.

---

任何帮助都将不胜感激

您需要

webcomponents bundle.js

或

webcomponents loader.js

，但不能两者都需要。此外，由于您的目标是IE11，因此需要类似模块绑定器的网页包来使用

异步函数

，

ES导入

等功能

要在不使用异步和导入的情况下解决问题，您只需：

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
<script src="mypath/somecomponent.js"></script>

---

将这些脚本添加到您的HTML页面，它应该可以工作。同样，如果您希望使用async和imports，则需要适当的polyfills和bundler来打包代码。

阅读@Harshal所说的内容，然后：

不要使用

webcomponentrady

它已被弃用

而是使用

您还需要一个

Promise

polyfill

---

您不需要像webpack这样的捆绑程序，但您需要使用类似的方式将ES6代码转换为ES5代码。这将把不能多填充的东西转换成在IE11中工作的代码，并可以将您的

导出

代码转换成普通的旧iLife风格代码。

您实际上不需要模块绑定器。您可以使用Babel将ES6代码转换为ES5代码。是的@Intervalia，没错。巴贝尔应该够了。捆绑机是可选的。谢谢你们的帮助！看来还有很多工作要做，还有很多东西要学！注意这个！感谢您的帮助，对于web组件，似乎还有很多东西需要学习！我已经和他们一起工作近3年了。我仍在学习其中的微妙之处。