What it demonstrates
A click updates one small component state. The value, its doubled, parity and distance derivations, the gauge, button states and the history feed all recompute and patch together through Lit's declarative render cycle.
Lit Counter
A reactive instrument streamed as explicit HTML.
Lit renders the custom element on the Worker and hydrates the same shadow root in the browser. No framework compiler is involved.
- Runtime
- Cloudflare Worker
- UI
- Lit element
- Build
- esbuild
signal.value
at origin
doubled
0
parity
even
|distance|
0
step size
history
1 of 9
- 01 0 init
Hydration path
The Worker emits Lit's hydratable declarative Shadow DOM. The browser resumes that exact tree and attaches listeners without replacing the server-rendered first paint.