Add support for shadow dom

[Nio-o]

Problem

The current implementation of document event handling uses event.target as the event target. This method works for DOM elements located in plain old DOM.

When I try to render a component inside the Shadow DOM, all events intercepted from the outside (via document.addEventListener) will have an event.target === host DOM element. This leads to incorrect behavior of components such as Dialog, Drawer.

I'm not sure if there are other places that are broken when using shadow dom. Changes may be required in other parts of the code, so I started a discussion - are there plans to maintain compatibility with shadow dom?

Example

https://stackblitz.com/edit/corvu-shadow-dom-issue?file=src%2Findex.tsx

Proposed solution

I suggest using event.composedPath().at(0) instead of event.target in all places where we need target which triggered event. According to the specification, there will be the required element even from shadow dom.

For example

Replacing all occurrences const target = event.target with const target = event.composedPath().at(0) resolves issue with scrolling.

I would like to make PR if you approve this solution

Almost similar issue in react-select: JedWatson/react-select#3680 (comment)

[GiyoMoon]

Hey! Yep you are correct, corvu in its state hasn't put any effort into making sure it supports the Shadow DOM. Generally, I'm open to investigating how much effort this would be to add and support.

I don't have a lot of experience working with Shadow DOMs and the caveats they bring with them.
Do you know if that's the only change required for full Shadow DOM support? I wouldn't want to patch something without making sure that this is all we need.

It would be best to make sure that every primitive and utility works in the Shadow DOM. Depending on how much complexity this would add, I'd be happy to maintain support for it.

[Nio-o]

I think there are two things to consider:

1. document.querySelector will not return elements inside ShadowDOM. It is necessary to use shadowRoot in some way instead of document (for example pass through props/context). I did not test all components in shadow dom but I see there is usage of document.querySelector in TableOfContents

2. event.composedPath() instead of event.target. I made local patches, they fix the behavior of dialog/drawer, I will create a PR soon.

So at this point, I think it's easy to support work in ShadowDOM