css Question posted in
Some basic documentation can be found here.

Can't find CSS selector to style Shadow DOM delegated focus

EDIT 1+

Ok, sorry for the wild goose chase. this appears to be a straight forward CSS issue. In the light DOM: –

#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%);
}   
#disTick::part(endo):hover, /* We overrode the Tick box-shadow above so now must also control highlighting. */
#disTick::part(endo):focus {
    box-shadow: 0 0 0.2em black;
}

The box-shadow for #disTick::part(endo) is overridden by the #disTick::part(endo):hover but not the #disTick::part(endo):focus

IOW, If I comment out the first rule then the focus rule works fine.

How can that be right?

EDIT 1–

I have added the delegatesFocus attribute to my custom element’s Shadow DOM like: –

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

It certainly looks like it works because you can see the traditional Outline focus-styling on my "Disable Toggle" tickbox.

Now I want to use CSS to turn off the default outline and add my own Focus styling. To this end I added the following to test_toggle.html :-

#disTick:focus {
    outline: none;
    box-shadow: 0 0 0.2em black;
}

Problem is, it doesn’t do anything 🙁

As you can see #disTick is the host (I think) and I’ve added the CSS all around both the Shadow and Light DOM and just can’t get it to take effect.

Please advise what CSS Selector I need to find the element(s) that have been delegated for Focus.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I'm going to mark @SuperSharp's answer as correct because I never knew that you could add a tabIndex to and unfocusable element nor that it would then make that element focusable.

    But what I've gone with is a simple CSS VARiable (from test_toggle.html): -

    #disTick {
    display: flex;
    align-self: center;
    --toggle-highlight-color: #000;
    --toggle-fg-color: #fcfff4;
    --box-shadow: initial;
    cursor: pointer;
}
#disTick::part(endo) {
    box-shadow: var(--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%);
}   
#disTick:focus {
    outline: none;
    border: none;
    --box-shadow: 0 0 0.2em black; 
}

    So as you can see --box-shadow is empty and skippable until the host #distick has focus at which time ENDO assumes the aura of a focused element. When the host is not focused then the default box-shadow is in control.

    The only disappointing thing here is that delegatesFocus: true is completely unnecessary. I thought it was such a great find :-( I guess in this case EXO gets focus for being the LABEL of the CHECKBOX.

    Not sure how different tabIndex settings would play with A11y either?

    Now all I have to work our is why Firefox returns AUTO for z-index unlike Chrome's "1" and then weep for why they (and Safari) don't give shadow DOM event listeners the shadow DOM target elements :-(


  2. 0

    custom-element::part():focus works. For example:

    #disTick::part(endo):focus {
  outline: 5px solid yellow
}

    But the targeted element must be focusable.

    Here endo is a <span>. You can make it focusable by adding a tabindex attribute.

    In the custom element definition:

    span.tabindex = 1

    Then, on a click event, call focus().

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search