Events not working inside shadow root

[ad1992]

I tried using this library. to render a component inside shadow root but the click events in children, copy/paste event on the canvas(canvas is rendered inside shadow DOM) and custom context menu doesn't work.

[Wildhoney]

Hmm, could you please create a Codesandbox with an example of what doesn't work for you?

[ad1992]

@Wildhoney Its currently under development, I will share the link soon

[ad1992]

@Wildhoney here is the code sandbox link I tried using shadow DOM to integrate excalidraw You can try copy-pasting the shapes you draw or doing right-click, it's not working when inside shadow-dom. and here is without shadow dom

Edit: If you try to click over color pickers that also won't work. Since the dialogs are not attached to shadow root so If you try opening any dialog it won't work (Example opening collaboration mode won't work as it opens dialog).

Please let me know If you need any more info about this.

[Wildhoney]

Events do work, but I suspect it's more an issue with <iframe /> rendering in the excalidraw library. Maybe you want to open a ticket with them to investigate?

I did a little look around and and found a thread that mentioned: "The basic gist is that each Hosted Fields iframe requires access to window.parent.frames, but when an iframe is added to the shadow dom, it is not added to window.frames, so the Hosted Fields iframes cannot initialize."

Perhaps the creators of excalidraw are doing something similar or related @ad1992?

[ad1992]

@Wildhoney I am not using Iframe to render inside excalidraw, You can check that in the above link as well. I have created an npm package which can be used to render inside host app itself, in case you want to check the code its here https://github.com/excalidraw/excalidraw-embed

[Wildhoney]

Sorry, I was referring to the dialogs that open, such as the share button. It seems all the buttons that don't do anything open and render their content in iframes, whereas the buttons that don't open iframes (such as create a circle) work perfectly well.

[Wildhoney]

Looking again, I suspect it's something in the excalidraw stylesheet, as putting the stylesheet outside of the shadow boundary causes it to show up: https://codesandbox.io/s/react-shadow-r8gwc?file=/src/index.js

Events are working either way though, so that's unrelated. It's just the styles for the modal don't get applied.

[ad1992]

Looking again, I suspect it's something in the excalidraw stylesheet, as putting the stylesheet outside of the shadow boundary causes it to show up: https://codesandbox.io/s/react-shadow-r8gwc?file=/src/index.js

Events are working either way though, so that's unrelated. It's just the styles for the modal don't get applied.

@Wildhoney Iframe is not used anywhere and in the above link, the context menu is opening but still shortcut link cmd+c/cmd+v keys don't work and the color picker also doesn't work when using shadow DOM. Not sure whats going on 🤔

[minaamshahid]

@ad1992 I believe it might be associated to how React handles events (pre React 17) and challenges with shadow dom encapsulation. Some info can be found in this issue