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

Question

我正在尝试使用 lit-element，Chrome 和 Firefox 等浏览器一切正常。但是我在尝试 Microsoft Edge 和 IE11 时遇到了问题。在 Chrome 和 Firefox 中显示的 Web 组件在 Microsoft Edge 和 IE11 中不显示。

我在互联网上进行了一些搜索，还阅读了 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 polyfill。

您不需要像 webpack 这样的打包工具，但您需要使用 Babel 之类的东西将 ES6 代码转换为 ES5 代码。这会将无法填充的内容转换为可在 IE11 中运行的代码，并且可以将您的 export 代码转换为普通的旧 IIFE 样式代码。