IE11和Edge中实际上是否可以使用Web组件? [英] Are Web Components actually useable in IE11 and Edge?

问题描述

Web组件是一个炙手可热的新事物，它是一个真正的Web标准，每个人都在谈论它们并且大概在使用它们，它们似乎是解决我们遇到的问题的最佳解决方案(在非常不同的站点中共享组件).

因此，我们构建了两个Web组件.在Chrome中可以正常工作，但在IE11中不能正常工作.也许使用polyfills? https://www.webcomponents.org/polyfills 有大量的polyfill，但是IE11一直抱怨<代码>类.

也许编译到ES5?各种来源都声称Web组件需要ES6，因为您不会从IE11中的HTMLElement获得相同的继承.有custom-elements-es5-adapter.js，但是某种程度上它是行不通的.如果我编译下来，Web组件将无法正常工作.如果没有，则IE11在 class 上失败.

然而，每个人都在使用Web组件.你怎么做呢?您根本不支持IE11/Edge吗?我在做错什么吗?

解决方案

如果您想要的只是自定义元素，则可以使它们与IE11和Edge一起使用.Shadow DOM和HTML导入也可以与IE11和Edge一起使用，但是我个人不喜欢使用Shadow DOM，除非在本机支持它的浏览器上.

Firefox和Edge仅可与常规polyfill一起使用.

IE11需要转换为ES5并使用polyfill.

如果您在支持 class 的较新的浏览器上使用ES5转换代码，则需要使用文件 custom-elements-es5-adapter.js

有人使用 webcomponents-lite.js 会自动加载所需的polyfill文件.其他人则加载特定的polyfill，例如 webcomponents-hi-ce.js (HTML导入和自定义元素)或 webcomponents-sd-ce.js (阴影DOM和自定义元素)

https://github.com/webcomponents/polyfills/tree/master/包/webcomponentsjs

更新

如果您使用的是Edge的较新版本，则现在内置使用Chromium的版本，然后将内置对V1组件的支持.

Web Components are the hot new thing, and a true web standard, everybody is talking about them and presumably using them, and they seemed like the perfect solution to a problem we have (sharing components across very different sites).

So we build a couple of web components. The work fine in Chrome, but not in IE11. Use polyfills maybe? https://www.webcomponents.org/polyfills has a ton of polyfills, but IE11 keeps complaining about class.

Compile down to ES5 perhaps? Various sources claim that web components require ES6, because you don't get the same kind of inheritance from HTMLElement in IE11. There's custom-elements-es5-adapter.js, but somehow it doesn't work. If I compile down, webcomponents don't work. If I don't, IE11 fails on class.

And yet everybody is using web components. How do you do it? Do you not support IE11/Edge at all? Am I doing something wrong?

解决方案

If all you want is Custom Elements then you can get them to work with IE11 and Edge. Shadow DOM and HTML Imports can work with IE11 and Edge as well, but I, personally, don't like using Shadow DOM except on browsers that support it natively.

Firefox and Edge will work with just the regular polyfill.

IE11 needs to be Transpiled into ES5 and use the polyfill.

If you are using the ES5 transpiled code on a newer browser, that supports class then you need to use the file custom-elements-es5-adapter.js

Some people use webcomponents-lite.js which will auto-load the needed polyfill files. Others load the specific polyfill, like webcomponents-hi-ce.js (HTML Imports and Custom Elements) or webcomponents-sd-ce.js (Shady DOM and Custom Elements)

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

UPDATE

If you are using a newer version of Edge, the versions that use Chromium, then support for V1 components is now built in.

这篇关于IE11和Edge中实际上是否可以使用Web组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！