Мобильная версияI have exposed part of my shadow DOM via the PART pseudo element. The caller of my Custom Element takes advantage of that by using CSS like: -
#disTick::part(endo) { box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); background: linear-gradient(to top, #165273 0%, #33a1de 100%); } The problem I have is that ENDO is a SPAN inside a LABEL that also contains a CHECKBOX. That problem being that ENDO is incapable of having Focus but a: -
input:hover + .endo.tick, input:focus + .endo.tick { box-shadow: 0 0 0.5em var(--toggle-highlight-color, rgba(0,0,0,0)); } in the shadow DOM is ignored as the BOX-SHADOW attribute from the light DOM overrules it even though it does not have a FOCUS pseudo element itself.
- All code (3 files toggle) can be found here and a working example can be found here. (It's the "Disable Toggle checkbox that can't stay highlighted when focused.)
Ok, I realize I'm trying to have my cake and eat it too, or get half-pregnant, here but I hope you can see some logic in it?
I don't want to add another PART to an already leaky shadow DOM so I guess I can have more CSS variables with really big strings for BOX-SHADOW. Just wondering if there is some CSS specificity or precedence lever that can force the Shadow DOM part:focus to overrule light DOM part?
Источник: https://stackoverflow.com/questions/780 ... ow-dom-css
