Problem description

Hello,

this is a follow up to #1025. Currently the library doesn't support web components which use shadow dom. This feature request only deals with open shadow doms. The underlying issue seems to be that with web components the element that is focused can be different from the one where input needs to take place: Web Components wrap builtin elements on which the input takes place. To get the element to interact with document.activeElement seems to be used. In case of web components this would return the web component, while the element that would need to be interacted with (e. g. an input element within the shadow DOM) is hidden from the library.

Suggested solution

There has been prior art in the form of getActiveElement (https://github.com/testing-library/user-event/blob/main/src/utils/focus/getActiveElement.ts) which iterates over potential shadow DOM's activeElement property, until the element to interact with is reached.

This could be used as a replacement for document.activeElement to make the library open shadow DOM compatible. I quickly hacked this together on paste() and it seems to get the job done:
https://github.com/Christian24/user-event/blob/f4242842c1ed51d2ec8042263bee7abdbafea21e/src/clipboard/paste.ts#L14

In some cases like keyboard input it seems to be more an issue of getting the element to focus properly first.

Interestingly, user.click(element) doesn't seem to focus the input within the web component, not sure why. I had to manually querySelector the input to get my paste test to work:
https://github.com/Christian24/user-event/blob/main/tests/webcomponents/index.ts#L29

jsdom doesn't implement delegatesFocus currently: jsdom/jsdom#3418

Additional context

I have been playing a little bit with this this afternoon: https://github.com/Christian24/user-event
Not sure it will evolve into a PR though, would like to hear seasoned contributors opinion first. Also for some reason I couldn't get the tests to debug in VS Code...