cross-browser - 让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56？

Question

我在聚合物 3.0 中有一个组件。目前只有 Chrome 版本 67.0.3396.99 支持是开箱即用的。并且 Firefox 61.0.1 给出错误 TypeError: window.customElements is undefined 。

Edge 给出以下错误：

SCRIPT5007：SCRIPT5007：无法获取未定义或空引用的属性“polyfillWrapFlushCallback”

settings.js (15,14)。SCRIPT5131：SCRIPT5131：函数不是构造函数。

聚合物文档不清楚，也没有可以正常工作的分步指南。有人可以提供经过试验和测试的步骤来使 Polymer 3.0 组件在最新的浏览器和旧浏览器（如 IE11）中工作。

标签： cross-browserpolymerfrontendcompatibilityweb-component

Answer 1

安装 polyfill：

npm install @webcomponents/webcomponentsjs

然后加载 webcomponents-loader.js 以检查并加载浏览器所需的任何 polyfill。在您的 index.html 中，在对 Web 组件的任何引用之前添加：

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

希望这会对某人有所帮助！