'Can I use multiple selectors in :host() argument?

This is working:

:host(.foo) .title,
:host(.bar) .title {
  ...
}

I was expecting this to work, but it didn't:

:host(.foo, .bar) .title {
  ...
}

Am I missing something? Or is this a browser bug? I'm using Firefox 100.0

css css-selectors

Solution 1:^[1]

The :host() selector accept a compound-selector and not simple-selector-list so you cannot use comma separated classes (https://drafts.csswg.org/css-scoping/#host-selector).

You can try :host(is(.foo, .bar)) .title instead. It may work.

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source
Solution 1