Search code examples
javascriptangularshadow-dom

How to solve issue loading angular component with ViewEncapsulation.Native in firefox

I have an issue loading angular component using ViewEncapsulation.Native in firefox and edge and ipad chrome, no issue on safari on mac, chrome on windows, chrome on android

Error: hostEl.createShadowRoot is not a function

This is the stackblitz to reproduce the issue https://stackblitz.com/edit/angular-webcomponent-polyfill

Based on other questions and answeres in stackoverflow and github, I already included webcomponentsjs to the project and included the javascript in polyfill.ts

npm install @webcomponents/webcomponentsjs

and add it as below

polyfill.ts

import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce';

and still I get the same error

Solution

  • Thanks to @manklu, he answered it here as below and it works perfect

    ViewEncapsulation.Native is Shadow DOM v0 which you must activate in Firefox (and which is deprecated as standard). Your polyfill implements Shadow DOM v1, so not the right one.

    If you use ViewEncapsulation.ShadowDom it will work in Firefox without polyfill.