fix: set the target as the host element when target contains a shadowRoot

[driskull]

Fix for sorting elements that contain web components

See #2346 for explanation and code samples of the issue.

When sortable elements contain web components with shadowRoot, and forceFallback is enabled, swapping elements is not working correctly.

DOM Example:

<ul id="list" class="list-group">
  <li class="list-group-item"><custom-handle></custom-handle><custom-content></custom-content></li>
 <li class="list-group-item"><custom-handle></custom-handle><custom-content></custom-content></li>
</li>

[RotkivDS]

I love you. Thanks for the fix.

[driskull]

@owen-m1 Let me know if there's anything I can do to get this one moving. Thanks

[owen-m1]

@driskull Thank you for the fix, but unfortunately this code defeats the purpose of the loop for going within shadow DOMs to find the target, since it immediately jumps out of the shadowDOM thus breaking the loop. What would be better is if we move the fix to later on in the function, when we are trying to detect the nearest Sortable to the target, and allow that loop to exit the shadowDOM to traverse parents outside of it.

Specifically your code could be moved to line 788:

while (parent = (parent.parentNode || parent.host));

In fact, we have a util function to make this simpler:

while (parent = getParentOrHost(parent));

Haven't tested this but I believe it should fix the issue and still support targets within a shadowDOM, please let me know if that's not the case

[driskull]

Thanks @owen-m1, that suggestion works and makes perfect sense. I've updated the PR to reflect the changes.