The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use Global CSS Inside Angular 2 Components

Use Global CSS Inside Angular 2 Components

1:46
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.
Watch this lesson now
Avatar
egghead.io

Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.

Avatar
Nicholas

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.

Avatar
Greg

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?

In reply to Nicholas
Avatar
Greg

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?

In reply to Greg
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?