Do we need :focus-visible-within ?

[dbaron]

While looking to close out w3ctag/design-reviews#233, one other thought occurred to me:

Is there a need for :focus-visible-within to complement :focus, :focus-within, and :focus-visible?

In particular, because of limitations on CSS selectors (that is, the difficulty of selecting an element that is an ancestor of an element with a particular characteristic), we've added :focus-within to have a version of focus that behaves like the hierarchical :hover and :active. I think this was desirable because it's not unusual for a visible container to be styled differently when something inside it has focus. Consider examples ranging from an operating system window to a <fieldset> with a bunch of form controls in it. (I suspect there may be better documentation if you trace from where we agreed to add :focus-within.)

It's not clear to me whether the use cases for :focus-within and the use cases for :focus-visible combine. Do we also need :focus-visible-within, or not?

/cc @alice @robdodson @bkardell @AmeliaBR @frivoal

[AmeliaBR]

I personally don't see a use case.

:focus-within is for cases where you really want to enhance focus styling (highlight/expand an entire group of interactive elements), :focus-visible is for cases when you want the styling to be more subtle, only-when-necessary.

But regardless, there's nothing stopping it from being added later if there is a strong demand from authors, once those authors have a chance to really work with the two new selectors.

[Malvoz]

This was brought up in WICG/focus-visible#151

[tabatkins]

I don't think there's any significant use-case difference between "want to see if a descendant has :focus" and "want to see if a descendant has :focus-visible". If you want one, there's a good chance you might want the other. (Or to put it another way, :focus is often not what you actually want in the first place; you usually want :focus-visible, and thus you'll probably want a -within variant if you're currently suboptimally using :focus-within.)

However, if we do decide to add such a thing, I'm against just spamming more keywords into the name; that's unwieldy and you have to remember the (arbitrary) order of the modifier keywords. Instead, I'd say we should expand :focus into a :focus() functional pseudo, like :drop(), taking a list of keywords in any order. So you'd write :focus(visible within) or whatever.

[Justineo]

IMO it's better to have :has(:focus)/:has(:focus-visible) instead of :focus-within/:focus-visible-within. Not sure if this is discussed earlier.

[Justineo]

Is there any chance that we support the :has(...) syntax but temporarily restrict the usage within :focus and :focus-visible? That would introduce little performance overhead and provide some degree of extensibility.

An example is when :not() is first introduced, only simple selectors are allowed as its argument and in Selectors Level 4 we extended that to some non-simple selectors.

[craigkovatch]

Just want to pile on here to say: there are definitely use cases for this, and I also like Tab's idea of :focus(within whatever), assuming that ship hasn't sailed too far :D WICG/focus-visible#151 (comment)

[bkardell]

Since I see some comment here, it's worth noting that :has is in development :has() in 2 engines (chrome 101+/supporting things based on that chromium build under experimental web platform features and webkit with TP versions like Safari in the most recent). In both cases, at least currently

.thing:has(:focus-visible) { .... }

works just fine, so if that ultimately lands it will address this issue (as well as several others, we should probably review)

[craigkovatch]

@bkardell I've no objection to that, although :focus(within whatever) wins on cuteness ;)

[valtlai]

:has() is enabled by default in stable Safari 15.4. 🎊

[jpzwarte]

A checkbox web component:

• The input is slotted so it integrates with forms and labels
• The input is hidden and we use SVG to render a custom checkbox
• When the input has focus & focus-visible, the SVG should have a box-shadow

<span class="box">
  <slot name="input"></slot>
  <svg>...</svg>
</span>

:host(:focus-visible-within) svg {
  box-shadow: ...;
}

Atm, the only solution I see is to use JS.

[i-am-the-slime]

@jpzwarte Exactly how I ended up here, too.

[jpzwarte]

@i-am-the-slime I believe this is now possible using :host(:has(:focus-visible)) svg { ... }. Haven't tried it yet though.