[Won't fix] Investigate styling components rendered using cxComponentWrapper

[LTiger14]

Following a discussion on the Spartacus Slack, it was noted that styling components dynamically rendered using cxComponentWrapper was causing issues.

Steps to Reproduce

in test-parent.component.html

<div class="container">
  <div class="test">
    <div class="column" *ngFor="let column of (categories.component | columnGroup: 3)">
      <ng-container *ngFor="let category of column"
        [cxComponentWrapper]="{
          uid: category.uid,
          flexType: category.typeCode
        }"
      ></ng-container>
    </div>
  </div>
</div>

In the code example above cxComponentWrapper renders an element of type test-child.

Within test-parent.component.scss, these elements should be styleable using:

test-child {
  width: 100%;
  margin-bottom: 27px;
}

Observed Results

The styling is not applied to the test-child component

Expected Results

The styling should be applied

Possible reason

This could be caused by the way Angular builds the components and applies the styles in their emulated view encapsulation.

For more info https://spartacus-storefront.slack.com/archives/CD16V16FR/p1555588176034300

[Xymmer]

Louis says: I would like to have some time to investigate before beta. Wouldn’t be very long to try it out maybe half day

[LTiger14]

After looking into this issue I was able to identify the cause of it and find a few ways around it. The issue is caused by the Angular default view encapsulation : ViewEncapsulation.Emulated. This has the merit of limiting the component style to a single component and not being applied to other components. This is achieved though adding _ngcontent-c# to the elements within a component and limiting the styles to only be applied to the elements with these labels. This is a known issue angular/angular#12215.

There are different workarounds for this issue:

If possible most style should be applied to the child component (the one rendered by the cxComponentWrapper)

In the case where the styling has to be on the parent e.g. alignment four are three ways around this issue:

1. Add a wrapper div with a class around the cxComponentWrapper element and apply the style on that parent class.
2. Change the encapsulation property in the parent to ViewEncapsulation.Native (might not be compatible with all browsers) or ViewEncapsulation.None this will cause the component to be affected by other styles than just the component specific style.
3. Move the style affecting the child out of the parent stylesheet into a more global stylesheet. For example moving the style to styles.scss renders the appropriate result.

test-parent {
  test-child {
    width: 100%;
    margin-bottom: 27px;
  }
}

4. Not recommended add /deep/ to bypass view encapsulation (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)

/deep/ test-child {
    width: 100%;
    margin-bottom: 27px;
  }

[LTiger14]

A fix for this can be seen in angular/angular#12215, view related PRs. TLDR: manually add the parent _ngContent-c# in the child component. View jss project PR 191.

[LTiger14]

After working a bit on the solution, I was able to make it work in the Angular default view encapsulation with some fancy tricks. The tricks are perhaps a bit too fancy so after discussion with Tobias we wont go with this solution.

An alternative way to the three that were stated in an earlier comment is to set the default view encapsulation to none throughout the app. This can be achieved by adding this to the main.ts of the application:

{defaultEncapsulation: ViewEncapsulation.None}

which makes the configuration look like this:

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule, {
    defaultEncapsulation: ViewEncapsulation.None,
  });
});