Allow Scoped Styles to Work With Child Components

[bouncehead13]

Due to this Angular Bug (angular/angular#12215) which does not seem to be getting any traction, I am proposing a solution/new feature to allow for scoped styles to work with JSS.

Description

The change reads from the ElementRef of the parent component and finds the attribute that matches _ngcontent. That gets saved internally and applied to each child component that gets dynamically created.

Motivation

During the proof of concept application I am working on, I noticed the child components (aka dynamically generated components) do not have the parent styling applied. This prevents me from styling the child component from the parent component. I require this functionality to be able to migrate our application to the JSS framework.

How Has This Been Tested?

1. I've added a test in the spec.ts file to cover the changes
2. I've personally tested it with the JSS proof of concept application I am building

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have read the Contributing guide.
• My code follows the code style of this project.
• My change requires a change to the documentation.

[agalbulev]

Hi @bouncehead13. We also had that problem in our applications. You can try to use :host-context(‘selector of parent component’) with this you can scoped the styles over parent component selector. :host-context need to be part of child styles.

[spike1292]

Hi @bouncehead13. We also had that problem in our applications. You can try to use :host-context(‘selector of parent component’) with this you can scoped the styles over parent component selector. :host-context need to be part of child styles.

A few of our components also use this trick! But this problem was not related to <sc-placeholder>

Based on the docs of material I think we should set encapsulation: ViewEncapsulation.None

[bouncehead13]

@agalbulev @spike1292 Through this process of determining the level of effort to migrate over to JSS, I'm mainly looking for areas that fall short. Yes, host-context would work, but that means a larger refactor is required.

In addition to the testing I've done, would appreciate others sharing their findings to ensure this solution works for all.