angular: Trying to use :host-context and :host together in the same rule doesn't work.

Change the order:

:host(.component) :host-context(.parent)  .child3 {border: solid 1px black}

https://plnkr.co/edit/mH467v5YODo2bIvAHtKk?p=preview

The issue is that

:host(.component):host-context(.parent)  .child3 {border: solid 1px black}

translates to

.parent   [_nghost-c0]   .child3[_ngcontent-c0] {border: solid 1px black}

instead of

.parent   [_nghost-c0].component   .child3[_ngcontent-c0] {border: solid 1px black}

The same problem here. We would like to “scale” ui with body css class and host elements like: :host-context(.small) :host{ height: 50px; }

:host-context(.medium) :host{ height: 70px; }

:host-context(.big) :host{ height: 90px; }

do not work-

I came here looking for help, I really needed it for my project, I was almost hopeless reading the comments, but I found a solution! What I found out is that I had the wrong concept about host-context, I will explain here so that nobody falls into the trap of the name (yes the name is quite confusing)!

According developer.mozilla.org, despite being called host-context it sees the context but the final selector is the host itself, so there is no point in declaring it as a relative of the :host like :host-context(.context) :host(.class-inside-host) (or reverse), as it selects the host itself under those context conditions and you will say to select host inside same host, or declare it two times in same element selection like :host(.class-inside-host):host-context(.context).

So, since it selects the element host itself, I can use it like this:

:host-context(.context).host-class{ /* select the host with the .context parent and the .host-class in the host itself*/
	/* styles here */
}

:host-context(.context).host-class .child-inside-host{ /* select the host with the .context parent and the .host-class in the host itself AND then the child with .child-inside-host */
	/* styles here */
}

I hope this helps 😃

Adding a request for this feature as well. We are using :host-context([dir]) to support RTL language support and automatic direction flipping of all styles, and in some cases need to use it with :host which is completely broken in all current releases of Angular.

I can provide more background if needed or if others are interested, but it is not necessary for the testing and completion of this issue report.

I’m not sure the severity of inconvenient is accurate. It full out breaks anything that uses both together and there is no reasonable workaround that works in all cases.

@DzmitryShylovich

Change the order: :host(.component) :host-context(.parent) .child3 {border: solid 1px black}

Why would we need to change the order?

Based on my understanding, if I want to apply a style to the element which has a class named someClass under the same circumstance,

:host-context(.parentClass) :host(.hostClass) .someClass {}

This seems to make sense but apparently, it doesn’t work and I had to change the order as you said. What am I missing?

Thanks! This should really be documented, or fixed to support the other way around, as that seems more intuitive for CSS rules.

@KevynTD wow that works perfectly!

Also stumbled over this. I observed that it especially does not work, when the preceding :host selector has a class.

:host :host-context(.blue-theme) works, it applies the rules to the selected :host

:host(.big) :host-context(.blue-theme) works always, even if the :host element does not even have the .big class.

https://stackblitz.com/edit/angular-adt195