CSS Encapsulation not passed down to child elements, breaks styling

[YeomansIII]

It's impossible to style elements that are created within the ng-semantic elements when CSS encapsulation is enabled. This makes it impossible to fine tune styling of specific generated elements.

For example, the generated divs within an <sm-progress></sm-progress> element. This element generates multiple divs such as the "bar" and progress text. None of this can be styled from the component that includes this ng-semantic element because the generated elements (such as "bar" and progress text) do not include the components CSS isolation attribute (such as "_ngcontent-pgr-32").

I'm not sure if this is even possible, but it only makes sense to allow CSS to fine tune the content that is generated by these ng-semantic elements.

[Fanmeter]

I have a same issue. My current solution is to put ":host >>> " before each selector in your CSS file, which would be applied to elements inside ng-semantic component. Then the styles could be passed down the child tree. check out here for Angular2's component style.

[Fanmeter]

@YeomansIII, another simple way to solve the problem. In your component using <sm-*> component, add one more metadata setting encapsulation: ViewEncapsulation.None in @Component decorator as the following:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'your-selector',
  templateUrl: './yours.component.html',
  styleUrls: ['./yours.component.css'],
  encapsulation: ViewEncapsulation.None
})export class YourComponent implements OnInit {
    ...
}

Then you can keep your css file as usual and the style should be applied to the target element.