让 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和向后兼容性