首页 文章

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

提问于
浏览
3

我正在尝试在我的应用中使用自定义元素,并使其兼容所有浏览器(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,我在检查时看不到任何错误消息 .

2 回答

  • 0

    你在用什么元素?

    添加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))

  • 1

    遇到了类似的问题 .

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

    (我正在使用 webcomponents-loader.js

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

相关问题