javascript - 如何解决在 Firefox 中使用 ViewEncapsulation.Native 加载 Angular 组件的问题

Question

我在 firefox 和 edge 以及 ipad chrome 中使用 ViewEncapsulation.Native 加载 Angular 组件时遇到问题，在 mac 上的 safari、windows 上的 chrome、android 上的 chrome

上没有问题

Error: hostEl.createShadowRoot is not a function

这是重现该问题的 stackblitz 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，他回答了here如下所示，效果完美

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.