${count.get()}
`; } } ``` ### Binding-level tracking Use `watch()` when a signal change should process only one binding: ```ts import {LitElement, html} from 'lit'; import {SignalWatcher, signal, watch} from '@lit-labs/signals'; const count = signal(0); class PinpointCounter extends SignalWatcher(LitElement) { render() { return html`${watch(count)}
`; } } ``` ### Reactions outside reactive updates Use `this.effect()` for signal reactions independent of a reactive update. Effects run after pending DOM and element updates by default. Set `beforeUpdate: true` when the callback must run first: ```ts this.effect( () => console.log(this.aSignal.get()), {beforeUpdate: true}, ); ``` For direct signal interpolation and custom tag composition, read [Signals](references/signals.md). ## Control SSR Lifecycle Behavior Explicitly Lit SSR 3.3 can invoke `connectedCallback()` during server rendering. Enable it globally before rendering: ```js globalThis.litSsrCallConnectedCallback = true; ``` From SSR 4.1, `LitElementRenderer` also provides configuration for disabling SSR or calling `connectedCallback()` on `LitElement` subclasses. Make this an explicit renderer choice; do not assume browser connection semantics during server rendering. SSR 4.1's DOM shim includes `ShadowRoot`, includes `document` in event paths, and implements `MutationObserver`, `ResizeObserver`, and `IntersectionObserver`. Code that touches those APIs can use the shim, but should still be tested on the server-render path. ## Compile Only Eligible Templates Register `compileLitTemplates()` as a TypeScript pre-transform. JavaScript is also handled when it passes through the TypeScript transform. ```js import typescript from '@rollup/plugin-typescript'; import {compileLitTemplates} from '@lit-labs/compiler'; export default { plugins: [ typescript({ transformers: { before: [compileLitTemplates()], }, }), ], }; ``` The compiler optimizes only well-formed templates whose `html` tag comes directly from `lit` or `lit-html`. - Renamed named imports are eligible. - Namespace imports are eligible. - Re-exported tags are not eligible. - Dynamic bindings inside `textarea`, `title`, `style`, or `script` make a template ineligible. See [SSR and compiler](references/ssr-and-compiler.md) for import examples and the emitted shape to verify. ## Apply Core Typing and Rendering Improvements When working with current core Lit behavior: - build or mutate a typed `ClassInfo` object before passing it to `classMap()`; - pass an `SVGElement` directly as the container to `render()`; - expect standard-decorated private reactive accessors to schedule updates; - preserve generic directive result types so template type checking retains rendered-type information; - install synchronous development-warning suppression immediately after an import when needed, because warnings are deferred to the following microtask. The complete examples and constraints are in [Core components](references/core-components.md). ## Validation Checklist Before completing a Lit change: - Confirm which package owns the behavior. - For SSR 4.x, audit custom renderers for the generator-interface break. - For compiler use, confirm direct tag provenance and eligible binding locations. - Check compiler output for `_$litType$` and `values`. - For signals, distinguish component updates, one-binding updates, and independent effects. - For reflected defaults, test attribute removal as well as initialization. - For server lifecycle callbacks, set the flag or renderer configuration before rendering. - Keep `@types/node` explicit in SSR 4.0 projects when the consumer needs Node typings, because it is a ranged peer dependency.