@querySelectorAll

The @querySelectorAll decorator queries for multiple elements within your component using a CSS selector, returning them as an array. It converts the standard browser NodeList to a JavaScript array for easier manipulation.

Usage

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

@customElement('list-component')
export class ListComponent extends RadiantElement {
	@querySelectorAll('li')
	listItems!: HTMLLIElement[];
	
	connectedCallback() {
		super.connectedCallback();
		console.log(`Found ${this.listItems.length} list items`);
	}
}

Relationship to @query

The @querySelectorAll decorator is equivalent to using @query with all: true.

// These are equivalent:
@querySelectorAll('.item')
items1!: HTMLElement[];

@query({ selector: '.item', all: true })
items2!: HTMLElement[];

Learn More

@query - The recommended way to query elements.
RadiantElement - Base class for component-level APIs.