使用View封装时Angular不会封装CSS

Question

I Have two menus in my app.

Both of them are using primeng Panel Menu

I have changed their css.

The problem is now after adding the second-menu to my app, left-menu 's style has changed.

I tried to use View encapsulation on both of them, the left-menu style still not encapsulated

Here's the first menu header

@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  styleUrls: ['./left-menu.component.css'],
  encapsulation: ViewEncapsulation.Emulated

})

Second menu

@Component({
  selector: 'app-second-menu',
  templateUrl: './second-menu.component.html',
  styleUrls: ['./second-menu.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})

In my CSS I use ng-deep and :host

here's an example

:host ::ng-deep .ui-panelmenu-header.ui-state-default:hover {
  background-color: #555555;

} 

Here's a stackblitz example

I won't add all the CSS because it's the same on both styles

Answer 1

Using only ::ng-deep will affect all the classes in the project even if not children of the component where the css is declared. ( here is a simple stackblitz reproduting this behavior )

If you want to affect only child elements of the component but not the elements on the same level, you should use :host with the ::ng-deep .

Here is a fork of your stackblitz with a fix suggestion.