Shadow DOM Support

[PaulHMason]

Are there any plans to support Shadow DOM V1 (landing in the next few weeks in Chrome V53 and in progress in other browsers)? Dragula doesn't work with Shadow DOM V0 in Chrome, for obvious reasons. Supporting drag and drop across shadow boundaries will probably be impossible, but hopefully it will be possibly within the same shadow root.

Thanks

[bevacqua]

What would this entail?

[ergo]

I think this would maybe need to start using shadowRoot instead of document for document events when binding handlers? Someone from polymer team/webcompoents would probably know best.

[ergo]

@kevinpschaaf might know?

[ergo]

I also looked at this https://github.com/RubaXa/Sortable/pull/943 for sortable, they changed how target is handled to:

originalTarget = evt.target.shadowRoot && evt.path[0] || target;

I'll try to dig a bit to see if i can unbreak the functionality with shadow dom enabled.

[kevinpschaaf]

ShadowDOM scopes events, such that most events firing within a shadow root have their target set to the nearest shadow host that encapsulates the actual node a UI event fired on. In ShadowDOM V1, use evt.composedPath() to get the deep list of nodes the event will be dispatched to, where evt.composedPath()[0] is the actual node (regardless of shadow roots) that the event originally fired on.

In case it's useful, in V1 Shadow DOM Node.prototype.getRootNode() provides the nearest "root" node encapsulating a given node, which either returns document (for elements in the main document) or a shadowRoot (for elements scoped in a shadow root).

[ergo]

@bevacqua do you think, there is an easy path to solve this?

[davidmaxwaterman]

I spent the past day trying to make this work inside shadow dom before coming across this issue (doh).

I did have a quick play with adding a 'document' and 'documentElement' to the options, and hack dragula.js to use those instead of the root ones, but I was somewhat out of my depth and it didn't work - I think I wasn't used the correct type of things, and from @kevinpschaaf 's comment, I think I probably had the wrong approach anyway (I imagine that just doing what I was trying would result in dragular only working inside a particular shadow dom, rather than many).

I did make a very simple test app that showed the problem, so perhaps that will be useful. I'll see if I can upload it somewhere. It does use polymer-dragula though, rather than the library itself - though it is quite a thin layer so I don't think that should present too much of a problem for anyone trying to make dragula.js work with shadow doms.

[elainaRenee]

Here is a plunker I created to demonstrate how I used Dragula inside a custom Polymer element. https://embed.plnkr.co/2b1tjQ/

[davidmaxwaterman]

@elainRenee Did that example actually use shadow-dom? I don't see where you turned it on, and by default Polymer uses shady-dom. With shady-dom, all the document.querySelector calls will work, but not with shadow-dom. Did I miss something?

[elainaRenee]

I see. My mistake, it uses shady dom.