我正在尝试 lit-element，在 Chrome 和 Firefox 等浏览器上一切都很顺利。但当我尝试 Microsoft Edge 和 IE11 时遇到了问题。在 Chrome 和 Firefox 中显示的 Web 组件在 Microsoft Edge 和 IE11 中不显示。
我在互联网上进行了一些搜索，还阅读了 Lit Element 的文档，它说我需要加载 Polyfill 才能使 Web 组件在 Edge 和 IE11 中工作，但是我在尝试这样做时遇到了问题。
我用来加载我的polyfills的代码如下，
<script src="https://unpkg.com/@webcomponents/[email protected] /cdn-cgi/l/email-protection/webcomponents-bundle.js"></script>
<script src="https://unpkg.com/@webcomponents/[email protected] /cdn-cgi/l/email-protection/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/[email protected] /cdn-cgi/l/email-protection/ [synthetic:util/global] specified in source map https://unpkg.com/@webcomponents/[email protected] /cdn-cgi/l/email-protection/webcomponents-bundle.js.map.
任何帮助将不胜感激！！
你需要webcomponents-bundle.js or webcomponents-loader.js但不是两者兼而有之。另外，由于您的目标是 IE11，因此您将需要像 Webpack 这样的模块捆绑器来使用诸如async functions, ES imports.
要在不使用异步和导入的情况下解决您的问题，您需要的是：
<script src="https://unpkg.com/@webcomponents/[email protected] /cdn-cgi/l/email-protection/webcomponents-bundle.js"></script>
<script src="mypath/somecomponent.js"></script>
将这些脚本添加到您的 HTML 页面中，它应该可以工作。同样，如果您希望使用异步和导入，那么您将需要适当的 polyfill 和捆绑器来打包代码。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
