Are Web Components actually useable in IE11 and Edge?

Question

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?

Answer 1

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.