Dockview inside shadowdom

[husayt]

I had tried to run dockview (or even GridviewComponent from dockview-core) inside shadow-dom and grid constantly sets itself as 0 width and height. I am wondering if it is something i am missing, or grid is not supposed to run inside shadowDom

[mathuo]

To be honest, I've never tried it - but I will try it and get back to you. If it doesn't work I would assume it's something trival the library is missing to allow it to work.

[mathuo]

I've created a quick CodeSandbox here rendering a DockviewReact component within a shadow DOM using the dockview library.

My very quick example seems to render dimensions ok, are you able to adjust this sandbox to make the dimensions not work as you see?

[husayt]

@mathuo this looks really promising. I have been trying to do with GridViewComponent without React.
Here is non shadow dom example.
https://codesandbox.io/p/sandbox/romantic-leakey-f9pfp6?file=%2Fsrc%2Fapp.ts%3A79%2C23

Couldn't get it working inside shadowDom. Is there something special that GridViewComponent does, which DockView doesn't?

[husayt]

@mathuo here is the the same example but with ShadowDom implemented as Lit webcomponent. As you can see it doesn't work. Am I missing something?

https://codesandbox.io/p/devbox/shadowgridview-9lf936

[mathuo]

@husayt I have a feeling this is the offending line of code... explicitly checks for "within document.body" which would fail for shadow DOM elements.

My example works I assume because its first size by chance is non-zero whereas yours is probably zero (just depends in what order you attach things to the DOM etc I guess - either way it's a bug).

Raised this PR to fix the issue and have deployed an experimental build 0.0.0-experimental-fd25fdd-20240109 on npm which can be installed through npm install [email protected].

When I use this new version with your example I can see some components do not grow in height as required (outside of the dockview library scope). There are obviously many ways to get the height to work but I just used some display: flex and flex-grow: 1 to achieve this but after that it seems to works nicely - my fork here.

Let me know your thoughts.

Before:

After:

[husayt]

This works great. Thank you @mathuo . Need to mention that really impressed with the architecture of this library, having the core done in pure js makes it very easy to build vue, svelte or lit wrappers on top of it. Maybe this example will help to get this started with lit.

[husayt]

just noticed this PR. It is certainly the right direction. I will be very keen to try vue version and help with getting that right

https://github.com/mathuo/dockview/pull/387/files

[husayt]

This works as of 1.9.0. Thank you @mathuo