The current approach with dropRoot: Document | ShadowRoot works well, if the DragEvent is caught within the shadow DOM but fails in cases, where either

• the dropRoot is outside the shadow DOM (e.g. because the shadow DOM is not loaded yet) - or
• the DragEvent should be caught inside AND outside of the shadow DOM

in those cases, native DnD could be implemented using Event: composedPath :

e.g.

target.ondragover = (ev: DragEvent) => {
    const path = ev.composedPath();
    const target = path.find((t) => t.classList.contains("my-valid-drop-target"));
    if (target && ev.dataTransfer) {
        ev.dataTransfer.dropEffect = "move";
        ...
    }
};

This approach fails with drag-drop-touch-js because Event: composed and Event: composedPath are not set.

I will create a pull request to set composed and composedPath and link it to this issue.