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

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> 

我查看了 https://github.com/WebReflection/document-register-element和自定义元素 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如果需要，它将自动转换代码。 (它也会做差异化服务，例如向支持它的浏览器(如 chrome)提供 es6，向不支持它的浏览器(如 IE11)提供 es5)