@querySlot

The @querySlot decorator queries projected light-DOM elements assigned to a RadiantElement slot.

Use it when a component accepts content through literal <slot> tags and needs to inspect the assigned elements after projection.

Usage

import { RadiantElement, customElement, querySlot } from '@ecopages/radiant';
 
@customElement('shell-card')
export class ShellCard extends RadiantElement {
	@querySlot({ name: 'heading' }) heading!: HTMLHeadingElement | null;
	@querySlot() body!: HTMLParagraphElement | null;
 
	override render() {
		return (
			<article>
				<header>
					<slot name="heading" />
				</header>
				<div>
					<slot />
				</div>
			</article>
		);
	}
}

Parameters

Notes

• @querySlot returns elements only. Text nodes in projected content are ignored.
• Cache invalidation follows slot projection changes, including later direct-host child mutations.
• Use @query for selector or data-ref queries over the rendered light DOM subtree.