代码之家 › 专栏 › 技术社区 › aloisdg

如何通过阴影dom使用css给元素着色?

shadow-dom web-component sass angular css

1

aloisdg · 技术社区 · 8 年前

我有一个组件叫做 接下来是手风琴 . 可以将此组件视为模板。我有一个组件叫做 手风琴 . 第二个组件正在使用 接下来是手风琴 . 它是模板的一种填充物。

如果 接下来是手风琴 是一个插值字符串,应该是:

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

和 手风琴 将是:

content = "<div><div><span class="caret">â¼</span></div></div>"

所以 手风琴 将打印

<a href><div><div><span class="caret">â¼</span></div></div></a>

好啊。现在,我想添加一些scs到 手风琴 . 这个SCSS是

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

当然不行。我试着用 :host , :host-context , :host(:hover) , :host-context(:hover) 然后 /deep/ 把这些都混在一起。我错过了什么案子?

完整示例如下:

Stackblitz complete demo

涉及: How to edit a ng-template to use my HTML?

编辑:我曾经有过轮换问题。谢谢@shadowlauch指点。我的问题还在这里,有一个“基本”属性。

2 回复 | 直到 8 年前

1

2

David 8 年前

你得到了不正确的组合词。尝试使用下面的代码。您还需要将display属性设置为inline block,这样旋转才起作用(正如shadowlauch的注释所指出的那样,它对inline元素不起作用)

: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

2

1

charan kumar 8 年前

要旋转,需要对SPAN元素使用“display:block”,因为SPAN是内联元素