让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56？答案

【问题标题】：Make Polymer 3.0 element backwards compatible with IE11 and Firefox 56?让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56？
【发布时间】：2018-12-25 07:18:28
【问题描述】：

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

【问题讨论】：

你在使用 webcomponents 的 polyfill 吗？

标签： cross-browser polymer frontend compatibility web-component

【解决方案1】：

安装 polyfill：

npm install @webcomponents/webcomponentsjs

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

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

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

【讨论】：

Polyfills (webcomponent-loader.js) 似乎在 firefox 45 中不起作用

【解决方案2】：

我可以通过添加 webcomponents-loader.js 来运行它：

 <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
                <script src="./components/subscriber-modal.js" type="module"></script>

但是现在我需要想办法将 ES6 WebComponent 转换为 ES5 以便使用

<script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

运行转译的组件。但是仅使用 babel 会给出未定义的错误。所以会尝试使用browserify。

【讨论】：

【解决方案3】：

请注意，您必须同步加载您的 webcomponents-loader.js，因此请确保不要在您的中使用异步（在 chrome 中，它可以很好地与异步一起使用，但即不能）。第一次遇到同样的问题，我的脚本如下：

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

【讨论】：