如何在Firefox中使用ViewEncapsulation.Native解决加载角度分量的问题

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，他here回答如下，它非常完美

  

ViewEncapsulation.Native是Shadow DOM v0，您必须在Firefox中将其激活（标准不建议使用）。您的polyfill实现了Shadow DOM v1，而不是正确的。

     

如果您使用ViewEncapsulation.ShadowDom，它将在不使用polyfill的Firefox中运行。