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

Question

我在 firefox 和 edge 和 ipad chrome 中使用 ViewEncapsulation.Native 加载 angular 组件时遇到问题，safari on mac 没有问题， chrome on windows、chrome on android

Error: hostEl.createShadowRoot is not a function

这是重现问题的 stackblitz https://stackblitz.com/edit/angular-webcomponent-polyfill

根据 Whosebug 和 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.

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

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

javascript

shadow-dom

angular