Q:

How can I colorize an element with css through the shadow dom?

I have a component called accordion-next. This component can be see as a template. I have a component called accordion-toto. This second component is using accordion-next. it is a kind of a filler for the template.
if accordion-next was an interpolated string it would be:
`<a href>${content}</a>`

and accordion-toto would be:
content = "<div><div><span class="caret">▼</span></div></div>"

so accordion-toto will print
<a href><div><div><span class="caret">▼</span></div></div></a>

ok. Now, I want to add some scss to accordion-toto. This scss is
a:hover .caret,
{
    color: red;
}

Of course it doesnt work. I try to use :host, :host-context, :host(:hover), :host-context(:hover) then /deep/ and a mixed of all of this. What case did I missed?
You can see the following Stackblitz for a complete example:
Stackblitz complete demo
Relate to: How to edit a ng-template to use my HTML?
Edit: I use to have rotate issue. Thank you @Shadowlauch for pointing it. My problem is still here with a 'basic' attribute.

A:

You got the incorrect combinators. Try using the code below. You also need to set the display property to inline-block so that the rotation does work (it does not work on inline elements, as pointed by Shadowlauch's comment)
:host  ::ng-deep [aria-expanded="true"] .caret,
{
  display: inline-block;
  transform: rotate(0deg);
 }

:host ::ng-deep [aria-expanded="false"] .caret
{
  display: inline-block;
   transform: rotate(90deg);
}

Stackblitz demo

