我正在试用 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:语法错误
当我点击调试器时,它还会显示以下消息
无法找到源映射中指定的 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 这样的模块 bundler 来使用 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 页面,它应该可以工作。同样,如果您希望使用异步和导入,那么您将需要适当的 polyfill 和 bundler 来打包代码。
关于javascript - 如何修复 Microsoft Edge 中未显示的 Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56334637/