Support: Web components with shadow dom

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack

https://atlassian.design/components/pragmatic-drag-and-drop

Other

7.45k stars 133 forks source link

Support: Web components with shadow dom #15

Open rstoneIDBS opened 1 month ago

rstoneIDBS commented 1 month ago

Looking at the code in "element-adapter.js":

 var target = event.target;

 // see if the thing being dragged is owned by us
 var entry = draggableRegistry.get(target);

If the dragged element is contained within the shadow root of another web component then 'target' above won't be the element being dragged but will instead be the web component due to event re-targetting. The following code sandbox shows the issue:

https://codesandbox.io/p/sandbox/pdnd-web-components-forked-l8f6tv

alexreardon commented 1 month ago

Thanks @rstoneIDBS.

Here is a potential plan of attack:

Could you please convert over one of our examples to use web components (ideally the board one as it exercises a decent amount of API surface area)
I'll take the example and make the changes required to get everything working with web components
I'll add browser integration tests on the new web component board example to help ensure we don't regress our support

rstoneIDBS commented 1 month ago

Thanks @rstoneIDBS.

Here is a potential plan of attack:

Could you please convert over one of our examples to use web components (ideally the board one as it exercises a decent amount of API surface area)

I'll take the example and make the changes required to get everything working with web components

I'll add browser integration tests on the new web component board example to help ensure we don't regress our support

Hi @alexreardon , this is something I might be able to look into but it is going to take some time as I'm pretty busy with other things. We were investigating adding some drag & drop features to a PoC but have now moved on from that so its not a priority for us at the moment.

alexreardon commented 1 month ago

If somebody is willing to put together our board example with web components that leverages shadow dom, I can take a look at adding support to pdnd :)

alexreardon commented 1 month ago

@keithamus 👋

alexreardon commented 3 weeks ago

Thanks for your original PR @rstoneIDBS. I suspect there is not a whole lot we will need to do to get things working. I am not confident enough with web components right now to successfully make the changes required. It would be great to get the assistance from the web components community for this one.

alexreardon commented 3 weeks ago

Relevant data points:

drag handles currently use document.elementFromPoint as a part of the check (we could look a removing drag handles though as drag handles can be achieved by using a custom native drag preview)
for our drop target lookup, we search up the tree for drop targets using element.closest(dropTargetSelector)
auto scroller uses elementFromPoint to determine what the user is currently over -auto scroller uses target.closest(scrollContainerSelector) to find all the relevant scroll containers

rstoneIDBS commented 3 weeks ago

@alexreardon - I would like to be able to help out here, but at the moment I just don't have the bandwidth :(