Parent :host styles affects to :host styles of child

As you can see on picture the app-tracking-elements-table get styles from app-left-menu. I wrote styles in SCSS using :host for both components

I thought that :host is isolated and affects only to hosting element. Is there any way to separate them?

left-menu-component.scss

:host {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;

position: relative;

height: 100%;
width: var(--left-menu-width);
padding: 12px 0 24px 0;

background-color: var(--light-100);

box-shadow: $box-shadow;

/*Some more styles*/
}


tracking-elements-table.component.scss

:host {
position: absolute;
top: 0;
left: 100%;

width: 500px;
height: 100vh;
background-color: var(--light-100);

box-shadow: inset $box-shadow;

/*Some more styles*/
}

Additional info:

Package Version
@angular-devkit/architect 0.1802.9
@angular-devkit/build-angular 18.2.9
@angular-devkit/core 18.2.9
@angular-devkit/schematics 18.2.9
@angular/cli 18.2.9
@schematics/angular 18.2.9
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10

P.S. If you need more info please ask me and I will add it to question

Continue reading...