document.activeElement.matches(:focus) is false. why is this?

Question

I have an li:

<li _ngcontent-c21="" class="accordion li" tabindex="0" aria-expanded="true">

Which I have tabbed to. document.activeElement is in fact this element. However,

document.activeElement.matches(':focus')
false

and to make matters even slightly more bizzare:

document.activeElement.focus()
undefined
document.activeElement.matches(':focus')
false

What is going on here? (this is chrome, btw)

Answer 1

If this is happening in the console, the console is in focus, not the element or indeed the page; therefore, elements cannot match :focus as long as the console is in focus. This is not a limitation of Element#matches(), but a side effect of how :focus works — :focus CSS style rules behave the same way.

If you either set a timeout in the console and refocus the page before the timeout expires, or call these functions in a <script> within the page, document.activeElement should match :focus as expected.