We are working with a basic main.html.
<app>
<sidebar></sidebar>
<main-content>
<router-outlet></router-outlet>
</main-content>
</app>
After loading a component through routing (changing the URL), the HTML structure changes to:
<app>
<sidebar></sidebar>
<main-content>
<router-outlet></router-outlet>
<component></component>
</main-content>
</app>
The main question arises as to why <component> is not nested inside <router-outlet>, but rather becomes a sibling.
Furthermore, the following CSS style is not being applied to the <component> tag:
app sidebar main-content > * {
background: red;
}
Upon inspection, we notice that while <router-outlet> has this style, the direct child of <main-content>, which is <component>, does not inherit this style.
What could be the issue here?