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

[kreuzerk]

🐞 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

[petebacondarwin]

Working on this now...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}