CODEWITHSUNDEEP
cssangularangular2viewencapsulation
Hamza Haddad
Hamza Haddad

Reputation: 1556

Angular does not encapsulate css when using View encapsulation

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

Upvotes: 0

Views: 1079

Answers (1)

ibenjelloun
ibenjelloun

Reputation: 7743

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.

Upvotes: 0

Related Questions