此AMD模块未在Chrome中加载，但在Firefox，Safari和IE11中加载，为什么？

Question

此代码在Chrome中不起作用，但在Firefox，Safari和IE11（其中IE11是目标浏览器）中有效。

它是另一个Polymer 2.x中的一个照明元素Web组件，所有组件都转换为ES5和AMD模块，并且使用polyfill使其可以在IE11中使用。 遗憾的是，它也适用于现代浏览器的polyfill，因此ES5转换后的Web组件也可以在那里工作。 生活！

• 演示在这里： https : //lit-in-polymer2-poc.netlify.com/
• 仓库在这里： https : //github.com/jdvivar/lit-in-polymer2-poc

这就是您在Chrome中看到的

这是您在所有其他浏览器中看到的

如您所见，Chrome无法正确解析按钮组件。 它不尊重它的相对路径。

代码是这样的（您不会在编译后的回购中找到它）：

define(['node_modules/@lion/button/lion-button.js']);

在/web/bower_components/simple-wc/simple-wc.html

注意：请避免发表评论，建议我停止使用HTML Imports，Polymer 2.x和Bower，我完全知道😞此POC正是其中的第一步...

Answer 1

解决了！

这是一个polyfills问题！

为Web组件使用正确的polyfills文件解决了此问题： webcomponents-loader.js而不是webcomponents-lite.js

可以在以下位置找到该polyfill的文档，该文档不是删除HTML导入的最新版本： https : //github.com/webcomponents/webcomponentsjs/tree/v1

在提交时在仓库上更新： https : //github.com/jdvivar/lit-in-polymer2-poc/commit/b5d3c8a4ad6986788b62d576e2568674a4ab2dc6