让聚合物3.0元素向后兼容IE11和火狐56？

Question

我在聚合物3.0中有一种成分。目前只有Chrome版本67.0.3396.99支持是开箱即用的。火狐61.0.1给出了错误TypeError: window.customElements是未定义的。

Edge会产生以下错误：

SCRIPT5007: SCRIPT5007:无法获得未定义或空引用的属性“polyfillWrapFlushCallback” settings.js (15,14)。SCRIPT5131: SCRIPT5131: Function不是构造函数。

聚合物文档不清楚，也没有一步一步的指南，不存在任何问题。有人能提供尝试和测试的步骤，使聚合物3.0组件工作在最新的浏览器，也在较旧的浏览器，如IE11。

Answer 1

安装填充物：

npm install @webcomponents/webcomponentsjs

然后加载webcomponents-loader.js，以检查和加载您的浏览器所需的任何多边形。在index.html中，在引用web组件之前添加以下内容：

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

希望这能帮到别人！

Answer 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就会产生不需要定义的错误。因此，将尝试使用浏览器化。

Answer 3

请注意，您必须同步加载webcomponents-loader.js，因此请确保在您的组件中不要使用异步(在chrome中，它在异步中工作得很好，但ie不使用)。第一次遇到同样的问题，我的脚本如下：

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