createQuerySlot

createQuerySlot creates a lazy accessor for projected light-DOM elements assigned to a render-owning RadiantElement slot. It is the functional equivalent of the @querySlot decorator.

Usage

import { RadiantElement } from '@ecopages/radiant';
import { createQuerySlot } from '@ecopages/radiant/helpers/create-query-slot';
 
class InfoCard extends RadiantElement {
	#heading = createQuerySlot<HTMLHeadingElement>(this, { name: 'heading' });
	#body = createQuerySlot<HTMLParagraphElement>(this, {});
 
	get heading() {
		return this.#heading.value;
	}
 
	get body() {
		return this.#body.value;
	}
 
	override render() {
		return (
			<article>
				<header><slot name="heading" /></header>
				<div><slot /></div>
			</article>
		);
	}
}
 
customElements.define('info-card', InfoCard);

Parameters

createQuerySlot<T>(host, options) accepts:

QuerySlotConfig

Return Value

Returns a QuerySlotResult<T> object with a single .value getter:

• When all is false: returns T | null.
• When all is true: returns T (an array), or an empty array if nothing is projected.

Cache Invalidation

Cached results are automatically invalidated when the host's slotProjectionVersion counter changes. This happens when slot content is added, removed, or re-projected. Set cache: false to re-query on every .value read.

const allHeaders = createQuerySlot<HTMLHeadingElement[]>(this, {
	name: 'heading',
	all: true,
	cache: false,
});

Learn More

• @querySlot — Decorator equivalent.
• createQuery — Query by CSS selector or data-ref attribute.
• Slots — How slot projection works in a render-owning RadiantElement host.