Native Refs

This example shows the native Lit^sx ref model in one place:

component instance refs
forwarded DOM refs
imperative handles published with useExpose(...)

The important idea is that ref is one channel, but the receiving component chooses what that channel resolves to.

What To Notice

the parent always writes ref={...}
HostRefCard leaves the ref alone, so the parent gets the component instance
ForwardedDomInput forwards the ref to an inner input
ImperativeHandleInput publishes a stable command API instead of exposing raw internals

When To Use Each Shape

use the component instance when the component itself is the public API
use a DOM ref when the component is intentionally a thin wrapper around one element
use an imperative handle when you want a stable command surface such as focus(), clear(), or value()

Next