用于 firefox 的 Polymer 3.0 Polyfils答案

【问题标题】：Polymer 3.0 Polyfils for firefox用于 firefox 的 Polymer 3.0 Polyfils
【发布时间】：2019-01-14 12:27:19
【问题描述】：

我正在使用 firefox 52.3.0 并计划使用 Web 组件（Polymer 3.0）进行开发。我正在寻找适用于 Firefox 的聚合物 3.0 polyfil。

我尝试了 webcomponents-lite.js（部分工作 - 不支持 es5 聚合物）
我试过 webcomponents-bundle.js (ddnt workd)
我什至从@webcomponents 存储库中添加了 es5-adapter.js，它们只是不适用于 firefox。它在 Opera 和 Chrome 中工作（不需要 polyfill），但从来没有在 Firefox 上工作。

我知道 youtube 完全建立在聚合物上，我可以在我的 mozila firefox 中很好地访问它（甚至检查元素），这告诉我有一个可以工作的 polyfil。我只是找不到它。

PS：我希望能够将这些 polymerElements 与 react-js 一起使用，我知道这是可能的，但我还不知道怎么做。谁能告诉我怎么做？

【问题讨论】：

为什么webcomponents-bundle.js 不起作用？顺便说一句，Polymer 3 没有 webcomponents-lite.js polyfill。为什么 Firefox 需要 es5 polyfill？ Firefox 原生支持 ES5。
firefox 似乎只支持 ES6 Web 组件，不支持 ES5。这就是为什么我需要一个polyflil。是的，webcomponents-bundle.js 不适用于 firefox 52，但在 Opera 中运行良好。那么，您能指导我使用哪些 polyfill 吗？我保证我将把我的考验放在一边，并遵循你给出的每一个指南
在下面查看我的答案。

标签： polymer web-component

【解决方案1】：

好吧，这听起来很奇怪。而且 Opera 不需要任何 polyfill，因为它们已经原生提供了所有标准。

您可以尝试的一件事是制作一个 ES6 Web 组件，并从 Polymer 捆绑中获取 ES5 Web 组件。查看官方文档：https://www.polymer-project.org/3.0/toolbox/build-for-production#compile

Polymer 3.x 和 Polymer Elements 是用 ES6（也称为 ES2015）编写的。要允许旧版浏览器呈现您的应用，请将您的代码编译为 ES5。

当您将代码编译为 ES5 时，Polymer 构建工具会将 custom-elements-es5-adapter.js polyfill 注入您的入口点，以便支持 ES6 的浏览器仍然可以呈现您的 ES5 代码。

【讨论】：

【解决方案2】：

@Binh 帮助了我，并为我指明了正确的方向，这让我找到了下面的 firefox polyfills

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Template Polymer 3.0 App">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="theme-color" content="#fff">
  <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>

是的，只有 webcomponents-loader.js

我希望这对前来寻找的人有所帮助

【讨论】：

这很有趣，因为如果同步加载，webcomponents-loader.js 和 webcomponents-lite.js 的功能基本相同。它们仅在异步加载时表现不同。在这里查看README.md github.com/webcomponents/webcomponentsjs 。无论如何，我很乐意提供帮助。
当然，文档也是这么说的，我也想，“WTH，文档说的几乎一样”，但是嘿……我不是谷歌开发人员。还是非常感谢