stenciljs

StencilJS component patterns for this workspace. Use when creating new Stencil components, adding reactive state with @stencil/store or @ssv/tanstack.stencil-store, implementing ReactiveController from @ssv/stencil-core, or working with output targets. Trigger words - component, stencil, @Component, store, reactive controller, SsvElement, output target, web component, useSelector, useAtom, tanstack.

Write and review Vitest tests for Stencil hooks and controllers in this workspace. Use when writing *.spec.ts files, working with TestHost/DomTestHost, using mount/mountDom APIs, testing lifecycle phases, context resolution, or reactive controllers. Trigger words - spec, test, TestHost, mount, mountDom, useEffect, useQuery, useSelector, vitest, lifecycle test, controller test, it.each, afterConnect.

Reference for Stencil component initialization order across rendering modes (SSR, client navigation, and hydration). Use when writing code that depends on parent-child initialization sequence, context resolution, `hostConnected` or `hostWillLoad` timing, or `globalThis`/`window` availability in Stencil components. Trigger words — initialization order, hydration, SSR init, hostConnected order, context timing, window in SSR, globalThis, bottom-up, top-down. Do not use for general component authoring, output-target configuration, or non-Stencil frameworks.