⚠️ This lesson is retired and might contain outdated information.

Use Global CSS Inside Angular 2 Components

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 2 years ago

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.

Nicholas Murray
Nicholas Murray
~ 8 years ago

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.

Greg
Greg
~ 8 years ago

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?

Greg
Greg
~ 8 years ago

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?

Wolfgang
Wolfgang
~ 4 years ago

ViewEncapsulation.Native did not work on chrome today. I wasn´t able to include webcomponents into my small project.

Markdown supported.
Become a member to join the discussionEnroll Today