pseudo classes selectors on :host element don't works correctly after angular updating 2.0.0 -> 2.1.1

[holiber]

bug from #12451 discussion

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I have component with 'active' class on :host

@Component({
  selector: 'my-component',
  template: '<div>My component</div>',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @HostBinding('class') componentClass = 'active';
}

my-component has styles:

:host:after {
  content: 'Component is not active';
  color: red;
}

:host.active:after {
  content: 'Component is active';
  color: green;
}

in angular 2.1.1 component shows wrong result:

Expected behavior
In angular 2.0.0 all is ok:

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/4xgwW5D8ZqhlHB06MXsQ?p=preview

Please tell us about your environment:

MacOSX 10.11, Node v6.9.1

• Angular version: 2.1.1

• Browser: [all ]

• Language: [TypeScript 1.8]

• Node (for AoT issues): node --version = v6.9.1

[borislemke]

Same problem in similar case:

:host {

    &.outline {

        &:before {
            ...some styling stuff
        }
    }
}

will compile to:

.outline:before[_nghost-hyp-13] {}

where it should:

[_nghost-hyp-13].outline:before

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}