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
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
.
::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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With