Activity

<Activity mode="visible" | "hidden"> keeps its children alive while hidden. The state, the DOM nodes and the listeners stay; the content is removed from sight with display: none on its top-level elements. While hidden, its effects run their cleanups and wait, its memos keep their last values, and updates are applied once when it is shown again. Focus and the scroll positions of the hidden subtree are restored on show.

import { Activity } from "@shadow-js/web";

<Activity mode={tab() === "chat" ? "visible" : "hidden"}>
  <Chat />
</Activity>;

A hidden Activity that is mounted hidden renders its DOM once and runs no effects until it is shown. On the server the children are rendered visible; the client hides them when it hydrates.