Support: Web components with shadow dom

[rstoneIDBS]

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]

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]

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]

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]

@keithamus 👋

[alexreardon]

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]

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]

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

[driskull]

Here's the list example with web components and tailwind. You'll notice its not working with web components. This can be used as reproduction case to get it working.

https://github.com/driskull/pdnd-web-component-tailwind
https://stackblitz.com/~/github.com/driskull/pdnd-web-component-tailwind?startScript=dev

[rstoneIDBS]

This article gives some great pointers on this issue:
https://justinribeiro.com/chronicle/2020/07/14/handling-web-components-and-drag-and-drop-with-event.composedpath/