Behavior of "Portal" component
Is it possible to use the "Portal" component, so that it won't create additional wrapper (div) around?
10 Replies
I don't think so
o i'm wrong: https://www.solidjs.com/docs/latest/api#portal
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
@bigmistqke are you sure? 
I don't see how prevent rendering an additional div here
oh do you just pass
I don't see how prevent rendering an additional div here
oh do you just pass isSVG?
okay no this doesn't worki didn't try it out tbh 😅
yea it doesn't work xD
it was my intuition that mount would do the trick, since then you given it a container element to render in, but that does not seem to be the case 🤷♂️
@core-team cc. As I understand that wrapper exists only for the sake of reactive scope, but in some situations is very annoying to have this extra div. Plus we have additional node.
It's there mostly for event delegation. It's easier to have a parent element to catch the event and forward it up when you can insert multiple children elements in the portal. If we used the mount element as delegate then you couldn't attach more than one portal to the same element.
I've been trying to think of ways to avoid this. Like maybe setting properties on the mount element that are specific to each portal. Like a unique id, but like following a pattern that the event delegation logic can follow. Also having no siblings makes things a lot simpler for addition removal as we don't need to diff the whole range.
Thanks for the explanation! I think I found a solution for this problem, but it's not very efficient from a "solid-js" perspective (I think). Glad to be wrong if so.
https://playground.solidjs.com/anonymous/fe29c6ef-8b4c-4656-ac41-c77249a37fdc
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
And if so, wouldn't it be a good idea to add an extra prop to the "Portal" component so that the user can control whether a wrapper is needed or not.