Add scoped selector context functions

src/app.ts

@@ -62,18 +62,34 @@ class App {
     };
   }
 
-  private getComponentContext({ mounted, triggered }: { mounted: Hook; triggered: Hook }): Context {
+  private static scopeSelector(selectors: string): string {
+    return `${selectors}:not([data-component] ${selectors})`;
+  }
+
+  private getComponentContext({
+    element,
+    mounted,
+    triggered,
+  }: {
+    element: HTMLElement;
+    mounted: Hook;
+    triggered: Hook;
+  }): Context {
     return {
       ...this.context,
       onTriggered: triggered.addListener,
       onMounted: mounted.addListener,
+      scopedQuerySelector: (selectors: string) =>
+        element.querySelector(App.scopeSelector(selectors)),
+      scopedQuerySelectorAll: (selectors: string) =>
+        document.querySelectorAll(App.scopeSelector(selectors)),
     };
   }
 
   private createComponent(element: HTMLElement, args: LoaderArguments): void {
     const mounted = App.createHook();
     const triggered = App.createHook();
-    const context = this.getComponentContext({ mounted, triggered });
+    const context = this.getComponentContext({ element, mounted, triggered });
 
     this.components.set(element, 'created');
 

src/context.ts

@@ -7,6 +7,26 @@ export type Context = {
   useEventHistory: EventStore['history'];
   onMounted: (fn: () => void) => void;
   onTriggered: (fn: () => void) => void;
+  scopedQuerySelector<K extends keyof HTMLElementTagNameMap>(
+    selectors: K,
+  ): HTMLElementTagNameMap[K] | null;
+  scopedQuerySelector<K extends keyof SVGElementTagNameMap>(
+    selectors: K,
+  ): SVGElementTagNameMap[K] | null;
+  scopedQuerySelector<K extends keyof MathMLElementTagNameMap>(
+    selectors: K,
+  ): MathMLElementTagNameMap[K] | null;
+  scopedQuerySelector<E extends Element = Element>(selectors: string): E | null;
+  scopedQuerySelectorAll<K extends keyof HTMLElementTagNameMap>(
+    selectors: K,
+  ): NodeListOf<HTMLElementTagNameMap[K]>;
+  scopedQuerySelectorAll<K extends keyof SVGElementTagNameMap>(
+    selectors: K,
+  ): NodeListOf<SVGElementTagNameMap[K]>;
+  scopedQuerySelectorAll<K extends keyof MathMLElementTagNameMap>(
+    selectors: K,
+  ): NodeListOf<MathMLElementTagNameMap[K]>;
+  scopedQuerySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
 };
 
 export type AppContext = Pick<Context, 'app' | 'dispatchEvent' | 'useEventHistory'>;