Angular 2 how to style transcluded elements?

Question

<component>
  <p class="component-p"></p>
</component>

component stylesheet:

.component-p {
  color: red;
}

:host .component-p {
  color: red;
}

:host >>> .component-p {
  color: red;
}

>>> .component-p {
  color: red;
}

::content .component-p {
  color: red;
}

None of these seem to work, but I don't understand why.

If I put ::content .component-p in the parent component of this then it works, but that doesn't make any sense since I'm not transcluding it into the parent, but rather the child which is component.

How do you style transcluded content?

Answer 1

Use :host /deep/ .component-p when using angular-cli.

https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635