Как я могу раскрасить элемент css через теневой дом? - PullRequest
Новая
       40

Как я могу раскрасить элемент css через теневой дом?

0 голосов
/ 08 июня 2018

У меня есть компонент с именем accordion-next .Этот компонент можно рассматривать как шаблон.У меня есть компонент под названием accordion-toto .Этот второй компонент использует accordion-next .это своего рода наполнитель для шаблона.

, если бы accordion-next была интерполированной строкой, это было бы: 

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

и accordion-toto будет: 

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

, поэтому аккордеон-toto напечатает 

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

ок.Теперь я хочу добавить немного scss к accordion-toto .Это scss 

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

Конечно, это не работает.Я пытаюсь использовать :host, :host-context, :host(:hover), :host-context(:hover), а затем /deep/ и смешивать все это.Какой случай я пропустил?

Вы можете увидеть следующий Stackblitz для полного примера:

Stackblitz complete demo

Относится к: Как отредактировать ng-шаблон для использования моего HTML?

Редактировать: Я использую, чтобы иметь вопрос поворота.Спасибо @Shadowlauch за указание.Моя проблема все еще здесь с «основным» атрибутом.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вы получили неправильные комбинаторы.Попробуйте использовать код ниже.Вам также необходимо установить для свойства 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 demo

0 голосов
/ 08 июня 2018

Вам необходимо использовать «display: block» для элемента span, чтобы повернуть, потому что span является встроенным элементом

...