Как решить проблему загрузки углового компонента с помощью ViewEncapsulation.Native в Firefox

Question

У меня проблема с загрузкой углового компонента с использованием ViewEncapsulation.Native в firefox и edge и ipad chrome, нет проблем при safari on mac, chrome on windows, chrome on android

Ошибка: hostEl.createShadowRoot не является функцией

Это стекаблик для воспроизведения проблемы https://stackblitz.com/edit/angular-webcomponent-polyfill

Основываясь на других вопросах и ответах в stackoverflow и github, я уже включил webcomponentsjs в проект и включил JavaScript в polyfill.ts

npm install @webcomponents/webcomponentsjs

и добавьте его, как показано ниже

polyfill.ts

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

и все равно я получаю ту же ошибку

Answer 1

Спасибо @manklu, он ответил на него здесь как показано ниже, и он отлично работает

ViewEncapsulation.Native - это Shadow DOM v0, который вы должны активировать в Firefox (и который не рекомендуется в стандартной комплектации). В вашем полифиле реализован Shadow DOM v1, поэтому не тот.

Если вы используете ViewEncapsulation.ShadowDom, он будет работать в Firefox без полифилла.