Provider controller
@provideContext · @onEvent
- count
- 2
- events
- 1
Initialized count at 2
Controller Context Visualizer
One context token shared across a mixed tree: a RadiantController provider on authored HTML, consumed by both another controller and a nested RadiantElement.
The provider host is plain DOM with data-controller. From there:
- a
RadiantControllerupdates authored markup imperatively with@onContextUpdate - a nested
RadiantElementre-renders from a selected slice with@contextSelector
Controller context
One RadiantController publishes context. A second controller updates authored DOM imperatively, while a nested RadiantElement re-renders from a selected slice.
Provider seeded context. Both consumers resolved their first value.
Consumer controller
@onContextUpdate
- count
- 2
- parity
- even
Initialized count at 2
Selector element
@customElement · @contextSelector
- count
- 0
- parity
- even
Waiting for updates
The Pattern
Context is not tied to custom-element hosts. A controller can @provideContext, descendants can consume it whether they are controllers or elements, and each consumer reacts in its own way — imperative DOM updates on one side, selected re-renders on the other.
That is the mixed-tree model: enhance authored markup with controllers, use custom elements where isolated rendering helps, keep one context graph across both.