Parent class is not inherited by the descendant element in the child component-using scss

Question

I have a parent component whose class is set through a directive (I gives me a theme based on the user input).

In the child component's SCSS style even the simplest rules that refer to the parent class do not work. I read about the shadow-piercing and set the ViewEncapsulation to None in the parent component but couldn't get it to work as I'm sure there is something missing that I don't know about.

app.component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}

app.component.html

<div appTheme> <---- This one generates: class="theme-snow-cherry" (for example)
  <router-outlet></router-outlet>
</div>

ribbon.component.scss (child component)

.theme-snow-cherry div {
  background-color: red;
}

Note: If I add the aforementioned style in my app.component.css it will give me the result, but obviously it is not where I want to put the style.

Answer 1

Since you define the style in the child component, you should set the encapsulation to ViewEncapsulation.None in that component:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class RibbonComponent {
  ...
}

Otherwise, the generated class style has an attribute specific to the child component, which prevents the selector .theme-snow-cherry from matching the div element in the parent component:

.theme-snow-cherry[_ngcontent-c2] div[_ngcontent-c2] {
  background-color: red;
}