Fix document.activeElement not being correct when components are use inside custom elements

[pmairoldi]

Fixes #1564
Reverts fixes from #1314

This pull requests address the fact that docuement.activeElement will be incorrect when components are used inside of a custom element. After some tests here is what I found:

1. if the focus is inside a custom element the document.activeElement will be the host of the custom element and the actual active element can be retrived by activeElement.shadowRoot.activeElement
2. if a custom element is within another custom element includes another custom element as a child and that child has an element that is focused then the same trick as point 1 can be used but one level deeper activeElement.shadowRoot.activeElement..shadowRoot.activeElement

With these findings I have implemented a function useActiveElement to retrieve the activeElement regardless of the nested shadowRoot. With this function I've replace all instances of document.activeElement with useActiveElement(). After some tests it seems like everything still works and we do not need the fixes from #1314 anymore.

[zernonia]

Thanks for the awesome PR @pmairoldi ! Some minor comment on the function naming 😁

[zernonia]

Nicely done @pmairoldi !!! Thanks for the PR! 🎉🚀

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/radix-vue@1570

commit: 9565a26