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.

([9]} a partir disto eu queria tentar especificar Mais o selector de modo que eu pudesse estilo os elementos personalizados em seu estado, por exemplo: :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.

Author: MakingStuffs, 2020-01-12

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:

Https://jsfiddle.net/CustomElementsExamples/hrwjumkq/

 4
Author: Danny '365CSI' Engelman, 2020-08-22 23:56:45