@dooboostore/simple-web-component 1.0.44 → 1.0.46

package/src/decorators/applyProperty.ts

@@ -34,9 +34,11 @@ export interface PropertyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type PropertySelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface PropertyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: PropertySelector;
   targetPropertyKey: string | symbol;
   options: PropertyOptions;
   type: 'property' | 'method';
@@ -50,15 +52,42 @@ export const PROPERTY_METADATA_KEY = Symbol.for('simple-web-component:property')
 
 /**
  * Resolve target elements based on selector and options
- * Handles special selectors ($this, $host, etc.) and CSS selectors
+ * Handles special selectors ($this, $host, etc.), CSS selectors, and function-based selectors
  * Returns HTMLElement[] but can include Window and Document for property access
  */
-export const resolvePropertyTargets = (inst: any, selector: string, options: PropertyOptions): any[] => {
+export const resolvePropertyTargets = (inst: any, selector: PropertySelector, options: PropertyOptions): any[] => {
   const conf = getElementConfig(inst);
   const currentWin = conf.window;
   const r = options.root || 'auto';
   const results: any[] = [];
 
+  // Resolve selector if it's a function
+  let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+    resolvedSelector = selector(inst, hostSet);
+  }
+
+  // If selector function returned elements directly, use them
+  if (resolvedSelector instanceof currentWin.Element) {
+    results.push(resolvedSelector);
+    return results;
+  }
+  if (resolvedSelector instanceof currentWin.NodeList) {
+    results.push(...Array.from(resolvedSelector));
+    return results;
+  }
+  if (Array.isArray(resolvedSelector)) {
+    results.push(...resolvedSelector);
+    return results;
+  }
+  if (resolvedSelector === null) {
+    return results;
+  }
+
+  // Handle string selector
+  const stringSelector = resolvedSelector as string;
+
   const applyRoot = (target: any) => {
     if (!target) return;
     if (r === 'auto') {
@@ -69,37 +98,37 @@ export const resolvePropertyTargets = (inst: any, selector: string, options: Pro
     }
   };
 
-  if (selector === '$this' || !selector) {
+  if (stringSelector === '$this' || !stringSelector) {
     applyRoot(inst);
-  } else if (selector === '$window') {
+  } else if (stringSelector === '$window') {
     results.push(currentWin);
-  } else if (selector === '$document') {
+  } else if (stringSelector === '$document') {
     results.push(currentWin.document);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    if (selector === '$host') applyRoot(hostSet.$host);
-    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
-    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
-    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
-    else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-    else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+    if (stringSelector === '$host') applyRoot(hostSet.$host);
+    else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+    else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
     else {
       if (r === 'shadow') {
-        const found = inst.shadowRoot?.querySelectorAll(selector);
+        const found = inst.shadowRoot?.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'light') {
-        const found = inst.querySelectorAll(selector);
+        const found = inst.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'all') {
-        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
-        const lMatch = inst.querySelectorAll(selector);
+        const sMatch = inst.shadowRoot?.querySelectorAll(stringSelector);
+        const lMatch = inst.querySelectorAll(stringSelector);
         if (sMatch) results.push(...sMatch);
         if (lMatch) results.push(...lMatch);
       } else {
-        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        const found = (inst.shadowRoot || inst).querySelectorAll(stringSelector);
         if (found) results.push(...found);
       }
     }
@@ -114,11 +143,12 @@ export const resolvePropertyTargets = (inst: any, selector: string, options: Pro
  * - @applyProperty('selector', 'propertyName') - Set property with explicit name
  * - @applyProperty('selector') - Use property name as target property name
  * - @applyProperty('selector', { name: 'propertyName' }) - Set property via options
+ * - @applyProperty((this, helper) => 'selector', 'propertyName') - Function-based selector
  * - Return null/undefined to skip setting
  */
-export function applyProperty(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function applyProperty(selector: string, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function applyProperty(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
+export function applyProperty(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
+export function applyProperty(selector: PropertySelector, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
+export function applyProperty(selector: PropertySelector, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     // ensureInit(target as any);
     
@@ -150,7 +180,7 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
     }
     metaList.push({
       propertyKey,
-      selector,
+      selector: selector as PropertySelector,
       targetPropertyKey,
       options: finalOptions,
       type: metaType
@@ -266,14 +296,16 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
  * - @property('selector', 'propertyName') - Bind to specific property
  * - @property('selector') - Use field name as property name
  * - @property('selector', options) - Bind with options
+ * - @property((this, helper) => 'selector', 'propertyName') - Function-based selector
  * - @property - Bare decorator (binds to $this with field name)
  * 
  * Note: This decorator is for FIELDS ONLY. For methods, use @setProperty.
  */
+export function property(target: Object, propertyKey: string | symbol): void;
 export function property(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function property(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): PropertyDecorator;
-export function property(selector: string, options?: PropertyOptions): PropertyDecorator;
-export function property(selectorOrTarget?: string | Object, targetPropertyKeyOrOptions?: any, optionsOrDescriptor?: any): any {
+export function property(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): PropertyDecorator;
+export function property(selector: PropertySelector, options?: PropertyOptions): PropertyDecorator;
+export function property(selectorOrTarget?: PropertySelector | Object, targetPropertyKeyOrOptions?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @property
   if (optionsOrDescriptor !== undefined && (typeof targetPropertyKeyOrOptions === 'string' || typeof targetPropertyKeyOrOptions === 'symbol')) {
     return applyProperty('$this', undefined as any, {})(selectorOrTarget as Object, targetPropertyKeyOrOptions, optionsOrDescriptor as PropertyDescriptor);
@@ -293,6 +325,7 @@ export function property(selectorOrTarget?: string | Object, targetPropertyKeyOr
  * - @setProperty('selector', 'propertyName') - Set specific property
  * - @setProperty('selector') - Use method name as property name
  * - @setProperty('selector', options) - Set with options
+ * - @setProperty((this, helper) => 'selector', 'propertyName') - Function-based selector
  * - @setProperty - Bare decorator (sets on $this with method name)
  * 
  * Note: This decorator is for METHODS ONLY. For fields, use @property.
@@ -303,9 +336,9 @@ export function property(selectorOrTarget?: string | Object, targetPropertyKeyOr
  *   return true;
  * }
  */
-export function setProperty(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
-export function setProperty(selector: string, options?: PropertyOptions): MethodDecorator;
-export function setProperty(selectorOrOptions?: string | PropertyOptions, targetPropertyKeyOrOptions?: any, optionsOrUndefined?: PropertyOptions): MethodDecorator {
+export function setProperty(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
+export function setProperty(selector: PropertySelector, options?: PropertyOptions): MethodDecorator;
+export function setProperty(selectorOrOptions?: PropertySelector | PropertyOptions, targetPropertyKeyOrOptions?: any, optionsOrUndefined?: PropertyOptions): MethodDecorator {
   // With selector
   if (typeof selectorOrOptions === 'string') {
     return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions as any, optionsOrUndefined as PropertyOptions) as MethodDecorator;

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

@@ -1,6 +1,5 @@
-import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
-import {Observable, Subject} from '@dooboostore/core';
-import {debounceTime, throttleTime, distinctUntilChanged} from '@dooboostore/core/message/operators';
+import {ActionExpression, FunctionUtils, ReflectUtils, Subject} from '@dooboostore/core';
+import {debounceTime, distinctUntilChanged, throttleTime} from '@dooboostore/core/message/operators';
 import {getAddEventListenerMetadata} from './addEventListener';
 import {findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
@@ -12,9 +11,8 @@ import {SwcUtils} from '../utils/Utils';
 import {DOM_EVENT_NAMES, HTML_TAG_ENTRIES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
 import {HelperHostSet, HostSet, InjectSituationType} from '../types';
-import {ConvertUtils, ElementApply, NodeSlot} from '@dooboostore/core-web';
+import {ConvertUtils, ElementApply} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
-import {findAllApplySlotMetadata} from "./applySlot";
 import {findAllStateMetadata} from "./state";
 import {findAllPropertyMetadata} from "./applyProperty";
 
@@ -385,14 +383,15 @@ export const elementDefine =
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const bMethods = findAllOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const bMethods = findAllOnConnectedBeforeMetadata(this);//.filter(it => useSsr ? !it.options.ssrFirst : true);
           // console.log('beforeConnected', bMethods)
           for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
 
           // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
           //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
-          const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          // const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
           const shadowMode = conf?.useShadow || targetConnectedList.find(it => it.options.useShadow)?.options.useShadow;
           // console.log('--------->', this.tagName, shadowMode && !this.shadowRoot)
           if (shadowMode && !this.shadowRoot) {
@@ -467,7 +466,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);
@@ -508,7 +509,7 @@ export const elementDefine =
               const unifiedHandler = async (event: Event) => {
                 for (const meta of sortedMetaList) {
                   const {selector, options} = meta;
-                  const matchedEl = (event.target as HTMLElement).closest(selector);
+                  const matchedEl = (event.target as HTMLElement)?.closest(selector);
                   if (matchedEl && (br as any).contains(matchedEl)) {
                     // Apply filter if specified
                     if (options.filter) {
@@ -537,6 +538,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 +567,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 +610,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
@@ -632,9 +654,7 @@ export const elementDefine =
 
           if (originalConnected) await (originalConnected.apply(this));
 
-          const aMethods = findAllOnConnectedAfterMetadata(this).filter(it => {
-            return useSsr ? !it.options.ssrFirst : true;
-          });
+          const aMethods = findAllOnConnectedAfterMetadata(this); //.filter(it => { return useSsr ? !it.options.ssrFirst : true; });
           // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
           for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);