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

【问题标题】：Is there a Custom Elements polyfill targeting Internet Explorer?是否有针对 Internet Explorer 的自定义元素 polyfill？
【发布时间】：2018-05-20 21:55:38
【问题描述】：

我正在尝试在我的应用程序中使用自定义元素，并让它在所有浏览器（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，但在检查时我看不到任何错误消息。

【问题讨论】：

你读过github.com/WebReflection/document-register-element/issues/97

标签： internet-explorer web-component polyfills custom-element

【解决方案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）

【讨论】：

【解决方案2】：

遇到了类似的问题。

解决方案是在其他 polyfill 之前加载 https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js。

（我使用webcomponents-loader.js）

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

【讨论】：