AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

I don't think so.

If you don't use shadow DOM you can't have scoped CSS.

One alterantive is to keep shadow DOM and change the CSS you applied to your page to make it work with shadowDOM (add /deep/ combinator for example).

Note: applyAuthorStyles was deprecated for several months already.

Since a while Angular.dart supports to create components without shadow DOM by adding the argument useShadowDom: false to the @Component.

I wouldn't say there's a good way to style everything in an Angular.dart project with a global css file, but I've found a work around that works for me.

My index file is a thin wrapper for my main component. Then I created a folder like: lib/component/css/sass. In sass I have created scss partials of all my css files (just rename it from something like myCss.css to _myCss.scss) and created a master scss file lg-global.scss that imports all those partials:

@import "pure-side-menu";@import "pure-min";@import "grids-responsive-min";{... my css rules}

I've set up compass to compile my scss files to a single css file in the css folder, and now I can import that single file in my components like this:

@Component(    selector: 'main-menu',    templateUrl: 'main_menu.html',    cssUrl: 'css/lg-global.css')

If I actually do want to have a specialized css file for a component, that's easy too. Just make a new scss file, and import whatever scss partials you want to.

It's a lot of extra work, but scss is a lot nicer anyway. My only real concern is whether it's going to be poor performance to use a massive css file in every component.