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

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 上运行，但我的 UI 在桌面上出现故障。

我检查了以下 Whosebug link

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

谢谢

Answer 1

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

您可以通过从下面为 webcomponent 添加 polyfills 轻松解决这个问题 link

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

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

Angular 2 ViewEncapsulation.Native vs ViewEncapsulation.Emulated issue in chrome ipad & chrome browser

google-chrome

ipad

angular2-template

angular