Draggable: ShadowDOM support

[ernsheong]

I'm trying out Draggable in a shadow DOM, and it doesn't seem to work. A glance at the codebase reveals use of document.addEventListener, etc. which prevents it from working in shadow DOM, presumably because events from inner elements are not able to cross the shadowDOM boundary to the document top level.

[tsov]

Interesting idea! How about we add an option to specify a host element? If the host element is not specified we'll fallback on document ?

Example

new Draggable(containers, {
  host: shadowRoot,
});

[ernsheong]

Thanks for the response!

Yes, that sounds like the way to go about this, and it looks like the strategy employed by https://github.com/RubaXa/Sortable/blob/master/Sortable.js as well.

[tsov]

No problem 👍

We'll add it to the next release! I'll add a mention on the PR for some 👀

Thanks for bringing this up!

[tsov]

@ernsheong 👋 if you are interested in following ShadowDOM support follow either:

• The WIP PR: https://github.com/Shopify/draggable/pull/202
• Or this related issue: https://github.com/Shopify/draggable/issues/189

We are currently working on supporting iframes, which ties in nicely with ShadowDOM, as we will support the DocumentOrShadowRoot interface

[ernsheong]

@tsov thank you for the effort. This is nice to see! Not many libraries are as forward thinking, and many are reluctant to add that complexity. Kudos for that 👍

[ralcar]

Does ShadowDOM work yet or is this still work in progress? Would really like to try this in Polymer 3

[tsov]

@ralcar ShadowDOM support is still on the way! Both @beefchimi and I are/were on vacation in-between, but we are fully dedicated to support ShadowDOM all the way.

[ralcar]

@tsov Any news on this? =(

[MaximKipot]

@tsov Is this awesome feature still on the way?

[JosefJezek]

@tsov Please put it in a high priority :up:

[ralcar]

Yes please do! :D

[aletorrado]

Any update about this feature?

[TimeBandit]

I believe this is affecting my end-to-end. I am running tests inside Cypress.js which uses iframes to show your tests running. We are using draggable to simulate a drag and drop. This error message is seen when the mouseup event is triggered.

Uncaught TypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite.

Please comment or provide a workaround. I think the issue is line 173

I should add I am running Ubuntu.