Draggable autoscroll stops scrolling at shadowroot

[mfstapert-xip]

When a draggable is located in a shadow dom autoscroll behavior stops when the draggable reaches the shadow root. Our application uses webcomponents for dynamically rendering content inside different container apps. Having the autoscroll algorithm look outside the shadow dom or being able to pass a long a scoll container would solve our use case.

[jackdoyle]

I'm not sure that's feasible given the nature of shadow dom, but if you'd like more help with this please provide a minimal demo (like a CodePen or Stackblitz) that clearly illustrates the issue and we'd be happy to take a peek.

[mfstapert-xip]

If you could take a look that would be awesome, here is a stackblitz that reproduces this issue.

In the stackblitz you have a red square that's a webcomponent that creates a draggable on an internal DOM node.
The blue square is a normal DOM node that has been made draggable.

Dragging the normal node works as expected, including autoscroll.
Dragging the web component works as expected, except for the autoscroll.

This is a contrived example, in this specific case you could make the webcomponent itself draggable to fix autoscroll.
However in our app we have multiple nested web components that causes this issue.

Let me know if you need any more input.

[mfstapert-xip]

@jackdoyle have you goten a chance to look at this?

[jackdoyle]

@mfstapert-xip first of all, thanks for the minimal demo! Very helpful.

Sorry - this is such an edge case which I wouldn't really expect to work anyway that it's super difficult to justify displacing the other work on my plate to try to find a solution for you. I'm juggling a lot. Without digging in pretty deeply, I can't say for sure if it's impossible or not but shadow DOM makes things awkward :)

I think your options at this point are:

1. See if there's a way you could avoid using shadow DOM in your project.
2. Try to solve it yourself in Draggable's codebase. If you manage to do that, feel free to share and we'll definitely consider implementing the workaround.
3. Hire a GSAP expert to try to find a workaround.
4. Wait for me to get enough breathing room in my workload to circle back (no promises). I have to try to focus my energy where it'll make the most difference for the most people and you're the first person who has ever reported even trying to use the autoScroll feature on a shadow DOM element. I'm sure that's not comforting to hear, sorry, but I hope you understand the position I'm in.

[mfstapert-xip]

Hey @jackdoyle , thanks for the reply. Totally get your position and I understand this is very much an edge case. Sadly not using shadow DOM is not an option as we use lit for our design system. We are looking at alternative ways to fix this issue but most involve significant rewrites.

Patching Draggable was my initial thought and I did take a look at that, I found the parts in you codebase that were repsonsible for tree traversal. I could take a stab at it when time permits, biggest issue I had was knowing how to contribute. src contains the actual library source or is it transpiled source?

[jackdoyle]

Yep, /src/ contains the actual library source code, not a transpiled copy. Feel free to take a stab at it when you've got time.