Chapter 36

/

Layout

Host

Layout

An element handed to somebody else's code, with a lifetime. mount: runs once with the node, update: again whenever the state it reads changes, and cleanup: when the page, branch or list item it belongs to leaves.

Host(mount: …, update: …, cleanup: …)

Example

Host(tag: "canvas", mount: (node) => node.getContext("2d"), cleanup: (ctx) => log("gone"))

Renders with the class wf-host, stable across releases, so a stylesheet may target it.

Props of Host
Prop Type Meaning
mount: Any

(node) => … — run once with the element, giving back whatever the library hands over
update: Any

(handle) => … — run again whenever the state it reads changes
cleanup: Any

(handle) => … — run when what owns it leaves, so nothing is left behind
tag: String

The element to make, div by default

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.