Question

我正在使用Angular 2组件及其以下属性，这在Chrome桌面浏览器中运行良好。

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

但是在我的iPad Chrome浏览器中，它会在页面加载时出现以下错误

hostEI.createShadowRoot is undefined

但是当我把它改成

时

ViewEncapsulation.Emulated

它开始在我的iPad上工作，但我的用户界面在桌面上断开。

我检查了以下stackoverflow链接

link

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

由于

Answer 1

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

您可以通过从链接

添加web组件的polyfill轻松解决此问题

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

Angular 2 ViewEncapsulation.Native与ViewEncapsulation.mmulated问题在chrome ipad＆amp; chrome浏览器

1 个答案: