让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56?

Posted

技术标签:

【中文标题】让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56?【英文标题】:Make Polymer 3.0 element backwards compatible with IE11 and 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 吗? 【参考方案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>

【讨论】:

以上是关于让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56?的主要内容,如果未能解决你的问题,请参考以下文章

我的OpenGL学习进阶之旅OpenGL ES 3.0和向后兼容性

我的OpenGL学习进阶之旅OpenGL ES 3.0和向后兼容性

vue兼容ie9-11

vue兼容ie9-11

WCF 服务 - 向后兼容性问题

使用 iOS 4.0 库时的向后兼容性