Shadow root support

[spielzeugland]

This PR addresses #425 allowing use of DND inside shadow roots e.g. in used in Web Components. It does not cover drag&drop between different shadow roots.

Approach:

• To find the event target nested inside a shadow root we use composedPath instead of event.target (since event.target points just to the shadow root host).
• To find draggables/droppables we use query selectors on root node of the event source instead of the document. This is encapsulated in queryElements in current query-selector-all.js replacing the former query function while also integrating the filter logic. The logic is called recursively.
• Shadow roots isolate stylesheets, means global styles do not bleed into the shadow root. Built-in styles need to be added to the shadow root. This can be done by allows consumers to specify the DOM location as a stylesInsertionPoint prop on the DragDropContext. Similar approach is taken by JSS (see https://cssinjs.org/jss-api?v=v10.6.0#setup-jss-instance).

Open points:

• check server-side rendering
• clean-up of query-selector-all.js, maybe rename the file
• adapt unit tests
• retarget library might be needed for earlier React versions
• fix some typing issues
• more detailed PR description
• enhance documentation

This is a port of a PR in the forked source repository which was not merged: https://github.com/atlassian/react-beautiful-dnd/pull/2319

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
dnd	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 8, 2023 at 8:50PM (UTC)

[Lemonreds]

any news about this pr?

[rdjpalmer]

@spielzeugland @100terres is this PR in a working state? What do we need to do to get it to a mergeable state? How can I help get it over the line? I'm happy to contribute however possible