Adding ShadowDOM Support

I have started working on adding ShadowDOM support to this shim (which we are using for our Polymer 2 application).

At first, nothing was working at all. ShadowDOM introduces event retargeting, so events that fire up through Shadow Roots have their target changed to be the parent of the highest shadow root. This introduces a problem for the tryFindDraggableTarget function:

https://github.com/timruffles/ios-html5-drag-drop-shim/blob/0f2c6426d2618fadd1e9dfa4816fa0384b0291a0/src/index.ts#L188-L213

as event.target no longer refers to the actual target of the event. I rewrote this method (in JS) as follows:

    function tryFindDraggableTarget(event) {
        for(var i = 0; i < event.path.length; i++) {
            var el = event.path[i];
            if(el.draggable === false) {
                continue;
            }
            if (el.getAttribute && el.getAttribute("draggable") === "true") {
                return el;
            }
        }
    }

Success! I can now start drag operations successfully. Next up is dropping, which has proved to be more difficult. The code responsible for finding the drop target is here:

https://github.com/timruffles/ios-html5-drag-drop-shim/blob/0f2c6426d2618fadd1e9dfa4816fa0384b0291a0/src/index.ts#L722

document.elementFromPoint suffers a similar problem as before and returns only the highest shadow root rather than the actual element at the location. I found some documentation for DocumentOrShadowRoot.elementFromPoint(), but support for DocumentOrShadowRoot seems limited at best. This is where I got stuck. Does anyone have any ideas on how to move forward from here?

[ghost]

I’m facing the same issue when using web components. Neither this polyfill nor https://github.com/Bernardo-Castilho/dragdroptouch/issues/25 is working when using ShadowDOM.

@timruffles Would love to see this feature merged 😎

[jogibear9988]

I’ve shadow dom support workin on my system.

This is my workin Code:

function tryFindDraggableTarget(event) {
    var cp = event.composedPath();
    for (let o of cp) {
        var el = o;
        do {
            if (el.draggable === false) {
                continue;
            }
            if (el.getAttribute && el.getAttribute("draggable") === "true") {
                return el;
            }
        } while ((el = el.parentNode) && el !== document.body);
    }
}

function elementFromPoint(x, y) {
    for (let o of this._path ) {
        if (o.elementFromPoint) {
            let el = o.elementFromPoint(x, y);
            if (el) {
                while (el.shadowRoot) {
                    el = el.shadowRoot.elementFromPoint(x, y);
                }
                return el;
            }
        }
    }
}

function dragStartConditionOverride(event) {
    this._path = event.composedPath();
    return true;
}
MobileDragDrop.polyfill({ tryFindDraggableTarget: tryFindDraggableTarget, elementFromPoint: elementFromPoint, dragStartConditionOverride: dragStartConditionOverride});