Component Model

A default content slot is a placeholder where a component renders whatever content its caller passed between its tags. The caller writes and owns that content; the component only chooses where, and whether, it appears.

A host-node reference is a container the framework fills with the real node it created for a rendered element, so code can focus, scroll or measure it. It is empty while output is described and filled once that output is committed.

Declared inputs are the named values a parent passes into a child to parameterize it. The parent owns each one and re-supplies it every render, so the child only reads: a write there never reaches the owner.

A definition is the reusable recipe: a function, a class or a compiled template. An instance is one live copy created where that definition is used, owning its own state. The output is the description the instance produces each update.

Either the parent passes a function down as an input and the child calls it, or the child declares a named output event that the parent binds a handler to. Both leave the state itself owned by the parent.

The nearest providing ancestor above the reader wins, so a closer provider overrides an outer one for its subtree only. With no provider above, the read yields a declared default, or should fail loudly when no sane default exists.

They share the code, not the data. Each call site gets its own state, derived values, effects and cleanup, owned by the calling component instance, so one caller's updates never reach the other's copy.

A portal changes only where the subtree's host output is attached — a container near the root, past clipping and stacking ancestors. Its place in the component tree is unchanged, so provided values, state and framework-level events follow the original parent.

Creation runs work that must happen once per instance - initial state, acquisitions, and the registration of their releases - and produces the first output. Updates only derive output from current inputs and state. Teardown runs the registered releases.

Because a component output resolves at its binding site: emitting invokes the handler bound where that child was used. The component tree carries no propagation path, so nothing continues upward on its own.

It is sugar for a pair: an input carrying the current value down, plus an output the child raises when it wants a different one, with the write back into the owner's state generated for you.

The child and the owner hold the same object, so a field write changes the owner's data with no notification, and readers disagree afterwards. Declared types describe shape, not writability, and a check runs when the value arrives, not on every later write.

Everything it does not consume: inputs and attributes it does not recognise, the caller's event bindings, projected content in the same named regions, and a handle to the underlying element. The wrapper adds only its own behaviour.

A scoped slot makes projected content a parameterised block: the receiving component invokes it, once or once per item, passing the values only it knows, while the caller still writes and owns the markup.

An imperative handle is a small object of named operations a component publishes — focus, reset, scroll to a row. It keeps the component's internal nodes and structure private, so the markup can be rewritten without breaking any caller.

An input declaration states the name, whether a value must be supplied, and what stands in when it is absent. Required-ness is checked either at build time or at runtime; a default applies only when the caller omits the input.

A transition interpolates between two observed values. An element attached already in its end state gives the host nothing to animate from, so the first output commits the start state and a later frame moves it to the end state.

Because an instance can leave several ways - removed, replaced at the same position, carried off with an ancestor, discarded mid-update - and only the instance knows what it acquired. Registration makes cleanup run on every path.

The declaration is data the framework reads before your code runs, so it can act, skip the call entirely, or register the listener the host needs - and the handler body stays about your domain rather than plumbing.

A wrapper gives handlers one uniform event shape across host and browser differences, plus a seam the framework controls. The cost is a second object: whatever it omits needs the underlying event, and its controls act on the framework's layer.

The runtime's propagation granularity, not the pattern. A coarse channel notifies every consumer in the subtree on any change; a provided fine-grained reactive value notifies only the computations that read the changed part; a provided plain collaborator notifies nobody.

The value's lifetime is the provider instance's lifetime: a new provider instance means a freshly created value, with none of the old one's accumulated state, caches or in-flight work. Descendants are torn down with it and rebuild everything derived.

Match the tool to what varies: project content when the difference is markup, wrap when the difference is behaviour around a whole subtree, and extract a reusable stateful unit when the difference is state and effects several components need separately.

Render one empty container the framework never fills, construct the widget onto it after commit, translate input changes into the widget's own update calls, forward its callbacks upward, and dispose it on teardown. The container's interior belongs to the widget.

Logical removal and physical teardown split apart: the instance and its output stay alive, marked as leaving, until something signals the animation finished. If that signal never arrives, teardown never runs and every removal strands a copy.

Handler identity reflects the runtime's execution model, not the caller's intent. Where the component body re-runs, a fresh function crosses the boundary every update; where the body runs once, one reference is passed for the instance's life.

Admit a value when many components read it, few write it, it changes slowly, and it is genuinely ambient to a whole subtree. Over-use hides each component's real dependencies and leaves nothing renderable without a scaffold of providers above it.

Sort by what the code reads and writes. Commands the declarative layer cannot express — focus, scroll, selection, playback, measurement, handing a node to a widget — are legitimate. Anything that writes displayed output or decides a render is refused.

Each forwarding level pays a cost: its contract advertises a value it never uses, and every rename edits every level. The remedies, restructuring the composition, providing the value to a subtree, or keeping it outside the tree, are chosen by reach, lifetime and discoverability.