Solución:
Creo que el problema que tiene es porque está declarando el styleUrls en el componente principal y, debido a la encapsulación, no están disponibles en el componente secundario. Tienes que moverlo al componente de calificación.
En caso de que desee mantenerlo en el nivel que tiene actualmente, debe hacer que la encapsulación de la vista no sea ninguna en el componente de calificación.
selector: 'rating',
encapsulation: ViewEncapsulation.None
Creo que también está haciendo un mal uso de la propiedad css del contenido. Necesita usar el ::before o ::after pseudo elementos
.star.star-full-icon::after{
content:'X';
}
.star.star-empty-icon::after{
content:'O';
}
actualizar
::slotted ahora es compatible con todos los navegadores nuevos y se puede utilizar con `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
original
Necesita agregar el CSS (['./app.component.css']) para RatingComponent, de lo contrario, la encapsulación de estilo evitará que se aplique CSS.
Alternativamente, puede usar ::ng-deep
::ng-deep .star.star-full-icon{
content:'X';
}
::ng-deep .star.star-empty-icon{
content:'O';
}
o ViewEncapsulation.None sobre el RatingComponent
pero sugiero que se quede con la primera opción.
Véase también https://blog.ilsttram.io/angular/2015/06/29/shadow