Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow root support #521

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

spielzeugland
Copy link

@spielzeugland spielzeugland commented Mar 8, 2023

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: atlassian/react-beautiful-dnd#2319

@vercel
Copy link

vercel bot commented Mar 8, 2023

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
Copy link

any news about this pr?

@rdjpalmer
Copy link

@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

@100terres
Copy link
Collaborator

@rdjpalmer I'll try to keep this feature as a high priority, but I can't make any promises on when it will land.

@rdjpalmer
Copy link

@100terres if it helps, we're using a patched version of the lib with @spielzeugland's code in production now and it seems to work without any issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants