Angular не инкапсулирует css при использовании View encapsulation

Question

У меня есть два меню в моем приложении.

Оба они используют главное меню панели

Я изменил их CSS.

Проблема теперь после добавления second-menu в мое приложение, left-menu Стиль изменился.

Я пытался использовать View encapsulation на обоих из них left-menu стиль до сих пор не заключен в капсулу

Вот первый заголовок меню

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

})

Второе меню

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

В моем CSS я использую ng-deep а также :host

вот пример

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

} 

Вот пример стекаблица

Я не буду добавлять весь CSS, потому что он одинаков для обоих стилей

Answer 1

Используя только ::ng-deep повлияет на все классы в проекте, даже если это не дочерние элементы компонента, в котором объявлен CSS. ( вот простой стек-блиц, воспроизводящий это поведение)

Если вы хотите повлиять только на дочерние элементы компонента, но не на элементы одного уровня, вы должны использовать :host с ::ng-deep,

Вот вилка вашего стекаблица с предложением исправить.