@query

The @query decorator provides a convenient way to query and cache references to elements within your custom element's DOM. It creates a getter that performs the query on first access and caches the results by default.

Usage

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

@customElement('user-profile')
export class UserProfile extends RadiantElement {
	// Query by data-ref (recommended)
	@query({ ref: 'avatar' }) avatar!: HTMLImageElement;
	
	// Query by CSS selector
	@query({ selector: 'button.action' }) submitButton!: HTMLButtonElement;
	
	// Query all matching elements
	@query({ ref: 'item', all: true }) items!: HTMLElement[];
}

Parameters

Parameter	Type	Required	Description
`selector`	`string`	One of `selector`/`ref`	CSS selector to match elements.
`ref`	`string`	One of `selector`/`ref`	Value of `data-ref` attribute to match.
`all`	`boolean`	No	Query for all matching elements (default: `false`).
`cache`	`boolean`	No	Cache the query result (default: `true`).

Feature Highlight

Caching Behavior

By default, queries are cached for performance. For dynamic content that changes frequently, you can disable caching to re-query on every access.

@query({ ref: 'dynamic-item', all: true, cache: false }) 
items!: HTMLElement[];

Type Safety

Use TypeScript's non-null assertion operator (!) for required elements, or the optional chaining operator (?) if the element might not be present.

@query({ ref: 'required-el' }) element!: HTMLElement;
@query({ ref: 'optional-el' }) optional?: HTMLElement;

Learn More

@querySelectorAll - Alternative for multiple elements.
RadiantElement - Learn about getRef and other utility methods.