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

🐞 bug report

Affected Package

12.0.0-next.4

Is this a regression?

No

Description

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.

@Component({
    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

https://github.com/kreuzerk/host-selector-example

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

🌍 Your Environment

Angular Version:
12.0.0-next.4

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