The State of CSS in Angular
Stephen Fluin
1.2K14

Ben Nadel it is an approach that I have described. It’s not the same as in NG Material 1.x, it was really a nightmare even without shadow DOM, like replacing with javascript placeholders of the variables in something looking like css with handlebars and injecting the parsed css as style element in the HEAD. Probably you already checked the source code for Material2 but let me share some findings. 
https://github.com/angular/material2/blob/0754320097c0c798a8f90361a443a615a49f5c56/src/lib/form-field/_form-field-theme.scss

and here is some approach when you want to style from outside by basically exposing input property ‘color’. It’s quite limited I think.

But I can imagine someone making and input attribute to work like style attribute and place a bunch of css in there and basically adding those styles via javascript. I wonder if :host is with bigger priority then inline css, if done from inside.

Anyways scoping of css breaks the mindset of the professionals who already learned how to elevate the cascading in style sheets, while trying supposedly to help others that don’t really understand how it works. Trying to figure out a way to pierce your styles to the nested components is like trying to reach your right ear with your left hand. I’m not sure this is the right way. I think shadow DOM should accept attributes like class and style and know how to get them and propagate them to the internal components — like change the spec :) or hope for the best and use css variables.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.