Fix for Shadow DOM

[txsmith]

This PR makes dragula work inside Shadow DOM.

I've implemented @kevinpschaaf suggestion to use composedPath() if an event target has a shadowRoot, but I'm not sure if this is the best way since composedPath() seems quite experimental (See #418).

The tests that touch the DOM are modified to run against document.body as well as an element inside multiple shadow roots.

I've also put together a wrapper element using Polymer with several demos that run successfully with shadowDom enabled.

Suggestions are very welcome!

Fixes #418

[ergo]

@txsmith Awesome stuff - I was working on this element (https://www.webcomponents.org/element/ergo/polymer-dragula) but I also encountered issues with shadow dom :-) I can try the wrapper with updated version.

[davidmaxwaterman]

I've tried this commit and I don't think it is quite enough. I could be wrong, but I'd like to see it work - is there a demo of it working?
When I try it, I find that I need to duplicate the dragged element's style into the body's style, else it isn't even in the correct position, let alone styled correctly. The style needs adjustment slightly too - the copy seems to have its dimensions set to include the padding, so that needs removing so it remains the same overall size; but that makes its children too close to the edge of it, meaning they need some margin adding to compensate. It all gets a bit messy.
I am also now trying to find a solution to the fact that, once the item is positioned correctly, it seems to prevent it from being dropped (it works when it isn't positioned under the cursor).

ref: ergo/polymer-dragula#7

[davidmaxwaterman]

OK, I had to add '.gu-hide { display: none !important }' into a style in the document's head too...then it seems to work (it seems dragula applies that class to hide the element being dragged when searching down the tree to find the element under the cursor).
I'm not sure if any of this needs to be added into dragula, or perhaps it should simply be in polymer-dragula (it could add the appropriate classes into a style in the document.head for the user). Perhaps I'll work on that and submit a PR.

[txsmith]

David, did you try the demo's in here? These should work on Chrome but I've not made an effort to make the element compatible with Firefox or any other browser yet.

If you did try my demo, then the styling problems you have appear to be caused by a missing import for a style module. Make sure you have <style include="dragula-styles"> and the corresponding html import for dragula-styles.html. You might have to add this style include in multiple places. Check the demo source code to see where I placed them.

I tried my patch of dragula on ergo/polymer-dragula but ran into some problems because subContainerSelector breaks under Shadow DOM.

[davidmaxwaterman]

@txsmith I somehow hadn't seen that element so, no, but it seems to be doing essentially the same as what I concluded was necessary (albeit including all the styles in the root document rather than just the ones that are strictly necessary, iinm).

However, those demos don't use dom-repeat, which was where I needed to make most changes to polymer-dragula. It'd be awesome if you could have a demo of one of those, since dom-repeat is surely an extremely common use-case.

Anyway, I have a working solution, even if it is a hacked together one, so I'm happy for the time being. If dragula-element could be shown to work with dom-repeat, and this PR be merged, I'll switch to all released versions :)

It should be noted that I didn't have to make any changes to this patch, so I'd say it is working just fine. Any chance this PR can be merged?

[1] https://github.com/txsmith/dragula-element/tree/master/demo

[davidmaxwaterman]

@bevacqua any chance this PR can be merged? It'd be a step towards us only having to use released versions.

[txsmith]

Thanks for the confimation! I'll add a dom-repeat demo later today.

[davidmaxwaterman]

@txsmith 's dragula-element works perfectly in my app.

It'd be really awesome to get this PR merged (looking at @bevacqua 's activity, it looks like he might be on holiday or sick).

[ergo]

Hello, are there any news on this?
It would be awesome if we could get the changes merged back in.

[ergo]

@bevacqua any news on getting this merged?

[ergo]

@txsmith any news on this?

[hariprasadiit]

any update on this? waiting for this to be merged to use it with polymer 2

[rjcorwin]

Also waiting for this to be merged :)

[txsmith]

First of all: I'm sorry it took me so long to get back to this.

I've implemented the suggestion from @ergo to flip the or for getParent. As far as I'm aware this is guaranteed to work since anchors always have the parentNode property defined. The only way this could break would be if an <a> is the top-level element on a page, which can never happen as anchors are only allowed inside a <body>.

[ergo]

Than you so much, maybe we can get it merged then :-)

[ergo]

@bevacqua @lange Any chance we can get new release with this?

[ergo]

Hello @bevacqua, any chance this can be merged in?

[dthorne]

We are looking for this as well. @bevacqua I'd like to help get this up to snuff but I don't see any outstanding complaints with it.

[noncototient]

Would be nice to finalise this and finally merge it 🙌

[ergo]

@bevacqua any news on this, does this package currently have a maintainer?

[caridy]

PR seems to be good enough, we did some extensibly review of the code for Lightning Web Components, and it seems to be correct. We also validated with our own implementation of synthetic shadow, and it works too. Can we get this merge?

[ScottMGerstl]

Is this good to go? When do you anticipate to merge and publish this?

[ergo]

I'm not sure dragula is maintained anymore.