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