Component's tag after <router-outlet>

Question

partial1.html

<div class="content">test test</div>

main.html

<div class="main">
   <router-outlet></router-outlet>
</div>

Let say from main.html , route to call partial1.html . And when runtime, the html will be like this:

<div class="main">
   <router-outlet></router-outlet>
   <partial1>
     <div class="content">test test</div>
   </partial>
</div>

Is there any way I can remove the extra tag? maybe merge tag, if possible. without break the Angular router.

Also, I don't want to break the CSS. This is important.

.main > .content {}

Answer 1

I got my own solution.

partial1.html

<div class="content">test test</div>

main.html

<router-outlet></router-outlet>

@Component({
selector: ".main", //instead of 'partial1'
templateUrl: "./partial1.html",
encapsulation: ViewEncapsulation.None,
})

I got the results needed.

<router-outlet></router-outlet>
<div class="main">
   <div class="content">test test</div>
</div>