CODEWITHSUNDEEP
angulargoogle-chromeipadangular2-template
Rishi
Rishi

Reputation: 3539

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

I am using an Angular 2 component which and following property and this is working fine in Chrome desktop browser. 

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

But in my iPad Chrome browser it is giving me following error on page load

hostEI.createShadowRoot is undefined

But when I change it to 

ViewEncapsulation.Emulated

it starts to work on my iPad but my UI breaks in desktop.

I checked following stackoverflow link

link

But my question is can I dynamically add this encapsulation property according to some condition in component decorator.

Thanks

Upvotes: 1

Views: 356

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

Not all browser does support ShadowDom (like IE, Safari, etc), in that case createShadowRoot gets failed.

You could fix this problem easily by adding polyfills for webcomponent from below link

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

Upvotes: 2

Related Questions