@dooboostore/simple-web-component 1.0.44 → 1.0.46

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/lifecycles.ts

@@ -8,24 +8,25 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
-export const ON_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component');
+export const ON_CONNECTED_BODY_METADATA_KEY = Symbol.for('simple-web-component:on-connected-body');
 export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
 export const ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for('simple-web-component:on-completed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
-export interface InnerHtmlOptions {
-  ssrFirst?: boolean;
+export interface OnConnectedAppendChildOptions {
+  // ssrFirst?: boolean;
   // replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
+  order?: number;
 }
-export interface InnerHtmlMetadata {
+export interface OnConnectedAppendChildOptionsMetadata {
   propertyKey: string | symbol;
-  options: InnerHtmlOptions;
+  options: OnConnectedAppendChildOptions;
 }
 
 export interface OnConnectedOptions {
-  ssrFirst?: boolean;
+  // ssrFirst?: boolean;
   order?: number;
 }
 export interface OnConnectedMetadata {
@@ -87,33 +88,33 @@ export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: stri
 }
 
 
-function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
-  const decorator = (options?: LifecycleOptions): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(metadataKey, list, constructor);
-      }
-      list.push({ propertyKey, order: options?.order ?? 0 });
-    };
-  };
-
-  // Support both @decorator and @decorator() syntax
-  return Object.assign(
-    (target: Object, propertyKey: string | symbol) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(metadataKey, list, constructor);
-      }
-      list.push({ propertyKey, order: 0 });
-    },
-    { __isDecorator: true, __decorator: decorator }
-  ) as any;
-}
+// function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
+//   const decorator = (options?: LifecycleOptions): MethodDecorator => {
+//     return (target: Object, propertyKey: string | symbol) => {
+//       const constructor = target.constructor;
+//       let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+//       if (!list) {
+//         list = [];
+//         ReflectUtils.defineMetadata(metadataKey, list, constructor);
+//       }
+//       list.push({ propertyKey, order: options?.order ?? 0 });
+//     };
+//   };
+//
+//   // Support both @decorator and @decorator() syntax
+//   return Object.assign(
+//     (target: Object, propertyKey: string | symbol) => {
+//       const constructor = target.constructor;
+//       let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+//       if (!list) {
+//         list = [];
+//         ReflectUtils.defineMetadata(metadataKey, list, constructor);
+//       }
+//       list.push({ propertyKey, order: 0 });
+//     },
+//     { __isDecorator: true, __decorator: decorator }
+//   ) as any;
+// }
 
 // Helper to handle both @decorator and @decorator() syntax
 function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
@@ -193,19 +194,19 @@ export function onConnectedCompleted(optionOrTarget?: LifecycleOptions | Object,
 
 
 
-const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+const decorator = (options: OnConnectedAppendChildOptions, target: Object, propertyKey: string | symbol) => {
   const constructor = target.constructor;
-  let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(ON_CONNECTED_METADATA_KEY, constructor);
+  let list = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor);
   if (!list) {
     list = [];
-    ReflectUtils.defineMetadata(ON_CONNECTED_METADATA_KEY, list, constructor);
+    ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
   }
   list.push({ propertyKey, options });
 };
 
-export function onConnectedShadow(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
-export function onConnectedShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
-export function onConnectedShadow(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBodyShadow(options: Omit<OnConnectedAppendChildOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedBodyShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedBodyShadow(optionOrTarget: Omit<OnConnectedAppendChildOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
@@ -215,9 +216,9 @@ export function onConnectedShadow(optionOrTarget: Omit<InnerHtmlOptions, 'useSha
   };
 }
 
-export function onConnectedLight(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
-export function onConnectedLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
-export function onConnectedLight(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBodyLight(options: Omit<OnConnectedAppendChildOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedBodyLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedBodyLight(optionOrTarget: Omit<OnConnectedAppendChildOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: false}, optionOrTarget!, propertyKey);
   }
@@ -226,15 +227,15 @@ export function onConnectedLight(optionOrTarget: Omit<InnerHtmlOptions, 'useShad
     decorator({...optionOrTarget??{}, useShadow: false}, target, propertyKey);
   };
 }
-export function onConnected(options: InnerHtmlOptions): MethodDecorator;
-export function onConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBody(options: OnConnectedAppendChildOptions): MethodDecorator;
+export function onConnectedBody(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedBody(optionOrTarget: OnConnectedAppendChildOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({}, optionOrTarget!, propertyKey);
   }
   // parameter option @decorator()
   return (target: Object, propertyKey: string | symbol) => {
-    decorator((optionOrTarget as InnerHtmlOptions) || {}, target, propertyKey);
+    decorator((optionOrTarget as OnConnectedAppendChildOptions) || {}, target, propertyKey);
   };
 }
 
@@ -248,27 +249,27 @@ export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): Life
   return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 };
 
-export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
+export const findAllOnConnectedMetadata = (target: any): OnConnectedAppendChildOptionsMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
   // Sort by order (default 0 if not specified)
   return [...results].sort((a, b) => {
-    const orderA = (a.options as any)?.order ?? 0;
-    const orderB = (b.options as any)?.order ?? 0;
+    const orderA = a.options?.order ?? 0;
+    const orderB = b.options?.order ?? 0;
     return orderA - orderB;
   });
 };
 
 export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };
 
 export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

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);
             }