Применить класс CSS к дочерним элементам компонента

Question

У меня есть следующий HTML-код компонента ( Пример StackBlitz ):

<div class="measure">
  <ng-container *ngTemplateOutlet="labelTemplate; context: templateContext"></ng-container>
  <div class="chart">
    <div class="state" [style.width.%]="progress">&nbsp;</div>
  </div>
  <ng-container *ngTemplateOutlet="valueTemplate; context: templateContext"></ng-container>
</div>

И я использую его следующим образом:

<mk-progress class="test" [minimum]="0" [maximum]="100" [current]="40">
  <div *label class="label">Label</div>
  <div *value="let item" class="value">{{ item.progress }}%</div>
</mk-progress>

Мне нужно подать заявкуCSS применяет к mk-progress дочерним элементам, когда mk.progress имеет класс test:

:host(.test) div.measure {
  border: 1px solid orange;
}

:host(.test) div.label {
  border: 1px solid red;
}

:host(.test) div.value {
  border: 1px solid green;
}

Граница применяется для измерения, но не для метки и значения.Почему

Answer 1

Используйте для этого ::ng-deep пронзительный теневой комбинатор ( угловой документ здесь ):

:host(.test) ::ng-deep div.label {
  border: 1px solid red;
}

:host(.test) ::ng-deep div.value {
  border: 1px solid green;
}

Это устарело, но реальной замены ему нетсм. ТАК об этом .

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