Github [selectors] :focus-visible and Shadow DOM · Issue #5893 · w3c/csswg-draft...
source link: https://github.com/w3c/csswg-drafts/issues/5893
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 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)
Example:
<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?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK