Search code examples
javascriptangularjsangularweb-componentshadow-dom

AngularJS 2 and webcomponents, emulating and polyfills

The AngularJS 2 has the capacity to use Shadow DOM native that is part of web components when setting encapsulation: ViewEncapsulation.Native as I understand...

But this give some questions:

  • When encapsulation: ViewEncapsulation.Native will it fallback to ViewEncapsulation.Emulated when the browser doesn't support Shadow DOM?
  • Is it able to use the webcomponents polyfill when the browser doesn't support Shadow DOM and is set encapsulation: ViewEncapsulation.Native?
Solution

  • There is no fallback from ViewEncapsulation.Native to ViewEncapsulation.Emulated when the browser doesn't support native shadow DOM. This will result in runtime errors.

    If you want to use Native you can load the webcomponents polyfills and enable shadow DOM like shown in Global Polymer settings.