如何通过阴影 dom 为具有 css 的元素着色？

Question

我有一个名为 accordion-next 的组件。这个组件可以看作是一个模板。我有一个名为 accordion-toto 的组件。第二个组件使用 accordion-next。它是模板的一种填充物。

如果 accordion-next 是一个内插字符串，它将是：

`<a href>${content}</a>`

和accordion-toto将是：

content = "<div><div><span class="caret">▼</span></div></div>"

所以 accordion-toto 将打印

<a href><div><div><span class="caret">▼</span></div></div></a>

好的。现在，我想向 accordion-toto 添加一些 scss。这个scss是

a:hover .caret,
{
    color: red;
}

当然不行。我尝试使用 :host、:host-context、:host(:hover)、:host-context(:hover) 然后 /deep/ 以及所有这些的混合。我错过了什么案例？

您可以查看以下 Stackblitz 以获得完整示例：

Stackblitz complete demo

涉及：

编辑：我曾经有旋转问题。谢谢@Shadowlauch 指点。我的问题仍然存在 'basic' 属性。

Answer 1

您需要对 span 元素使用 "display: block" 才能旋转，因为 span 是一个内联元素

Answer 2

你得到了不正确的组合器。尝试使用下面的代码。您还需要将显示属性设置为 inline-block 以便旋转起作用（它不适用于内联元素，正如 Shadowlauch 的评论所指出的那样）

: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

如何通过阴影 dom 为具有 css 的元素着色？

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

css

sass

web-component

shadow-dom

angular