How to get global selector inside emulated view encapsulation (CSS / Angular2)

Question

I have a Home component with this inside:

<alert type="info">Hello from ng2-bootstrap</alert>

Inside my home.style.scss, I have this:

:host .alert {
  background-color: green;
}

which should change the background color to green, but it does not.

The above css code will produce this style:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3] {
  background-color: green;
}

and the final HTML looks like this:

<home _nghost-wjn-3="">
  <div _ngcontent-wjn-3="" class="card-container">
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
      <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
        Hello from ng2-bootstrap  Sat Sep 17 2016
      </div>
    </alert>
  </div>
</home>

I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:

[_nghost-wjn-3]   .alert

instead of:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3]

Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?

Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).

I'm using the default view encapsulation (emulated) in the home component.

How can I do that please?

Answer 1

I figured it out myself. This is what I was looking for:

:host /deep/ .alert {
  background-color: green;
}

The above code will produce the following:

[_nghost-wjn-3] .alert {
  background-color: green;
}

This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.

Source: https://angular.io/docs/ts/latest/guide/component-styles.html