Combining :host-context and :host-context doesn't work

[bgotink]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Combining multiple :host-context in a template doesn't work:

:host-context(.some-theme):host-context(.large-viewport) {
  /* theme "some" is enabled and we're in a large viewport */
}

The resulting CSS is

.some-theme-shadowcsscontext(.large-viewport)[_nghost-c6],
.some-theme   -shadowcsscontext(.large-viewport)[_nghost-c6] {
  /* theme "some" is enabled and we're in a large viewport */
}

(newlines added for readability, spacing within the selector was copy pasted verbatim)

Expected behavior

The selector matches the host if any ancestor matches .some-theme and any ancestor matches .large-viewport.

The resulting selector could be something along the lines of

.some-theme .large-viewport [_nghost-c6],
.some-theme .large-viewport[_nghost-c6],
.some-theme.large-viewport [_nghost-c6],
.some-theme.large-viewport[_nghost-c6],
.large-viewport .some-theme [_nghost-c6]
.large-viewport .some-theme[_nghost-c6] {
  /* theme "some" is enabled and we're in a large viewport */
}

Minimal reproduction of the problem with instructions

Here is a plunker that shows the same elements in native web components (v0 and v1) and Angular 4. Modifying the angular version of the plunker shows that this doesn't work as expected in 4.3, 4.4.0-RC.0 or 5.0.0-beta.7.

The native web components v1 part only seems to be styled correctly in Chrome. I'm unable to debug the Shadow DOM in Safari.

What is the motivation / use case for changing the behavior?

The behaviour of the :host-context in emulated view encapsulation doesn't match the native :host-context in Shadow DOM v0 and v1.

Environment

Angular version: 4.3.6, 4.4.0-RC.0, 5.0.0-beta.7

Browser: all

[vicb]

Would :host-context(.some-theme .large-viewport) work ?

[bgotink]

That appears to work in my example, although I wouldn't expect it to.

The resulting CSS is:

.some-theme[_nghost-c6] .large-viewport[_ngcontent-c6],
.some-theme .large-viewport [_nghost-c6] {
    /* theme "some" is enabled and we're in a large viewport */
}

The second part of the selector makes this work in my case. It only works because both .some-theme and .large-viewport are classes on ancestors. If .large-viewport is on the host itself, it won't work anymore. It also doesn't work if .large-viewport and .some-theme are on the same ancestor or if .large-viewport is an ancestor of .some-theme.
The first part of the selector appears to be identical to :host(.some-theme) .large-viewport, which is definitely not something I'd expect the :host-context selector to match.

Also note that :host-context(.some-theme .large-viewport) doesn't work in native ShadowDOM v0 or v1. That is as expected, because the spec defines :host-context(<compound-selector>). It doesn't allow combinators , >, + or ~.

[bgotink]

Note that there's kind of a workaround: selector parts before :host-context are not changed by the ShadowCss polyfill, so this

.some-theme.large-viewport :host-context {
  // host when theme "some" is enabled and we're in a large viewport
}

becomes

.some-theme.large-viewport [_nghost-c6] {
  // host when theme "some" is enabled and we're in a large viewport
}

Ergo, if we know the relative location of the ancestors matching .some-theme and .large-viewport, we can use this as a workaround for :host-context(.some-theme):host-context(.large-viewport).

If we don't know the relative location of the ancestors matching these two selectors, we need a more complicated selector to match all possible cases:

.some-theme .large-viewport :host-context,
.some-theme :host-context.large-viewport, // <-- can't use :host, only :host-context;
                                          // and note there's a difference between
                                          // :host-context.foo and :host-context(.foo)
:host-context(.some-theme.large-viewport),
.large-viewport .some-theme :host-context,
.large-viewport :host-context.some-theme {
  // host when theme "some" is enabled and we're in a large viewport
}

which yields the selector we need to fully get :host-context(.large-viewport):host-context(.some-theme) behaviour as specified by ShadowDOM.

[n00dl3]

There is the same kind of problem when combining :host-context() and :host() :

css :

:host-context(.parent):host(.host) .child {
  display: block;
}

output :

.parent[_nghost-c6] -no-combinator.host[_nghost-c6]   .child[_ngcontent-c6], .parent   [_nghost-c6] -no-combinator.host[_nghost-c6]   .child[_ngcontent-c6] {
  display: block;
}

I solved this issue using @bgotink 's hack

[uluzox]

I encountered the issue with combining CSS selectors inside :host-context() only when using AOT build with CLI > 1.6.3

@bgotink comment solved my issue also in AOT build with CLI 1.7.3 - Thanks!!!

so instead of
:host-context(.closed li:hover) {}
I now use:
.closed li:hover :host-context {}

[leemove]

same problem.i only usehost-context without :host, it does't work either.

[billbarni]

Same problem here. Strugling for hours without any result with :host and/or :host-context.

[petebacondarwin]

I created a new PR that I believe fixes this correctly. See #40494

[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.}