Combination of multiple :host-context and :host selectors don’t work

🐞 bug report

Affected Package


Is this a regression?



Version 12.0.0-next.4 of Angular brings improved support for host-context selectors. (See PR)

We are currently implementing a UI library and this fix will be very helpful for our project. However, we think that there’s still an enhancement for this feature.

I installed 12.0.0-next.4 and tested the following scenario.

    selector: 'foo-component,bar-component',
    template: `<h1>Some text</h1>`,
    styles: [`
        :host-context(.mobi-b2c-theme-light) :host(bar-component) {
            color: blue;
        :host-context(.mobi-b2c-theme-light) :host(foo-component) {
            color: red;
export class SomeComponent {

I tried this with inline styles and with a separate stylesheet referenced by styleUrls. Both didn’t work. However, @petebacondarwin found a workaround.

styles: [
  `:host-context(.mobi-b2c-theme-light) :host(bar-component) {
    color: blue;
  `:host-context(.mobi-b2c-theme-light) :host(foo-component) {
    color: red;

foo-component should be red and bar-component should be blue. Currently, only the first selector gets applied. Means bar is blue and foo is not affected by any styles. The generated CSS looks like this:

.mobi-b2c-theme-light   bar-component[_nghost-%%COMP%%] {
    color: blue;
.mobi-b2c-theme-light[_nghost-%%COMP%%]   foo-component[_nghost-%%COMP%%], .mobi-b2c-theme-light   [_nghost-%%COMP%%]   foo-component[_nghost-%%COMP%%] {
    color: red;

🔬 Minimal Reproduction

I needed to create a Stackblitz because I was unable to pull the next version of Angular into Stackblitz 😉

🌍 Your Environment

Angular Version:

1 possible answer(s) on “Combination of multiple :host-context and :host selectors don’t work