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

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

shadow-dom web-component sass angular css

aloisdg · 技术社区 · 7 年前

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

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

`<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 回复 | 直到 7 年前

David 7 年前

你得到了不正确的组合词。尝试使用下面的代码。您还需要将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

charan kumar 7 年前

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

推荐文章

Vladimir JovanoviÄ · 嵌套web组件并将其与常规HTML混合

7 年前

mcv · Web组件在IE11和Edge中实际可用吗?

7 年前

Ole · 角度5组件是否需要选择器中的“-”?

7 年前

mcv · 如何解耦Web组件?

7 年前

VSO · 从另一个网站导入<template>元素

7 年前

Adrian Moisa · 在构建单页应用程序(大规模)时,我应该使用网页包还是仅使用html导入

7 年前

miushock · 如何从DOM错误事件中获取详细消息

7 年前

Olof · 嵌套web组件和事件传播

7 年前

rakitin · 自定义组件-如何克隆定义为js字符串文字的html模板?

7 年前

Amanshu Kataria · 如何覆盖聚合物2中组件的功能?

7 年前