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

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