1

此代码在 Chrome 中不起作用,但在 Firefox、Safari 和 IE11(其中 IE11 是目标浏览器)中起作用。

它是另一个 Polymer 2.x 中的一个发光元素 Web 组件,全部转换为 ES5 和 AMD 模块,并使用 polyfill 使其在 IE11 中工作。可悲的是,现代浏览器也使用了 polyfill,因此 ES5 转换的 Web 组件也可以在那里工作。生活!

这是您在 Chrome 中看到的内容

伊姆古尔

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

简单的例子

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

代码是这样的(编译后你不会在 repo 中找到它):

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

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

注意:请避免建议我停止使用 HTML Imports、Polymer 2.x 和 Bower 的评论,我完全知道这个 POC 正是走出那里的第一步......

4

1 回答 1

0

解决了!

这是一个 polyfills 问题!

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

可以在此处找到该 polyfill 的文档,这不是删除 HTML 导入的最后一个版本: https ://github.com/webcomponents/webcomponentsjs/tree/v1

在此提交上更新了 repo:https ://github.com/jdvivar/lit-in-polymer2-poc/commit/b5d3c8a4ad6986788b62d576e2568674a4ab2dc6

于 2019-08-30T11:35:47.200 回答