Component css styles are not applied?

It appears that any css that I add to my component.css is not applied inside the markdown directive.

<markdown [data]="mydata">
<!-- component css ain't working in here -->
</markdown>

You can verify this by e.g. adding h2 {color: red } in the styles part near the top of app.ts in your plunker, https://plnkr.co/edit/y5LPj7?p=preview

@Component({
  styles: [`
h2 { color: red; /* not working */
    }
  `],
})

[jfcere]

Hi @ben4d85, thanks for bringing that up!

Right now this problem is due to the ViewEncapsulation of the components that uses the default ViewEncapsulation.Emulated which means that the CSS that is inside the component opening/closing tags is scoped.

If you are not familiar with ViewEncapsulation you can read this post by Pascal Pretch that explains it very well: https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

Workarounds

There is 2 workarounds you can use right now (that I tested in Plunker) …

Shadow-piercing

You can use the ::ng-deep shadow-piercer in your CSS to force styling to be applied inside the scope of the markdown component.

@Component({
  selector: ...,
  template: ...,
  styles: [`
+   markdown ::ng-deep h2 {
      color: red;
    }
  `],
})

Plunker example: https://plnkr.co/edit/UdmGqrar9LmSJoUh?p=preview

Removing encapsulation on your component

Another way would be to remove the encapsulation of your component by using ViewEncapsulation.None which would make the CSS of this component global instead of scoped.

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: ...,
  template: ...,
  styles: [`
    h2 {
      color: red;
    }
  `],
+ encapsulation: ViewEncapsulation.None,
})

Plunker example: https://plnkr.co/edit/Z5tsu5?p=preview

Long term solution

I will take a look in the next few days to see the impact of setting ViewEncapsulation.None on markdown component so we don’t have to use any workaround to apply styling inside the component.

I’ll keep the issue open until I investigate.

[JoshuaMulliken]

::ng-deep was the only solution that worked for me.

markdown ::ng-deep img {
  width: 100%;
}

This was now properly applied within the markdown component.