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

createShadowRoot() should only be called if you use ViewEncapsulation.Native.

Either use ViewEncapsulation.Emulated or ensure polyfills are loaded (I can't guide you how, because I don't use the TS toolchain, only Dart)


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.

Tags:

Angular