Aplicar uma selecção mais profunda à pseudo classe de CSS: máquina
estou a fazer um elemento personalizado e tenho procurado uma forma de adicionar mais especificidade à pseudo Classe {[[0]} que está associada com o DOM da sombra. Pelo que sei, é usado para seleccionar o próprio elemento personalizado. Por exemplo, se eu tivesse um elemento chamado my-elem
que tivesse um DOM de sombras ligado a pseudo Classe :host
seria equivalente a uma classe sob my-elem
numa folha de estilo global.
:host:not(.active)
. No entanto, não consigo realmente encontrar nenhuma leitura sobre a especificidade adicional em relação ao {[[0]} e o uso do acima mencionado não funciona.
Também tentei o tradicional e até o atrevido, mas nenhum deles funciona.
Por isso, queria perguntar-te se isto é possível. Eu fiz algumas pesquisas on-line, mas não parece realmente ser tudo muito on-line sobre o assunto e eu sinto que pode não ser possível assim que eu vou, possivelmente ter que ir um nível para baixo e aplicar a classe ativa ao invólucro do elemento personalizado após a mudança de Estado.
Só queria fazê-lo desta forma, pois permite-me programar programaticamente os elementos dos seus pais (estou a aplicar os estilos activos/inactivos aos slides personalizados de uma forma de elemento personalizada).
Obrigado antecipadamente.1 answers
-
:host(.active)
é para uma notação de selector de classe:<my-element class="active" ></my-element>"
.
-
:host([active])
é para uma notação do selector de atributos:<my-element active="..." ></my-element>"
.
Presumo que queira usar o ...:active
Pseudo-Classe , como :hover
Https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Sintaxe correcta:
:host(:active){
color:yellow;
}
Se também tenha um :hover
no seu elemento:
:host(:hover){
color:green;
}
Tens de forçar a especificidade ( https://css-tricks.com/specifics-on-css-specificity / com:
:host(:active:active){
color:yellow;
}
:notation is then:
:host(:not(:active)){
color:grey;
}
Este claro tem maior especificidade do que :hover
Então para fazer :hover
funcionar de novo você precisa:
:host(:hover:hover){
color:green;
}
Parque Infantil Do JSFiddle com: máquina&: CSS com fendas: