Using global styles.scss to control :host of every Angular component

I've noticed that every view in my application has a style file starting like this.

:host {
display: flex;
background-color: blue;
}
div.foo {
background-color: red;
}


It seemed as a wise decision to reduce redundancy and move the general definition to styles.scss. Doing so, I noticed that, while the DIV styling continued to work as expected, the effect on the pseudo-selector vanished.

Googling gave me that I can't reach the host element from inside the component but it doesn't say anything about altering it from outside of it (which my global styles.scss certainly is). I also found a blog on Angular view encapsulation where details are discussed in depth, however, without mention of the global styles.scss.

Summarizing, I've found a lot of info on handling :host and a lot of info on applying global styles.scss. However, I've seen rather limited intersection between them. Such an absence of an explicit confirmation implies often that it's infeasible or at least higly discouraged.

Have I misunderstood the point made in the docs? If so, how can I control the :host speudo-class from my global styles.scss? Or is it a special case of no-no and can't be done?

Continue reading...