@reactiveField

The @reactiveField decorator creates a reactive internal state field that triggers component updates when changed. Unlike @reactiveProp, it does not synchronize with HTML attributes, making it ideal for purely internal component state.

Usage

import { RadiantElement, customElement, reactiveField, onUpdated } from '@ecopages/radiant';

@customElement('counter-display')
export class CounterDisplay extends RadiantElement {
	@reactiveField private count = 0;
	
	@onUpdated('count')
	updateDisplay() {
		this.textContent = `Count: ${this.count}`;
	}
	
	increment() {
		this.count++; // Triggers update
	}
}

Parameters

This decorator takes no parameters.

@reactiveField vs @reactiveProp

Use @reactiveField for internal component state that should not be exposed to the outside world via HTML attributes.

Learn More

• @reactiveProp - For public API with attribute sync.
• @onUpdated - React to field changes.