Portal

wybthon.portal¶

portal ¶

Portal component for rendering children into a different DOM container.

Use create_portal to render content outside of the current component's DOM ancestor while keeping it part of the same reactive ownership tree (so signals, effects, and context still work). Common use cases include modals, tooltips, and toast notifications.

Functions:

Name	Description
`create_portal`	Render children into a different DOM container.

create_portal ¶

create_portal(children: Union[VNode, List[VNode]], container: Any) -> VNode

Render children into a different DOM container.

Parameters:

Name	Type	Description	Default
`children`	`Union[VNode, List[VNode]]`	A single `VNode` or a list of them.	required
`container`	`Any`	An `Element` instance or a CSS selector string identifying the target DOM container.	required

Returns:

Type	Description
`VNode`	A `VNode` that, when mounted, mounts `children` into
`VNode`	`container` while remaining linked to the surrounding
`VNode`	component's reactive scope (signals, context, and lifecycle
`VNode`	hooks still apply).

What's in this module¶

create_portal renders its children into a different DOM container while keeping them logically inside the component tree (so context, ownership, and event delegation still work).

This is the right tool for modals, tooltips, popovers, and toast notifications that need to escape the visual layout of their parent.

Usage¶

from wybthon import component, create_portal, create_signal
from wybthon.html import button, div, p


@component
def Modal():
    open_, set_open = create_signal(False)

    def toggle(_e):
        set_open(not open_())

    return div(
        button("Open", on_click=toggle),
        Show(
            when=open_,
            children=lambda: create_portal(
                mount=document.body,
                children=lambda: div(
                    p("I'm in document.body!"),
                    button("Close", on_click=toggle),
                    class_="modal",
                ),
            ),
        ),
    )

mount accepts a DOM element or a CSS selector string.
The portal cleans up its content when its owner unmounts.
Events bubble through the React-like component tree, not the DOM tree, which is handy for keeping modal logic close to the trigger.