Solidjs popover component not working as expected

[shirshendubhowmick]

I am trying to use the Popover component with SolidJs. I using it as described in the example.

However I am noticing that a few part of the component is not behaving as expected. For example the positioning and the arrow functionality is not working.

Upon investigating I found the component uses some CSS variables and the value for those CSS variable is not set.

An example

I am using this to build a chrome extension. However if I try this setup in a codesandbox project it works perfectly fine.

Can anyone give any hints on might be causing these variables from not being set ?

Just some information I am using tailwind also and there is no issue with tailwind variables. I have verified its not like that variables are getting overwritten, its more of its not defined / set.

[cschroeter]

@shirshendubhowmick

It's a bit hard to tell from the outside but I think it could be related to the underlying DOM.
We have a component called Envirionment that you could give a shot

[shirshendubhowmick]

Yes thats true. I forgot to mention in my original post. Since its a chrome extension I am rendering it in a shadow DOM.

Now that you mentioned about Environment I found a warning message in my console which says:

[@zag-js/dismissable] node is `null` or `undefined`

I will go through the link you have mentioned and share my findings here,

[shirshendubhowmick]

@cschroeter

I can confirm after going through the doc of Environment, I was able to fix the issue. All I needed to do set the pass the shadowRoot to Environment.Root.

Thanks for your quick reply.