Islands

Each card below is a separate Component with its own state and its own WebSocket update cycle. Bump one and only that card re-renders — the other, and this page, are untouched. Props flow in through setup().

Likes

Views

Open the network tab: bumping a card sends a patch scoped to that island only.

// a child Component — its own state, snapshot, and update cycle
class CounterCard extends Component {
  @locked label = "Count";   // ← <CounterCard label="Likes" /> lands here; "Count" is the default
  @expose count = 0;
  @expose bump() { this.count++; }
  // …render()…
}

// three independent islands — bumping one doesn't re-render the others or the page
<CounterCard key="likes" label="Likes" />
<CounterCard key="views" label="Views" />
<CounterCard key="shares" label="Shares" />