W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

[csswg-drafts] [selectors] :focus-visible and Shadow DOM (#5893)

From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
Date: Mon, 25 Jan 2021 17:40:55 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-793586689-1611596454-sysbot+gh@w3.org>
mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] :focus-visible and Shadow DOM ==
* Spec: https://drafts.csswg.org/selectors/#the-focus-visible-pseudo

The spec doesn't mention anything of what happen on a `ShadowRoot` is the root of an element that is focused. The `ShadowRoot` matches `:focus` (see [HTML spec](https://html.spec.whatwg.org/#element-has-the-focus) but I believe it shouldn't match `:focus-visible` or you'll get 2 outlines.

WebKit has implemented a `:-webkit-direct-focus` internal pseudo-class to avoid this issue (see [bug #202432](https://bugs.webkit.org/show_bug.cgi?id=202432))

Example:
```html
<div id="host" style="width: 200px; height: 100px; padding: 1em;"></div>
<script>
  const shadowRoot = host.attachShadow({mode: 'open', delegatesFocus: true});
  shadowRoot.innerHTML = '<input autofocus value="Focus me">';
</script>
```

Here if you focus the `<input>` you'll get 2 outlines right now in Chromium (one in the `host` and another in the `<input>`, both match `:focus` which is right, and also `:focus-visible`). That won't happen in WebKit thanks to that special UA stylesheet rule. In Firefox it looks like there are other problems because the `host` doesn't match `:focus`.

So the question is, should the `:focus-visible` spec include some text about this and describe WebKit's behavior?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5893 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 25 January 2021 17:40:57 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC