Portal element customization

[astahmer]

Hey, I'm working on a project that involves creating a widget, something that can be added to any website with just a script. Naturally, by doing so I need to scope as much as possible the widgets styling, to avoid any conflict with the host website.

I'm using Panda CSS for the styling, so I can do so with the config.cssVarRoot. This works fine for most of the widget styles but when using Ark-UI Portal (which is actually from Zag), the PortalProps do not allow customizing the element tag or className. So If I were to add my style tokens to a zag-portal and that host website also used zag and had tokens attached, it could create a conflict if used like this: cssVarRoot: ':where(.my-app-root, zag-portal)',

My current workaround is just taking the Portal component source code and inlining in my project, then just change that line to something like this
portalNode.current = doc.createElement('my-app-portal');

My question is: would it be worth it to add a way to customize that element, either its tag or by adding className on it, so that it can be more precisely targeted from outside ?

[segunadebayo]

That's an interesting idea. My worry is that this level of customization might not be possible in other frameworks since they ship their own Portal components making it slightly inconsistent

[segunadebayo]

@astahmer What you can do is to create your own portal element and pass it to the target prop.