Style ng-bootstrap accordion with css

Question

I have an Angular 2 component with an accordion, which I added using ng-bootstrap. Everything works fine functionally, however the styles that I try to load using the .card, .card-header, .card-block classes that the compiled accordion elements have, those styles do not get applied to the elements at all.

These classes are set by ng-bootstrap directly, when transforming the accordion into div's.

I apply my own css via a styles.scss file that I link to the components TypeScript file. When everything is rendered, my styles appear in the <style></style> tags in the header of the html output. It looks like this.

    <style>
        [_nghost-xfh-23]   .card[_ngcontent-xfh-23] {
          border: none; }

    [_nghost-xfh-23]   .card-header[_ngcontent-xfh-23] {
      margin-top: 0.75em !important;
      border: 1px solid rgba(0, 0, 0, 0.125); }

    [_nghost-xfh-23]   .card-block[_ngcontent-xfh-23] {
      text-align: left; }
    </style>

The styles.scss looks like this:

:host .card {
  border: none;
}

:host .card-header {
  margin-top: 0.75em !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

:host .card-block {
  text-align: left;

}

My guess is that Angular 2 is trying to apply the styles (during compilation), but creates the div's with the said classes afterwards, making it impossible to apply the styles to the elements.

Im restrained to edit the bootstrap.css directly or create an other global css file. I'm hoping there is a way to reapply the css styles after the component is loaded or some other means to style ng-bootstrap accordions.

Hope my problem makes sense, regards Sy

Answer 1

As @ChristopherMoore said in his comment, it was a problem due to Shadow DOM. Adding /deep/ fixed it. Here the updated functional code.

  /deep/ .card {
  border: none;
}

/deep/ .card-header {
  margin-top: 0.75em !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

/deep/ .card-block {
  text-align: left