:host styling doesn't work on root component

[siggisim]

Angular applies an _nghost attribute to components and uses this for css shimming of the :host selector. See example:

<foo-component class="ng-binding" _ngcontent-khi-0="" _nghost-khi-1="">
</foo-component>

This does not seem to happen on the top level component in the angular application. See our root component with the selector 'root' does not contain the _nghost attribute:

<root></root>

I would expect components to behave the same regardless of whether they are the root component or a nested component.

[0x-r4bbit]

Came across the same thing as stated here: http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html#shadow-dom-in-angular-2

However, I thought this would be okay, because Angular only cares about the stylings inside the root component (which is actually not true)..

[tbosch]

The reason for this is as follows:
Angular applies these classes during compilation, which might happen during a build step. However, Angular does not know the element on which it will bootstrap, so it can't apply the styles.

We are storing these styles in DomProtoView.hostAttributes, so DomRenderer.createRootHostView should read these out and apply them to the root element.

[mhevery]

@tbosch Sounds like this is working as intended. Can this be closed?

[tbosch]

This will be solved via #3605 as well.

[chrisgreeff]

+1

[kentongray]

running into this on angular 2 final.. definitely not intuitive