chrome ipad和chrome浏览器中的Angular 2 ViewEncapsulation.Native vs ViewEncapsulation.Emulated问题答案

【问题标题】：Angular 2 ViewEncapsulation.Native vs ViewEncapsulation.Emulated issue in chrome ipad & chrome browserchrome ipad和chrome浏览器中的Angular 2 ViewEncapsulation.Native vs ViewEncapsulation.Emulated问题
【发布时间】：2017-05-30 13:43:25
【问题描述】：

我正在使用 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 上运行，但我的 UI 在桌面上中断。

我检查了以下 stackoverflow 链接

link

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

谢谢

【问题讨论】：

Web-components polyfills 应该可以解决问题
谢谢这是我一直在寻找的 :)

标签： angular google-chrome ipad angular2-template

【解决方案1】：

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

您可以通过从下面的链接为 web 组件添加 polyfill 轻松解决此问题

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

【讨论】：