Import
import { renderHost } from "@typed/ui/Dom";This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.
Signatures
export declare function renderHost<Element extends globalThis.Element>(): <const Options extends HostOptions<Element>, const Internal extends HostProps<Element>, const Content extends RenderableInput, const Fallback extends HostResult, const Host extends HostResult = never>(options: Options, host: HostOverride<RenderHostProps<Options, Internal>, Content, Host> | undefined, buildInternal: (helpers: InternalPropsHelpers<Options>) => Internal, content: Content, fallback: (props: RenderHostProps<Options, Internal>, content: Content) => Fallback) => HostComponent<Options | Host>;Why
Components can compute required props once, merge them with caller props, then delegate either to a custom host or to a native-template fallback. This exposes the boundary needed for external renderers without a framework adapter.
Ownership and lifetime
The returned component is lazy. Its Scope owns the chosen Effect/Fx result, merged listener/ref work, and only the render-event range that result emits. A custom host owns output it creates and must honor the supplied props.
Examples
import { renderHost } from "@typed/ui/Dom/Render"
import { html } from "@typed/template"
const renderButton = renderHost<HTMLButtonElement>()
const button = renderButton(
{ props: { class: "action" } },
undefined,
() => ({ type: "button" }),
"Save",
(props, content) => html`<button ...${props}>${content}</button>`
)Other public imports
These import paths expose the same declaration. Each page retains its own public name and signature.