Custom Styling on <ng-content> in angular2 not working ?

Question

I am trying to style <ng-content> using inline css but seems style does't work on ng-content, i have to do something else for styling ?

<ng-content class="red"></ng-content> <p class="red">hello</p>

here class red works on p but not on

Working Example

Answer 1

In fact, it's because is replaced by the input content. The element doesn't exist in the in-memory DOM.

Regarding your sample, when using upper:

<upper>Some text</upper>

that has the following template:

<ng-content class="red"></ng-content> <p class="red">hello</p>

You will have this in the DOM:

<upper _nghost-dks-2="">
  Some text <p _ngcontent-dks-2="" class="red">hello</p>
</upper>

For this reason, you can't use class="red" on ng-content.

Answer 2

::content is ignored.

This comes closes

You can use the ::content selector

styles: ['.red {color:red} :host >>> upper {color:green}']

or

styles: ['.red {color:red} :host >>> * {color:green}']

And if there are fellow LESS users, seems that LESS compiler dislikes >>> syntax, so you need to add an alias for that, eg. @deep: ~">>>"; and then use that like @{deep} { /* your deep styles here */ }

See also this discussion https://github.com/angular/angular/issues/7400#issuecomment-246922468

You can use the ::content selector

styles: ['.red {color:red} ::content >>> upper {color:green}']

or

styles: ['.red {color:red} ::content >>> * {color:green}']

According to the web components spec ::content should be enough and >>> should not be required but the styles were not applied without it.

Plunker example