Apply CSS to routed components

I'm attempting to use CSS GRID for the holy grail layout in my application. Using angular router the main content of my page is loaded dynamically and injected as the component following <router-outlet>.

You can find an example of my application here.

In order to have a proper grid definition I'm using grid-area: <name> to specify the components and their location. With a routed component this is not possible as I do not have a fixed reference to the dynamic component. Applying CSS in the :host of each of the loaded components is a workaround but is not an acceptable solution.

There are several issues that prevent me from applying CSS in the host of the routed component (app.component.scss) to the dynamic component:

1. The routed component doesn't have a fixed reference (app-home vs app-about)
2. The injected context is not the same for the host components and the injected components.

  <app-root _nghost-c0 ng-version="5.0.2">
    <app-header _ngcontent-c0 _nghost-c1>...</app-header>
    <app-navbar _ngcontent-c0 _nghost-c2>...</app-navbar>
    <router-outlet _ngcontent-c0></router-outlet>
    <app-home _nghost-c6>...</app-home>
    <app-footer _ngcontent-c0 _nghost-c3>...</app-footer>
  </app-root>

Notice how the host's reference _ngcontent-c0 is not applied to the routed component app-home.

3. The wildcard selector is being overruled by angular's view encapsulation

  router-outlet + * {
    grid-area: content;
    background: greenyellow;
  }

becomes

  router-outlet[_ngcontent-c0]    + *[_ngcontent-c0] {
    grid-area: content;
    background: greenyellow;
  }

Both the lack of the host's context and the narrowing of the wildcard selector look like bugs to me. Can anyone help me find a way to do a proper implementation of the CSS grid with dynamic angular components? Please check out my sample code to understand the issue.

I've submitted two bug reports and a feature request on github related to this issue.