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

if you are facing this issue in simple HTML file then below line of code can be helpful

element.attachShadow({mode: 'open'})

Answer 2

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.

Answer 3

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)