时间戳

首页 > 解决方案 > 如何通过 shadow dom 使用 css 为元素着色？

css - 如何通过 shadow dom 使用 css 为元素着色？

问题描述

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

如果手风琴-next是一个插值字符串，它将是：

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

和手风琴多托将是：

content = "<div><div><span class="caret">▼&lt;/span></div></div>"

所以手风琴多托将打印

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

行。现在，我想在手风琴-toto 中添加一些 scss 。这个scss是

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

当然它不起作用。我尝试使用:host, :host-context, :host(:hover), :host-context(:hover)then/deep/和所有这些的混合。我错过了什么案例？

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

Stackblitz 完整演示

涉及：如何编辑 ng-template 以使用我的 HTML？

编辑：我曾经有轮换问题。谢谢@Shadowlauch 指出它。我的问题仍然存在于“基本”属性中。

标签： cssangularsassweb-componentshadow-dom

解决方案

你得到了不正确的组合器。尝试使用下面的代码。您还需要将 display 属性设置为 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 演示

推荐阅读