Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow Scoped Styles to Work With Child Components #191

Merged
merged 4 commits into from Aug 8, 2019

Conversation

@bouncehead13
Copy link

bouncehead13 commented May 20, 2019

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

This comment has been minimized.

Copy link
Contributor

agalbulev commented May 21, 2019

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

This comment has been minimized.

Copy link

spike1292 commented May 21, 2019

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

Matt Hancock
@bouncehead13

This comment has been minimized.

Copy link
Author

bouncehead13 commented May 21, 2019

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

@sc-dawidrutkowski sc-dawidrutkowski merged commit 5cd1ae9 into Sitecore:dev Aug 8, 2019
1 check passed
1 check passed
Sitecore.jss Build #20190808.1 succeeded
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.