Angular 2: Styling router-outlet to have width < 100%

The key is /deep/ keyword:

:host /deep/ router-outlet + *:not(nav) {
   width:80%;
   float:right;
}

Since the component is dynamically loaded right after tag, the selector '+' matches anything next to it.

And the :not() selector excludes element in your template.

Edited 2018/3/1:

Since Angular 4.3.0 made /deep/ deprecated, its suggested alternative is ::ng-deep. And there were a long discussion about this.

By using :host we can modify the style while loading the component.

:host(selector) { width:70% }

Following is the component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-selector',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent{
}

//test.component.css content
:host(test-selector) { width:70% } will reduce the width to 70%

Simple solution is to just put <router-outlet> in a styled div:

<div style="width:80%;float:right;">
    <router-outlet></router-outlet>
</div>