How to remove router-outlet tag in rendered html?

Question

For some reason Angular 2 inserts these placeholder tags (for the lack of a better word) like router-outlet

In other words, for a basic app.component.ts like this:

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

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

this html output gets rendered in browser:

<router-outlet>
  Component rendered html content...
</router-outlet>

OR

<app-root>
  Component rendered html content...
</app-root>

instead of just having the component content inserted directly in html, like this:

<p>Component rendered html content...</p>

---

Edit

---

The existence of the router-outlet tag is preventing my css rules from being applied to (or even match) the component inner html tags

Is there a way I can change this behavior and get rid of the <app-route> (& other similar) tags?

---

NB. I'm new to Angular 2

Answer 1

Into your styles.css file:

 :host /deep/ router-outlet{
//here you put your <p> css code for router-outlet
        display: block;
        border: 10px solid black;
    }
     :host /deep/ app-root{
//here you put your <p> css code for app-root
        display: block;
        border: 10px solid black;
    }

in case some rule you add you dont see it gets applied, add !important to the rule:

border: 10px solid black !important;

As an extra:

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

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