Angular - różne zachowanie css'ów w zależności od organizacji komponentów

Cześć,

mam zagwozdkę angularowo-css'ową. Mianowicie kiedy mam ułożony layout w app-component to wszystko zachowuje się jak należy czyli zawartość strony jest pionowo wyśrodkowana:

<div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
    <nav class="navbar sticky-top navbar-expand navbar-light bg-light mb-auto justify-content-end">
        <span class="navbar-text mr-2">
            <fa-icon [icon]="['fas', 'user']" [size]="'lg'"></fa-icon><span class="badge badge-danger ml-1">4</span>
        </span>
        <span class="navbar-text">Zalogowany użytkownik</span>
    </nav>
    <!-- <app-navbar></app-navbar> -->
    <main class="px-3">
        <router-outlet></router-outlet>
    </main>
    <!-- <app-footer></app-footer> -->
    <footer class="text-black-50 text-center mt-auto">
        <p>Angular app - wersja 0.0.0</p><strong>2021</strong>
    </footer>
</div>

Kiedy jednak odkomentuję widoczne wyżej komponenty, w którym mam identyczny kod i identyczne css'y to wszystko jest podciągnięte do góry jakby klasy mb-auto i mt-auto były ignorowane:

<div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
    <!-- <nav class="navbar sticky-top navbar-expand navbar-light bg-light mb-auto justify-content-end">
        <span class="navbar-text mr-2">
            <fa-icon [icon]="['fas', 'user']" [size]="'lg'"></fa-icon><span class="badge badge-danger ml-1">4</span>
        </span>
        <span class="navbar-text">Zalogowany użytkownik</span>
    </nav> -->
    <app-navbar></app-navbar>
    <main class="px-3">
        <router-outlet></router-outlet>
    </main>
    <app-footer></app-footer>
    <!-- <footer class="text-black-50 text-center mt-auto">
        <p>Angular app - wersja 0.0.0</p><strong>2021</strong>
    </footer> -->
</div>

Korzystam z ng-bootstrapa, a klasy ma w wersji 4.6.0:

Co powoduje takie zachowanie? Myślałem, że organizacja w komponentach nie powinna mieć wpływu na działanie klas css.

Pozdrawiam,
Dawid.

Komponenty angularowe są osadzone w WebComponents, więc to nie będzie działać tak jakby skleił ze sobą kawałki HTML.

Jeśli chcesz ustawić CSS to użyj pseudoselektora :host w stylach, a jeśli chcesz dodać do niego klasy to internet podpowiada właściwość host.class.

@Component({
  selector: 'segment',
  templateUrl: './segment.component.html',
  styleUrls: ['./segment.component.css'],
  host: {'class': 'klasa innaKlasa'}
})

Faktycznie, zadziałało. Dziękuję serdecznie :D
Klasa jest wtedy dodawana w htmlu znacznika komponentu:

I tak mnie tknęło żeby sprawdzić czy można nadać klasę bezpośrednio na znaczniku i robiąc tak:

<app-navbar class="mb-auto sticky-top"></app-navbar>

efekt jest ten sam. Byłem przekonany, że na znacznikach są dozwolone tylko inputy i eventy outputów.