Question

我正在尝试在我的应用中使用自定义元素，并使其兼容所有浏览器（Chrome，Safari，Opera，FireFox，IE）。我用Babel将代码从ES6转换为ES5。

我查看了Polyfills，并且能够使网站在除Internet Explorer之外的所有浏览器上本地工作，使用以下内容：

<script src="../node_modules/webcomponents.js/webcomponents-lite.js"></script>
<script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>

我查看了local query scope和自定义元素es5适配器，但IE从不起作用，其他一些正在运行的浏览器也会破坏。

我一直在通过跨浏览器测试网站测试IE，我在检查时看不到任何错误消息。

Answer 1

你在使用什么元素？

通过

添加https://www.npmjs.com/package/@webcomponents/webcomponentsjs

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

如果组件只使用支持的东西，

在IE11中工作得很好......

然而，很可能你的组件是用ES6编写的，这意味着它们需要像babel那样发生。

如果您有一个简单的组件，您可以通过粘贴代码https://babeljs.io/repl/来测试它，然后将结果提供给IE11。

您很可能希望为您的应用程序创建一个自动执行此操作的构建步骤。或者，对于开发，您可以使用npm i -g polymer-cli并执行polymer serve，如果需要，它会自动转换代码。（它也会进行差异服务，例如将es6服务于支持它的浏览器（如chrome）和es5支持不支持它的浏览器（如IE11））

Answer 2

遇到类似的问题。

解决方案是先将https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js加载到其他polyfills中。

（我使用webcomponents-loader.js）

还请注意，脚本在加载时（设置.src之后的时间）似乎是已解释的，但直到附加到文档后才运行。 -因此请确保在加载必要的polyfill之前不要开始加载依赖库，因为即使脚本尚未运行/未附加，它仍会告诉您例如customElements is not defined。

是否有针对Internet Explorer的自定义元素polyfill？

2 个答案: