Unable to style encapsulated components

In the example below I use the list component and try to apply a background color on list items when the item is hovered. However _ngcontent attributes are added to my CSS selectors and some of the elements generated HTML seems to not receive this attribute making impossible to apply any style to it.

http://plnkr.co/edit/Sgr8DI9hWnOItPWR9Tva?p=preview

Original Style

I’ve tried different rules just in case…

  md-list-item:hover {
    background:red;
  }

  md-list-item:hover > div{
    background:green;
  }

  md-list-item > div:hover{
    background:blue;
  }

Injected Style

  md-list-item[_ngcontent-pgx-1]:hover {
    background:red;
  }

  md-list-item[_ngcontent-pgx-1]:hover > div[_ngcontent-pgx-1]{
    background:green;
  }

  md-list-item[_ngcontent-pgx-1] > div[_ngcontent-pgx-1]:hover{
    background:blue;
  }

Generated HTML

<md-list _ngcontent-pgx-1="" dense="" role="list">
    <md-list-item _ngcontent-pgx-1="" role="listitem" class="md-2-line">
        <div class="md-list-item">
            <div class="md-list-text">
                {{ ... }}
            </div>
        </div>
    </md-list-item>
</md-list>

I can’t find a way to match the generated div.md-list-item from the component style.

[jmcgoldrick]

You can get at them with either /deep/ or >>> (even though they are deprecated in CSS) angular supports them. see the page on styling on the angular.io site

[mackelito]

But you can still use ::ng-deep