Get Started with Angular
Use Global CSS Inside Angular 2 Components
Global CSS and stylesheets are also available to Angular 2 Components even though the styles you define inline will remain isolated to the Component itself. You can customize this behavior using ViewEncapsulation if you need to keep global styles out of your Components.
I'm wondering about this as well. I would think polyfils would make it work the same regardless of browser support? Otherwise why use Native at all?
I cannot run any beta examples - here or anywhere else - in ie to test this out. I read that you need to load the ie shim, but when I add a script tag for it ie still fails with errors in the vendor.bundle.js. Any other tips on how to get angular beta running in IE?
I ran the example in firefox. It breaks in Native mode (no console error) unless you go to about:config to enable webcomponents. It is then working the same as in chrome, though i see an inline style tag inside each todo renderer for the strikethrough style, and no shadow-root. Perhaps the developer tool simply doesn't display shadow root properly? And sorry, that still leaves the question, what is the expected behavior?
ViewEncapsulation.Native did not work on chrome today. I wasn´t able to include webcomponents into my small project.
If you use try to use encapsulation: ViewEncapsulation.Native in Safari you will get a shadow dom error and would need to include a polyfill as a work around. On Chrome the example works as shown as you are using the native shadow DOM which is only available in Chrome.