Can I selectively stop a ::part pseudo selector from overriding shadow dom css

Question

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?

Answer 1

Just found this: - delegated focus

    this.#shadowRoot = this.attachShadow({ mode: 'open', delgatesFocus: true });