To support Shadow DOM

[lhviet]

Describe the feature in detail (code, mocks, or screenshots encouraged)

The component is failed to be used in a Shadow DOM.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[huntabyte]

Is anyone familiar with Shadow DOM and what we need to do to support it? I imagine the issues are being caused by the document.getElementById. or document.addEventListener etc.

Or if someone could provide me a reproduction of it failing I could try to debug further for @next

[michAtEl]

Here is a reproduction:
https://stackblitz.com/edit/vitejs-vite-s8yevn5a?file=src%2FApp.svelte,index.h

When i drag the PaneResizer, the method startDragging calls getResizeHandleElement. getResizeHandleElement calls document.querySelector. This does not work inside a shadow dom.

Ideas how this could be fixed:

• Zag.js had a similar problem. There you can pass a function called getRootNode to machine. https://zagjs.com/overview/composition#custom-window-environment
• It is possible to get the root node with the method element.getRootNode(). This method can be called on every element inside the shadow dom. Probably this could be done by paneforge.

[michAtEl]

I tried to fix this issue but there are still problems.
https://github.com/michAtEl/paneforge/tree/next

There is a test project in packages/shadow-dom-test.

I added a prop called getRood to PaneGroup. getResizeHandleElement works.

There is an effect in paneforge.svelte.ts in line 610. Outside a shadow dom, this effect runs when I start to drag the resizer. The effect does not run when paneforge runs inside a shadow dom.

[huntabyte]

Before the changes are merged into the @next release, would one of you mind ensuring the following preview release meets your requirements so I know if there is anything else we need to add/fix:

npm i https://pkg.pr.new/svecosystem/paneforge/paneforge@1d8c1528a2107a74fab6925f3b567fe85835e659

You can view the documentation for setting the root node here: https://ed0479da.paneforge.pages.dev/docs/utils/config

@michAtEl

[michAtEl]

This does not work. Reproduction with PaneForgeConfig (with and without Shadow Dom): https://stackblitz.com/edit/vitejs-vite-qm3fnazy?file=src%2FApp.svelte I also tried this project on my machine (outside of Stackblitz).
Furthermore, paneforge does not work anymore without PaneForgeConfig: https://ed0479da.paneforge.pages.dev/docs

As far as i understand, in the example on https://ed0479da.paneforge.pages.dev/docs/utils/config getRoodNode() should use getRootNode(): const getRootNode = () => hostElement.getRootNode();.

Do we really need PaneForgeConfig to support shadow dom? The Component PaneGroup uses a div. Every element that belongs to the PaneGroup is a descendant of this div. Because of this, PaneForge could call querySelector() on the div that ist inserted by PaneGroup to find other elements of the group.

Most of the apps I program are embedded into a website. Therefore, multiple apps that use Paneforge may be embedded in the same HTML document. Because of this it could be that a certain ID appears several times in the HTML document. In order to avoid such problems with ids, I would actually prefer if paneforge (and all other libraries that I use) would work completely without ids.