Angular2 Exception: TypeError el.createShadowRoot is not a function (Safari/Edge)

Question

I have an angular2 app that works great in Chrome and Firefox, but in Safari I get this error:

TypeError el.createShadowRoot is not a function

Answer 1

I faced the same issue recently, got this error on Firefox el.createShadowRoot is not a function

From the documentation, I learned that createShawdowRoot is deprecated, replaced by attachShadow() https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Looking at the encapsulation of all the components in my Angular project, one component stood out and was using the ViewEncapsulation.Native , which was also deprecated so I replaced it by ViewEncapsulation.ShadowDom as recommended, check https://angular.io/api/core/Component#encapsulation

and that cured it for me.

So I suppose that the Native encapsulation compiles to createShawdowRoot no longer supported by Firefox.