@dooboostore/simple-web-component 1.0.44 → 1.0.45

package/src/decorators/applyStyle.ts

@@ -15,17 +15,86 @@ export interface StyleApplyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type StyleSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface StyleApplyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: StyleSelector;
   action: StyleAction;
   options: StyleApplyOptions;
 }
 
 export const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: StyleSelector, inst: any, win: Window): string | HTMLElement[] => {
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    
+    if (result instanceof win.Element) {
+      return [result as HTMLElement];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result) as HTMLElement[];
+    }
+    if (Array.isArray(result)) {
+      return result as HTMLElement[];
+    }
+    if (result === null) {
+      return [];
+    }
+    return result as string;
+  }
+  return selector as string;
+};
+
+/**
+ * Get target elements from selector
+ */
+const getTargetElements = (selector: StyleSelector, inst: any, win: Window, root: string): HTMLElement[] => {
+  const resolved = resolveSelector(selector, inst, win);
+  
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+
+  const stringSelector = resolved as string;
+  const targetEls: HTMLElement[] = [];
+  const host = inst as unknown as HTMLElement;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+
+  const applyRoot = (t: any) => {
+    if (!t || !(t instanceof win.HTMLElement)) return;
+    targetEls.push(t);
+  };
+
+  if (stringSelector === '$this' || !stringSelector) applyRoot(host);
+  else if (stringSelector === '$host') applyRoot(hostSet.$host);
+  else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+  else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost);
+  else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+  else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+  else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
+  else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
+  else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+  else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+  else {
+    const targetRoot = root === 'auto' ? (host.shadowRoot || host) : (root === 'shadow' ? host.shadowRoot : host);
+    if (targetRoot) {
+      const found = targetRoot.querySelectorAll(stringSelector);
+      if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+    }
+  }
+
+  return targetEls;
+};
+
 function createStyleDecorator(action: StyleAction) {
-  return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {
+  return (selector: StyleSelector, options: StyleApplyOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;
@@ -62,30 +131,7 @@ function createStyleDecorator(action: StyleAction) {
             const host = this as unknown as HTMLElement;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = options.root || 'auto';
-            const targetEls: HTMLElement[] = [];
-
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-
-            if (selector === '$this' || !selector) applyRoot(host);
-            else if (selector === '$host') applyRoot(hostSet.$host);
-            else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-            else if (selector === '$appHost') applyRoot(hostSet.$appHost);
-            else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-            else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-            else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
-            else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
-            else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-            else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
-            else {
-              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-              if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-              }
-            }
+            const targetEls = getTargetElements(selector, this, win, r);
 
             targetEls.forEach(targetEl => {
               if (options.filter && !options.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
@@ -138,7 +184,7 @@ function createStyleDecorator(action: StyleAction) {
 }
 
 export function applyStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function applyStyle(selector: string, action?: StyleAction, options?: StyleApplyOptions): MethodDecorator;
+export function applyStyle(selector: StyleSelector, action?: StyleAction, options?: StyleApplyOptions): MethodDecorator;
 export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @applyStyle
   if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
@@ -157,7 +203,7 @@ export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, op
 }
 
 export function setStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function setStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
+export function setStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
 export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @setStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
@@ -172,7 +218,7 @@ export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, des
 }
 
 export function updateStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function updateStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
+export function updateStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
 export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @updateStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
@@ -187,7 +233,7 @@ export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any,
 }
 
 export function removeStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function removeStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
+export function removeStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
 export function removeStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @removeStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {

package/src/decorators/elementDefine.ts

@@ -467,7 +467,9 @@ export const elementDefine =
           const nonDelegateListeners: typeof addEventListenerList = [];
 
           addEventListenerList.forEach(meta => {
-            if (meta.options.delegate && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
+            // Function-based selectors cannot be used with delegate listeners
+            const isStringSelector = typeof meta.selector === 'string';
+            if (meta.options.delegate && isStringSelector && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
               delegateListeners.push(meta);
             } else {
               nonDelegateListeners.push(meta);
@@ -537,6 +539,25 @@ export const elementDefine =
             const opts = {capture: options.capture, once: options.once, passive: options.passive};
             const bindTargets: EventTarget[] = [];
             const r = options.root || 'auto';
+            
+            // Resolve selector if it's a function
+            let resolvedSelector: string | null = null;
+            if (typeof selector === 'function') {
+              const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+              const result = selector(this, hostSet);
+              if (typeof result === 'string') {
+                resolvedSelector = result;
+              } else if (result instanceof currentWin.Element) {
+                bindTargets.push(result as EventTarget);
+              } else if (result instanceof currentWin.NodeList) {
+                bindTargets.push(...Array.from(result as EventTarget[]));
+              } else if (Array.isArray(result)) {
+                bindTargets.push(...(result as EventTarget[]));
+              }
+            } else {
+              resolvedSelector = selector;
+            }
+            
             const applyRootOption = (target: any) => {
               if (!target) return;
               if (r === 'auto') {
@@ -547,31 +568,33 @@ export const elementDefine =
               }
             };
 
-            if (selector === '$window') bindTargets.push(currentWin);
-            else if (selector === '$document') bindTargets.push(currentWin.document);
-            else if (selector === '$host') applyRootOption(helperHostSet.$host);
-            else if (selector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
-            else if (selector === '$appHost') applyRootOption(helperHostSet.$appHost);
-            else if (selector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
-            else if (selector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
-            else if (selector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
-            else if (selector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
-            else if (selector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
-            else if (selector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
-            else if (selector === '$this' || !selector) applyRootOption(this);
-            else {
-              const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-              if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-              else if (r === 'light') searchRoots.push(this as any);
-              else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-              else if (r === 'all') {
-                searchRoots.push(this as any);
-                if (this.shadowRoot) searchRoots.push(this.shadowRoot);
-              }
+            if (resolvedSelector) {
+              if (resolvedSelector === '$window') bindTargets.push(currentWin);
+              else if (resolvedSelector === '$document') bindTargets.push(currentWin.document);
+              else if (resolvedSelector === '$host') applyRootOption(helperHostSet.$host);
+              else if (resolvedSelector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
+              else if (resolvedSelector === '$appHost') applyRootOption(helperHostSet.$appHost);
+              else if (resolvedSelector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
+              else if (resolvedSelector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
+              else if (resolvedSelector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
+              else if (resolvedSelector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
+              else if (resolvedSelector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
+              else if (resolvedSelector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
+              else if (resolvedSelector === '$this' || !resolvedSelector) applyRootOption(this);
+              else {
+                const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+                if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+                else if (r === 'light') searchRoots.push(this as any);
+                else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+                else if (r === 'all') {
+                  searchRoots.push(this as any);
+                  if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+                }
 
-              searchRoots.forEach(sr => {
-                sr.querySelectorAll(selector).forEach(el => bindTargets.push(el));
-              });
+                searchRoots.forEach(sr => {
+                  sr.querySelectorAll(resolvedSelector).forEach(el => bindTargets.push(el));
+                });
+              }
             }
 
             bindTargets.forEach(t => {
@@ -588,7 +611,7 @@ export const elementDefine =
                 if (options.preventDefault) event.preventDefault();
                 const currentHostSet = SwcUtils.getHostSet(this as any);
                 const args = {event, ...currentHostSet, $el: t, $root: t};
-                await (this as any)[meta.propertyKey](event, {currentHostSet, $$matchedElement: event.currentTarget}, args);
+                await (this as any)[meta.propertyKey](event, {currentHostSet, $matchedElement: event.currentTarget}, args);
               };
               
               // Create event stream with Observable-based operators

package/src/decorators/emitCustomEvent.ts

@@ -3,6 +3,8 @@ import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 
+export type EmitCustomEventSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface EmitCustomEventBaseOptions {
   bubbles?: boolean;
   composed?: boolean;
@@ -30,7 +32,7 @@ type Options = (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEvent
 
 export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: EmitCustomEventSelector;
   type: string;
   options: Options;
 }
@@ -38,7 +40,7 @@ export interface EmitCustomEventMetadata {
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
 
 export function emitCustomEvent(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function emitCustomEvent(selector: string, type: string, options?: Options): MethodDecorator;
+export function emitCustomEvent(selector: EmitCustomEventSelector, type: string, options?: Options): MethodDecorator;
 export function emitCustomEvent(type: string, options?: Options): MethodDecorator;
 /**
  * @emitCustomEvent decorator to dispatch custom events to a target.
@@ -46,6 +48,7 @@ export function emitCustomEvent(type: string, options?: Options): MethodDecorato
  * Usage:
  * - @emitCustomEvent('$this', 'event-name', options) - Emit from $this
  * - @emitCustomEvent('$appHost', 'event-name', options) - Emit from $appHost
+ * - @emitCustomEvent((this, helper) => '.button', 'event-name', options) - Function-based selector
  * - @emitCustomEvent('event-name', options) - Emit from $this (defaults to $this)
  * - @emitCustomEvent('event-name') - Emit from $this with no options
  */
@@ -56,7 +59,7 @@ export function emitCustomEvent(selectorOrTarget: any, typeOrPropertyKey?: any,
   }
 
   // Case 2: With selector and type - @emitCustomEvent('selector', 'event-name', options)
-  if (typeof selectorOrTarget === 'string' && typeof typeOrPropertyKey === 'string') {
+  if ((typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') && typeof typeOrPropertyKey === 'string') {
     return createEmitDecorator(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor as Options);
   }
 
@@ -69,7 +72,7 @@ export function emitCustomEvent(selectorOrTarget: any, typeOrPropertyKey?: any,
   throw new Error('Invalid @emitCustomEvent usage');
 }
 
-function createEmitDecorator(selector: string, type: string, options?: Options) {
+function createEmitDecorator(selector: EmitCustomEventSelector, type: string, options?: Options) {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
 
@@ -98,47 +101,68 @@ function createEmitDecorator(selector: string, type: string, options?: Options)
           cancelable: fullOptions.cancelable
         });
 
-        const hostSet = SwcUtils.getHostSet(this as any);
         const conf = getElementConfig(this);
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this as any);
 
         const eventTargets: EventTarget[] = [];
-        if (selector === '$window') eventTargets.push(currentWin);
-        else if (selector === '$document') eventTargets.push(currentWin.document);
-        else if (selector === '$host') {
-          if (hostSet.$host) eventTargets.push(hostSet.$host);
-        } else if (selector === '$parentHost') {
-          if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selector === '$appHost') {
-          if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selector === '$firstHost') {
-          if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selector === '$lastHost') {
-          if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selector === '$firstAppHost') {
-          if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selector === '$lastAppHost') {
-          if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selector === '$hosts') {
-          hostSet.$hosts.forEach(h => eventTargets.push(h));
-        } else if (selector === '$appHosts') {
-          hostSet.$appHosts.forEach(h => eventTargets.push(h));
-        } else if (selector === '$this' || !selector) {
-          eventTargets.push(this as any);
+        
+        // Resolve selector if it's a function
+        let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+        if (typeof selector === 'function') {
+          resolvedSelector = selector(this, hostSet);
+        }
+
+        // If selector function returned elements directly, use them
+        if (resolvedSelector instanceof currentWin.Element) {
+          eventTargets.push(resolvedSelector as EventTarget);
+        } else if (resolvedSelector instanceof currentWin.NodeList) {
+          eventTargets.push(...Array.from(resolvedSelector as EventTarget[]));
+        } else if (Array.isArray(resolvedSelector)) {
+          eventTargets.push(...(resolvedSelector as EventTarget[]));
+        } else if (resolvedSelector === null) {
+          // No targets
         } else {
-          const r = fullOptions.root || 'auto';
-          const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-          if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-          else if (r === 'light') searchRoots.push(this as any);
-          else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-          else if (r === 'all') {
-            searchRoots.push(this as any);
-            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          // Handle string selector
+          const stringSelector = resolvedSelector as string;
+          
+          if (stringSelector === '$window') eventTargets.push(currentWin);
+          else if (stringSelector === '$document') eventTargets.push(currentWin.document);
+          else if (stringSelector === '$host') {
+            if (hostSet.$host) eventTargets.push(hostSet.$host);
+          } else if (stringSelector === '$parentHost') {
+            if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+          } else if (stringSelector === '$appHost') {
+            if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+          } else if (stringSelector === '$firstHost') {
+            if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+          } else if (stringSelector === '$lastHost') {
+            if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+          } else if (stringSelector === '$firstAppHost') {
+            if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+          } else if (stringSelector === '$lastAppHost') {
+            if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+          } else if (stringSelector === '$hosts') {
+            hostSet.$hosts.forEach(h => eventTargets.push(h));
+          } else if (stringSelector === '$appHosts') {
+            hostSet.$appHosts.forEach(h => eventTargets.push(h));
+          } else if (stringSelector === '$this' || !stringSelector) {
+            eventTargets.push(this as any);
+          } else {
+            const r = fullOptions.root || 'auto';
+            const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+            if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+            else if (r === 'light') searchRoots.push(this as any);
+            else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+            else if (r === 'all') {
+              searchRoots.push(this as any);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+            }
+
+            searchRoots.forEach(sr => {
+              sr.querySelectorAll(stringSelector).forEach(el => eventTargets.push(el));
+            });
           }
-
-          searchRoots.forEach(sr => {
-            sr.querySelectorAll(selector).forEach(el => eventTargets.push(el));
-          });
         }
 
         eventTargets.forEach(t => {

package/src/decorators/query.ts

@@ -1,29 +1,44 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SwcQueryOptions, HelperHostSet } from '../types';
+
+export interface QueryOptions extends SwcQueryOptions {
+  /**
+   * Filter function to determine whether to include the element.
+   * If it returns false, the element is skipped.
+   */
+  filter?: (target: HTMLElement, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+}
 
 export interface QueryMetadata {
   propertyKey: string | symbol;
-  selector: string;
-  options: SwcQueryOptions ;
+  selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null);
+  options: QueryOptions ;
 }
 
 export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
 
 export function query(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
-export function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;
-export function query(options?: SwcQueryOptions): PropertyDecorator;
+export function query(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: QueryOptions): PropertyDecorator;
+export function query(options?: QueryOptions): PropertyDecorator;
 /**
  * @query decorator to inject a single element into a class property.
+ * 
+ * Supports both string selectors and function-based selectors:
+ * - String selector: @query('#my-element')
+ * - Function selector: @query((currentThis, helper) => currentThis.shadowRoot?.querySelector('.item'))
+ * 
+ * Supports filtering:
+ * - @query('#my-element', { filter: (target, meta) => target.hasAttribute('active') })
  */
-export function query(selectorOrTarget?: string | Object, optionsOrPropertyKey?: SwcQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+export function query(selectorOrTarget?: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null) | Object, optionsOrPropertyKey?: QueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
   // Bare decorator: @query
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
     throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
       if (descriptor !== undefined) {
         throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
@@ -35,67 +50,114 @@ export function query(selectorOrTarget?: string | Object, optionsOrPropertyKey?:
         queries = [];
         ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
       }
-      queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey as SwcQueryOptions || {} });
+      queries.push({ propertyKey, selector: selectorOrTarget as any, options: optionsOrPropertyKey as QueryOptions || {} });
 
       Object.defineProperty(targetObj, propertyKey, {
         get(this: HTMLElement) {
           ensureInit(this);
-          const selector = selectorOrTarget;
-
-          const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
-          const applyRoot = (t: any) => {
-            if (!t || !(t instanceof HTMLElement)) return t;
-            if (r === 'auto') return t.shadowRoot || t;
-            if (r === 'shadow') return t.shadowRoot;
-            if (r === 'light') return t;
-            if (r === 'all') return t.shadowRoot || t; 
-            return t;
-          };
-
-          // --- Special Selectors: HostSet ---
-          const hostSet = SwcUtils.getHostSet(this);
-          if (selector === '$this') return applyRoot(this);
-          if (selector === '$host') return applyRoot(hostSet.$host);
-          if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
-          if (selector === '$appHost') return applyRoot(hostSet.$appHost);
-          if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
-          if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
-          if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
-          if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
-
-          // --- Special Selectors: Env ---
           const config = getElementConfig(this);
           const win = config?.window || window;
-          if (selector === '$window') return win;
-          if (selector === '$document') return win.document;
+          const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+          
+          // Resolve selector - can be string or function
+          let resolvedSelector: string;
+          let resolvedElement: HTMLElement | null = null;
+          
+          if (typeof selectorOrTarget === 'function') {
+            const result = (selectorOrTarget as any)(this, hostSet);
+            // If function returns a Node/Element, return it directly
+            if (result instanceof win.Node || result instanceof win.Element) {
+              resolvedElement = result instanceof win.HTMLElement ? (result as HTMLElement) : null;
+            }
+            // If function returns NodeList or Element[], return first element
+            else if (result instanceof win.NodeList || Array.isArray(result)) {
+              resolvedElement = result.length > 0 && result[0] instanceof win.HTMLElement ? (result[0] as HTMLElement) : null;
+            }
+          } else {
+            resolvedSelector = selectorOrTarget;
 
-          // --- Standard Selectors ---
-          if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-          if (r === 'light') return this.querySelector(selector);
-          if (r === 'all') {
-            const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-            return shadowMatch || this.querySelector(selector);
+            const r = (optionsOrPropertyKey as QueryOptions)?.root || 'auto';
+            const applyRoot = (t: any) => {
+              if (!t || !(t instanceof HTMLElement)) return t;
+              if (r === 'auto') return t.shadowRoot || t;
+              if (r === 'shadow') return t.shadowRoot;
+              if (r === 'light') return t;
+              if (r === 'all') return t.shadowRoot || t; 
+              return t;
+            };
+
+            // --- Special Selectors: HostSet ---
+            if (resolvedSelector === '$this') resolvedElement = applyRoot(this);
+            else if (resolvedSelector === '$host') resolvedElement = applyRoot(hostSet.$host);
+            else if (resolvedSelector === '$parentHost') resolvedElement = applyRoot(hostSet.$parentHost);
+            else if (resolvedSelector === '$appHost') resolvedElement = applyRoot(hostSet.$appHost);
+            else if (resolvedSelector === '$firstHost') resolvedElement = applyRoot(hostSet.$firstHost);
+            else if (resolvedSelector === '$lastHost') resolvedElement = applyRoot(hostSet.$lastHost);
+            else if (resolvedSelector === '$firstAppHost') resolvedElement = applyRoot(hostSet.$firstAppHost);
+            else if (resolvedSelector === '$lastAppHost') resolvedElement = applyRoot(hostSet.$lastAppHost);
+            // --- Special Selectors: Env ---
+            else if (resolvedSelector === '$window') return win;
+            else if (resolvedSelector === '$document') return win.document;
+            // --- Standard Selectors ---
+            else {
+              if (r === 'shadow') resolvedElement = this.shadowRoot ? (this.shadowRoot.querySelector(resolvedSelector) as HTMLElement | null) : null;
+              else if (r === 'light') resolvedElement = this.querySelector(resolvedSelector) as HTMLElement | null;
+              else if (r === 'all') {
+                const shadowMatch = this.shadowRoot ? (this.shadowRoot.querySelector(resolvedSelector) as HTMLElement | null) : null;
+                resolvedElement = shadowMatch || (this.querySelector(resolvedSelector) as HTMLElement | null);
+              }
+              else resolvedElement = ((this.shadowRoot || this).querySelector(resolvedSelector) as HTMLElement | null);
+            }
           }
-          return (this.shadowRoot || this).querySelector(selector);
+
+          // Apply filter if provided
+          if (resolvedElement instanceof win.HTMLElement && (optionsOrPropertyKey as QueryOptions)?.filter) {
+            const shouldInclude = (optionsOrPropertyKey as QueryOptions).filter!(resolvedElement, { currentThis: this, helper: hostSet });
+            if (!shouldInclude) {
+              return null;
+            }
+          }
+
+          return resolvedElement;
         },
         set(this: HTMLElement, nv: any) {
           ensureInit(this);
           if (nv === null || nv === undefined) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith('$') && selector !== '$this') return;
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            
+            // Resolve selector - can be string or function
+            if (typeof selectorOrTarget === 'function') {
+              // Get the element from function and remove it
+              const result = (selectorOrTarget as any)(this, hostSet);
+              if (result instanceof win.Element) {
+                (result as Element).remove();
+              } else if (result instanceof win.NodeList || Array.isArray(result)) {
+                const el = result.length > 0 ? result[0] : null;
+                if (el instanceof win.Element) {
+                  (el as Element).remove();
+                }
+              }
+              return;
+            }
+            
+            const resolvedSelector = selectorOrTarget;
+            
+            if (resolvedSelector.startsWith('$') && resolvedSelector !== '$this') return;
 
-            const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
+            const r = (optionsOrPropertyKey as QueryOptions)?.root || 'auto';
             const targets: Element[] = [];
 
             if (r === 'shadow') {
-              if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
+              if (this.shadowRoot?.querySelector(resolvedSelector)) targets.push(this.shadowRoot.querySelector(resolvedSelector)!);
             } else if (r === 'light') {
-              if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+              if (this.querySelector(resolvedSelector)) targets.push(this.querySelector(resolvedSelector)!);
             } else if (r === 'all') {
-              if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
-              if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+              if (this.shadowRoot?.querySelector(resolvedSelector)) targets.push(this.shadowRoot.querySelector(resolvedSelector)!);
+              if (this.querySelector(resolvedSelector)) targets.push(this.querySelector(resolvedSelector)!);
             } else {
-              const el = (this.shadowRoot || this).querySelector(selector);
+              const el = (this.shadowRoot || this).querySelector(resolvedSelector);
               if (el) targets.push(el);
             }