25

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?

mcv
  • 4,217
  • 6
  • 34
  • 40

1 Answers1

16

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.

Intervalia
  • 10,248
  • 2
  • 30
  • 60
  • 2
    From what I understand, custom-elements-es5-adapter.js is only for new browsers and shouldn't be loaded in IE11. It seems this approach is not going to work if I want to serve all browsers the same files, so I switched to using document-register-element.js, which should work out of the box, but doesn't include support for shadow dom. I'm trying to combine it with shadydom.js, but that doesn't seem to work. – mcv Jan 04 '18 at 14:46
  • Correct. I adjusted the answer – Intervalia Aug 30 '18 at 16:14
  • Thanks guys. This is helpful. I removed document-register-element and added webcomponentsjs to my polyfills file. I wish it was clearer in the Angular docs. – moefinley Mar 23 '20 at 09:17