Я пытаюсь показать свой компонент, когда его родительский элемент находится наверху.
Компонент action-list отобразит список возможных действий при наведении на элемент. Цель состоит в том, чтобы иметь вид контекстных действий.
Я использую host-context, чтобы определить, когда находится родительский элемент, но проблема в том, что он будет проходить через родительское дерево.
Если у меня есть следующее: :host-context(:hover) {...}, то action-list будет показано, как только любой из его предков (до тела) будет зависать. В этом случае он всегда будет отображаться Демо
Мне удалось заставить его работать, установив класс css для родителя и в scss :host-context( .parent: hover) {...} ` Demo
Работает хорошо, но я бы не хотел устанавливать дополнительный класс для родителя.
ВОПРОС:
Я знаю, что это невозможно в чистом CSS, но есть ли магический синтаксис angular / scss, который позволит выбрать прямого родителя?
Что-то вроде :host-context(parent():hover) {...}