React-beautiful-dnd: Support usage in shadow roots

[danielbigler]

Expected behavior

I´m using rbd in an app that is wrapped by a web component which uses the shadow DOM.

Actual behavior

Drag and drop is not possible and in the browser console I get the error message, that drag handle could not be found. Is there a way we can get this working?

Steps to reproduce

Use rbd in the shadow DOM.

Suggested solution?

What version of React are you using?

16.12.0

What version of react-beautiful-dnd are you running?

12.1.1

What browser are you using?

Chrome 78, Firefox 71

Demo

https://codesandbox.io/s/vertical-list-wn7dd

[alexreardon]

We try to find the drag handle using a selector. If the drag handle is within a shadow dom, then my understanding is that we cannot query what is in the shadow DOM from the outside. Does that sound right?

[alexreardon]

I could not find a way to do it with a selector. It looks like you need to find the shadow root and then you can query from there. We'll need to think through what is the best way to do this. Ideally, we do not query every shadow root.

Some initial thinking:

• ask consumers to put a data attribute on the shadow roots they do want us to query
• allow consumers to pass in a findDragHandleIdByEvent override where consumers can do things like query shadow roots

[danielbigler]

@alexreardon thank you!

We try to find the drag handle using a selector. If the drag handle is within a shadow dom, then my understanding is that we cannot query what is in the shadow DOM from the outside. Does that sound right?

Sounds right to me and I think exactly that´s the problem.

• ask consumers to put a data attribute on the shadow roots they do want us to query

I tried to hack a little solution for this one by attaching the data-shadow="true" attribute to the custom element. Afterwards it is possible to find the drag handle by e.g. using
document.querySelector('[data-shadow="true"]').shadowRoot.querySelectorAll('[data-rbd-drag-handle-context-id="0"]').

However, it´s still not possible to move the items in the list. Is it possible, that we also have to fix something with events in the shadow root?

[achang97]

Any updates on this? I am also having the same problem and would love the afore-mentioned feature of having access to the shadow dom. @alexreardon

[diegoddox]

I'm facing the same issue as @alexreardon the only thing left is to make the items move.

[heyheman11]

I would love to use react-beautful-dnd but can't because of this, it wasn't mentioned in the documentation either

[sunshinesanty]

I would also love to use this solution but have been hamstrung by this issues. We are building micro-frontend apps and have to use web-component with shadowDOM for isolation. Is there any roadmap from RBD for solving this issue?