Применение более глубокого выбора к псевдоклассу: host CSS - PullRequest
Новая
       64

Применение более глубокого выбора к псевдоклассу: host CSS

1 голос
/ 12 января 2020

Я создаю пользовательский элемент и искал способ добавить больше специфичности псевдоклассу :host, связанному с теневым DOM. Насколько я понимаю, он используется для выбора самого элемента. Например, если бы у меня был элемент с именем my-elem, к которому был присоединен теневой DOM, псевдокласс :host был бы эквивалентен классу под my-elem в глобальной таблице стилей.

Исходя из этого я хотел попытаться дополнительно указать селектор, чтобы я мог стилизовать пользовательские элементы в их состоянии, например: :host:not(.active). Тем не менее, я не могу найти какое-либо прочтение о дальнейшей специфике, касающейся :host, и использование вышеупомянутого не работает.

Я также попробовал традиционный :host.active и даже дерзкий :host[active], однако ни один из них не работает.

Поэтому я хотел спросить, возможно ли это вообще. Я провел некоторый поиск в Интернете, но на самом деле не так уж много онлайн в этом вопросе, и я чувствую, что это может быть невозможно, поэтому мне, возможно, придется понизить уровень на go и применить активный класс к обертка пользовательского элемента при изменении состояния.

Я просто хотел сделать это таким образом, так как это позволяет мне программно стилизовать элементы от их родителя (я применяю активные / неактивные стили к пользовательским слайдам настраиваемая форма элемента).

Заранее спасибо.

1 Ответ

0 голосов
/ 13 января 2020

  • :host(.active) для обозначения селектора класса:

    <my-element class="active" ></my-element>"

.

  • :host([active]) для обозначения селектора атрибута:

    <my-element active="..." ></my-element>"

.

Полагаю, вы хотите использовать :active Псевдокласс , например :hover

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Правильный синтаксис : 

:host(:active){
  color:yellow;
}

Если у вас также есть :hover в вашем элементе: 

:host(:hover){
  color:green;
}

Вам необходимо принудительно задать Специфичность (https://css-tricks.com/specifics-on-css-specificity/) с: 

:host(:active:active){
  color:yellow;
}

: тогда нет обозначений: 

:host(:not(:active)){
  color:grey;
}

Этот конечно имеет более высокую специфичность, чем :hover

Чтобы заставить :hover работать снова, вам нужно: 

:host(:hover:hover){
  color:green;
}

JSFiddle площадка с: host &: slotted CSS:

https://jsfiddle.net/CustomElementsExamples/hrwjumkq/

...