🚀功能请求

相关包

这个功能请求是为@angular/core,我猜

描述

Angular在满足组件需求时添加组件样式，导致应用的样式不一致。考虑两个组件：

1. 具有主机绑定类._large的按钮，用于设置大小
2. 内部包含具有类.override_size的按钮的卡片组件，该嵌套按钮设置不同的大小
   如果在我们加载卡片时视图中已经有了Button组件，那么Button样式已经存在于HEAD中，因此具有相同特异性的.override_size类会覆盖._large类，因为它来得晚。
   另一方面，如果Button首先出现在Card内部，它的样式稍后才会添加到HEAD中，因此._large类会接管。
   请查看此Stackblitz演示：
   https://stackblitz.com/edit/angular-styles-specificity-bug

注意:请不要考虑我给出的具体示例，这些只是我能想到的最简单的情况。*

描述你希望的解决方案

增加_ngcontent样式的特异性，因为它们通常更重要。当你在一个组件中构建一些样式，并在稍后将其用于其他组件中时——你可以向其添加类以指定在这种情况下需要的确切样式。最简单的方法是将[_ngcontent-X]属性选择器添加到样式两次(即.override_size[_ngcontent-c2][_ngcontent-c2] {)。

描述你考虑过的替代方案

目前我们必须通过以下方式手动增加特异性：要么在类前添加标签名(即button-component.override_size),要么使用其他任何方法，如添加两个类而不是一个：

.override_size {
 && {
    our styles
}

这样编译为.override_size.override_size,虽然不是理想的解决方案，但这是我能想到的最干净的解决方案。问题是，我们必须在每次向组件添加类时都牢记这一点，而不仅仅是HTML标签。