Question

我正在尝试使用精简元素，并且Chrome和Firefox等浏览器一切正常。但是当我尝试使用Microsoft Edge和IE11时遇到了一个问题。在Chrome和Firefox中显示的Web组件在Microsoft Edge和IE11中没有显示。

我在Internet上进行了一些搜索，还阅读了Lit Element的文档，其中说我需要加载polyfill才能使Web组件在Edge和IE11中正常工作，但是在尝试执行操作时遇到了问题这样。

我用来加载polyfill的代码如下，

<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>

我使用了Microsoft Edge中的开发人员工具，并且显示了以下内容。

SCRIPT5022: SCRIPT5022: Syntax error

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

Could not locate https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/ [synthetic:util/global] specified in source map https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js.map.

任何帮助将不胜感激！

Answer 1

您需要webcomponents-bundle.js或webcomponents-loader.js，但不需要两者。另外，由于您的目标是IE11，因此您将需要Webpack之类的模块捆绑器来使用async functions，ES imports之类的功能。

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

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

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

Answer 2

阅读@Harshal所说的话：

请勿使用已被弃用的WebComponentReady。

请改为使用customElements.whenDefined。

您还将需要一个Promise填充。

您不需要打包程序，例如webpack，但是您需要使用Babel之类的东西将ES6代码转换为ES5代码。这样可以将无法进行多填充的内容转换为可以在IE11中使用的代码，并且可以将您的export代码转换为简单的旧IIFE样式代码。

如何修复未在Microsoft Edge中显示的Web组件

2 个答案: