Supporting use in shadow roots

[spielzeugland]

This commit addresses #1659 and allows use of RBD inside shadow roots e.g. in
Web Components. It does not cover drag&drop between different shadow roots.

The following changes were needed:

• 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/droppablesInstead we use query selectors on root node of
  the event source instead of the document. This is encapsulated in a new
  central place (src/view/get-elements/query-elements.js).
• 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).

[gorakong]

hey @spielzeugland, we actually do have a record of your signed CLA. iirc I believe the email/username might've been incorrectly entered at some point edit: looks like there was a mismatch in github ID, but we'll be working to address that -- sorry for the inconvenience!

cc @alexreardon feel free to disregard the CLA check and merge the PR whenever you're ready 😃

[gorakong]

@spielzeugland update: it's been fixed 😄

[umarzec]

When it is expected that this PR will be merged?

[spielzeugland]

@umarzec I contacted @danieldelcore already but did not get a reply. This project feels quite inactive (not to say dead) somehow.

[briva]

Any news about a merge ? :) @spielzeugland

[spielzeugland]

@briva unfortunately I don't think this will ever be merged. Quote from README.md:

We recommend that you don’t raise issues or pull requests, as they will won’t be reviewed or actioned until further notice.

I read it like "the library is dead". Someone might create a fork. However I already moved ahead working on another project.

[briva]

@briva unfortunately I don't think this will ever be merged. Quote from README.md:

We recommend that you don’t raise issues or pull requests, as they will won’t be reviewed or actioned until further notice.

I read it like "the library is dead". Someone might create a fork. However I already moved ahead working on another project.

Yes, that's sad this library is really great. I already forked your fork my my personal usage 😄. If someone create a new fork in order to keep it update and merge PR, it will be awesome.

[luijar]

Hey guys, is there an ETA on when this can get merged? We started using Shadow roots for our micro-frontends and all of our DnD behavior broke.

[spielzeugland]

Hi @luijar, micro frontends are a perfect example of requiring support for shadow-roots. I recommend to team up with all the other interested people and create a community fork as proposed in the issue.

[johnnyfekete]

@spielzeugland thanks, your PR was lifesaving! 🤩
Even if it doesn't get merged to master here, I managed to copy your solution into my project, and works like charm! 👏🙏

[sbahir]

@spielzeugland Thank you for your awesome job !! How can I add your package ?

I tried yarn add atlassian/react-beautiful-dnd#2319/head

But it's adding the repo to my node_modules without building the bundled package

ERROR in ./src/...../....js 4:0-79
Module not found: Error: Can't resolve 'react-beautiful-dnd' in ....

@johnnyfekete if you have any tips too please let me know 🙏

[johnnyfekete]

@spielzeugland Thank you for your awesome job !! How can I add your package ?

I tried yarn add atlassian/react-beautiful-dnd#2319/head

But it's adding the repo to my node_modules without building the bundled package

ERROR in ./src/...../....js 4:0-79
Module not found: Error: Can't resolve 'react-beautiful-dnd' in ....

@johnnyfekete if you have any tips too please let me know 🙏

Sure, you need to go to the folder, run yarn install to install the dependencies and yarn build:dist to bundle the files.
You can ensure that everything's fine if the distfolder has some files, like react-beautiful-dnd.js etc

[sbahir]

thank you @johnnyfekete !! 🙏

I wanted to avoid that manually build but it seems like a yarn issue (see here)

Nonetheless, I tried your solution with React 18 and I encountered this issue below

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Have you tested it with React 18? I saw that there have been some updates on the current package since this Shadow DOM pull

I also tried to pull the latest react-beautiful-dnd and apply these commits but I encountered the same problem :/

Thank you again for your help 🙏

[johnnyfekete]

@sbahir I did it differently: created a fork, and worked on it. So it's not in the original project's node_modules folder, but a standalone version. Then, you can use refer to that forked version in your package.json.

Unfortunately I don't know any more than this, so hope this helps ☺️

[sbahir]

@johnnyfekete thanks again for your help on this topic!

I found the reason why it was complaining about the Invalid Hook call

After I run yarn add and yarn install inside the react-beautiful-dnd in my node_modules directory, it installed a different react version (v16 vs. v18 in my parent repository), which led to react versions mismatches

The solution is to build the dist and push it to npm. Then run yarn add @forked/react-beautiful-dnd (@forked/react-beautiful-dnd being the name you chose for that npm package)

it works brilliantly now 🥳