如何修复未在 Microsoft Edge 中显示的 Web 组件 [英] How to fix web components not showing in Microsoft Edge

问题描述

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

I'm trying out lit-element and everything was going well with browsers such as Chrome and Firefox. But I faced a problem when I tried Microsoft Edge and IE11. The web component that shows in Chrome and Firefox doesn't show in Microsoft Edge and IE11.

我在互联网上进行了一些搜索并阅读了 Lit Element 的文档，它说我需要加载 polyfills 才能使 Web 组件在 Edge 和 IE11 中工作，但是我在尝试时遇到了问题所以.

I did some search on the internet and also read the documentation of Lit Element and it says I will need to load the polyfills in order for the web components to work in Edge and IE11, however I have encountered problems while trying to do so.

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

The code that I'm using to load my polyfills are as follow,

<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 中的开发人员工具，以下显示了.

I used the developer tools in Microsoft Edge and the following are showing.

SCRIPT5022:SCRIPT5022:语法错误

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

When i click into the debugger it also shows the following message

无法找到源映射中指定的 https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/[synthetic:util/global] https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js.map.

任何帮助将不胜感激！

推荐答案

您需要 webcomponents-bundle.js 或 webcomponents-loader.js 中的一个，但不能两者都需要.此外，由于您的目标是 IE11，因此您将需要像 Webpack 这样的模块捆绑器来使用 async 函数、ES 导入 等功能.

You need either webcomponents-bundle.js or webcomponents-loader.js but not both. Also, since you are targetting IE11, you will need module bundler like Webpack to use features like async functions, ES imports.

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

To solve your problem without using async and imports, all you need is:

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

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

Add these scripts to your HTML page and it should work. Again, if you wish to use async and imports then you will need appropriate polyfills and bundler to package the code.

这篇关于如何修复未在 Microsoft Edge 中显示的 Web 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！