将CSS类应用于组件'；s子元素

我有以下组件的HTML（）：

---

边框应用于测量，但不应用于标签和值。为什么要使用

：：ng deep

阴影穿透后代组合器（）呢

这是一个不推荐使用的，但是没有真正的替代品，请参见此

长话短说：在创建替换之前，请继续使用：：ng deep及其替代品-弃用只是一个早期通知，这样人们就不会在实际更改实现时盲目地使用它

---

对该（）使用

：：ng deep

阴影穿透后代组合符：

这是一个不推荐使用的，但是没有真正的替代品，请参见此

长话短说：在创建替换之前，请继续使用：：ng deep及其替代品-弃用只是一个早期通知，这样人们就不会在实际更改实现时盲目地使用它

<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>

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

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

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

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

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