Doesnt work with Shadow Dom elements.

[sezerkorkmaz]

We use angular wrapper version of this library and using shadow dom for our components. Formio JS library doesnt work with Shadow Root elements. For example for dragging, formio use dragula library. All draggable elements has "drag-copy" class. So the javascript library can reach them via

document.getElementsByClassName('drag-copy')

but in the shadow root, it need reach via document.getElementsByTagName('parent-element')[0].shadowRoot.querySelectorAll('.drag-copy');

Is there any way to solve this issue?

[randallknutson]

I'm not sure that change would work with people not using shadow dom elements so we can't make that change in our library. I'm not sure that we have a good grip on the issue as we don't typically use the shadow dom. We are definitely open to fixing this but need a solution that will work for everyone.

[Ankita-G-Mudgal]

I am also facing the same issue as trying to integrate it with webcomponents. Is there any plan to fix this?

[randallknutson]

We don't currently have any plans to change this as it doesn't occur in any of the systems we are currently working with. We would be happy to accept a pull request that solves your use case.

[olliejm]

Is the problem in formio or in the dragula library?

[heather-formio]

Closing this thread as it is stale. Please feel free to reopen if needed.

[jfulfordebay]

fwiw, I'm finding the renderer does work inside a shadow DOM for simple components (I haven't tested anything else) so long as you use the html5 widget for "select" elements instead of choicesjs.

There is hope, weary traveller who finds this thread.

[travist]

Our Inline Embed works inside shadow dom. Try it out and inspect the Dom and you will see it is shadow dom, so we know it does work.

<script src="https://cdn.form.io/js/formio.embed.min.js?src=https://examples.form.io/example&libs=true"></script>

Here is the fiddle.

https://jsfiddle.net/travistidwell/uys26qpf/

[StephenOTT]

Has anyone tested with the builder?

[lukethacoder]

Looks to be an issue with dragula not properly supporting shadow dom. This (https://github.com/bevacqua/dragula/pull/470) PR (sadly never merged) looks to solve the issues, but its quite fiddly to jam into formio.

[heather-formio]

We're happy to review again, @lukethacoder. Can you please describe the details of the use case you are after and the current versions of everything you're using? Once received, We'll take a look at the PR and see if anything has changed on our opinions regarding this thread.

[lukethacoder]

I'm attempting to load the Formio builder inside a Shadow DOM element. It seems to load fine, but the Drag and Drop does not work due to Dragula not having Shadow DOM support.

• dragula: v3.7.3
• formio: latest (5.0.0. - via https://cdn.form.io/js/formio.form.min.js)

Have yet to test the rendering side of things as I'm less concerned about that for my specific use case so far.

[heather-formio]

Thanks @lukethacoder, I'm looking into the dragula library overall and seeing what we can do about this. Stay tuned.