Angular 2 ViewEncapsulation.Native vs ViewEncapsulation.Chrome ipad & Chrome 浏览器中的模拟问题

Question

我正在使用一个Angular 2组件，该组件和关注属性并在Chrome Desktop浏览器中正常工作。

@Component({
  selector: 'some-header',
  templateUrl: './someheader.component.html',
  styleUrls: ['./someheader.component.scss'],
  encapsulation: ViewEncapsulation.Native 
})

但是在我的iPad Chrome浏览器中，它给我带来了页面上的错误

hostEI.createShadowRoot is undefined

但是，当我将其更改为

时

ViewEncapsulation.Emulated 

它开始在我的iPad上工作，但我的UI在桌面中断开。

我检查了以下stackoverflow链接

链接

但是我的问题是我可以根据组件装饰器中的某些条件动态添加此encapsulation属性。

谢谢

Answer 1

并非所有浏览器都支持ShadowDom(例如IE，Safari等(，在这种情况下，createShadowRoot失败了。

您可以通过从下面的链接

添加WebComponent来轻松解决此问题

https://www.webcomponents.org/polyfills/