@dooboostore/simple-web-component 1.0.44 → 1.0.45

package/src/decorators/applyNode.ts

@@ -15,6 +15,8 @@ import {ElementApply} from "@dooboostore/core-web";
  */
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove' | 'clearChildren';
 
+export type ApplyNodeSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface ApplyNodeOptions {
   position?: ApplyNodePosition;
   root?: SwcRootType;
@@ -37,12 +39,39 @@ export interface ApplyNodeOptions {
 
 export interface ApplyNodeMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: ApplyNodeSelector;
   options: ApplyNodeOptions;
 }
 
 export const APPLY_NODE_METADATA_KEY = Symbol.for('simple-web-component:apply-node');
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: ApplyNodeSelector, inst: any, win: Window): string | HTMLElement | null => {
+  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 result.length > 0 ? (result[0] as HTMLElement) : null;
+    }
+    if (Array.isArray(result)) {
+      return result.length > 0 ? (result[0] as HTMLElement) : null;
+    }
+    if (result === null) {
+      return null;
+    }
+    // result must be a string at this point
+    return result as unknown as string;
+  }
+  return selector as string;
+};
+
 // const normalizeNodes = (res: any, doc: Document): Node[] => {
 //   const items = Array.isArray(res) ? res : [res];
 //   return items.map(it => {
@@ -110,14 +139,14 @@ const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string,
  * - applyNode(selector, options) - Apply to specific selector
  * - applyNode(options) - Apply to $this (current element)
  */
-export function applyNode(selector: string, options?: ApplyNodeOptions): MethodDecorator;
+export function applyNode(selector: ApplyNodeSelector, options?: ApplyNodeOptions): MethodDecorator;
 export function applyNode(options: ApplyNodeOptions): MethodDecorator;
-export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOptions?: ApplyNodeOptions): MethodDecorator {
+export function applyNode(selectorOrOptions: ApplyNodeSelector | ApplyNodeOptions, maybeOptions?: ApplyNodeOptions): MethodDecorator {
   // Determine selector and options based on overload
-  let selector: string;
+  let selector: ApplyNodeSelector;
   let options: ApplyNodeOptions;
 
-  if (typeof selectorOrOptions === 'string') {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
     // First overload: applyNode(selector, options)
     selector = selectorOrOptions;
     options = maybeOptions || {position: 'replaceChildren'};
@@ -156,15 +185,29 @@ export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOpt
           return t;
         };
 
-        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);
+        // Resolve selector if it's a function
+        const resolved = resolveSelector(selector, this, currentWin);
+        
+        // If selector function returned an element directly, use it
+        if (resolved instanceof currentWin.Element) {
+          return applyRoot(resolved);
+        }
+        if (resolved === null) {
+          return null;
+        }
+
+        // Handle string selector
+        const stringSelector = resolved as string;
+
+        if (stringSelector === '$this') return applyRoot(this);
+        if (stringSelector === '$host') return applyRoot(hostSet.$host);
+        if (stringSelector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (stringSelector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (stringSelector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (stringSelector === '$lastHost') return applyRoot(hostSet.$lastHost);
 
         const targetRoot = applyRoot(this);
-        return targetRoot ? targetRoot.querySelector(selector) : null;
+        return targetRoot ? targetRoot.querySelector(stringSelector) : null;
       };
 
       const targetEl = getTarget();
@@ -233,17 +276,17 @@ export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOpt
  * - replaceChildrenNode(options) - Replace children of $this (current element)
  * - @replaceChildrenNode - Bare decorator, replaces children of $this
  */
-export function replaceChildren(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function replaceChildren(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function replaceChildren(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function replaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function replaceChildren(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function replaceChildren(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @replaceChildrenNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'replaceChildren'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
 }
@@ -256,17 +299,17 @@ export function replaceChildren(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - clearChildrenNode(options) - Clear children of $this (current element)
  * - @clearChildrenNode - Bare decorator, clears children of $this
  */
-export function clearChildrenNode(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function clearChildrenNode(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function clearChildrenNode(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function clearChildrenNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function clearChildrenNode(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function clearChildrenNode(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @clearChildrenNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'clearChildren'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
 }
@@ -282,17 +325,17 @@ export const clearNode = clearChildrenNode;
  * - innerHtmlNode(options) - Set innerHTML of $this (current element)
  * - @innerHtmlNode - Bare decorator, sets innerHTML of $this
  */
-export function innerHtml(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerHtml(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerHtml(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtml(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtml(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
 }
@@ -308,17 +351,17 @@ export function innerHtml(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'p
  * - innerHtmlLightNode(options) - Set innerHTML of $this in light DOM
  * - @innerHtmlLightNode - Bare decorator, sets innerHTML of $this in light DOM
  */
-export function innerHtmlLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerHtmlLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtmlLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtmlLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
 }
@@ -332,17 +375,17 @@ export function innerHtmlLight(selectorOrOptions?: string | Omit<ApplyNodeOption
  * - innerHtmlShadowNode(options) - Set innerHTML of $this in shadow DOM
  * - @innerHtmlShadowNode - Bare decorator, sets innerHTML of $this in shadow DOM
  */
-export function innerHtmlShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerHtmlShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtmlShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtmlShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
 }
@@ -356,17 +399,17 @@ export function innerHtmlShadow(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - innerTextNode(options) - Set innerText of $this (current element)
  * - @innerTextNode - Bare decorator, sets innerText of $this
  */
-export function innerText(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerText(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerText(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerText(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerText(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerText(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
 }
@@ -380,17 +423,17 @@ export function innerText(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'p
  * - innerTextLightNode(options) - Set innerText of $this in light DOM
  * - @innerTextLightNode - Bare decorator, sets innerText of $this in light DOM
  */
-export function innerTextLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerTextLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerTextLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerTextLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
 }
@@ -403,17 +446,17 @@ export function innerTextLight(selectorOrOptions?: string | Omit<ApplyNodeOption
  * - innerTextShadowNode(options) - Set innerText of $this in shadow DOM
  * - @innerTextShadowNode - Bare decorator, sets innerText of $this in shadow DOM
  */
-export function innerTextShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerTextShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerTextShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerTextShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
 }
@@ -426,17 +469,17 @@ export function innerTextShadow(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - beforeEndNode(options) - Append to $this (current element)
  * - @beforeEndNode - Bare decorator, appends to $this
  */
-export function insertBeforeEnd(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function insertBeforeEnd(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertBeforeEnd(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertBeforeEnd(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEnd(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEnd(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
 }
@@ -450,17 +493,17 @@ export function insertBeforeEnd(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - beforeEndLightNode(options) - Append to $this in light DOM
  * - @beforeEndLightNode - Bare decorator, appends to $this in light DOM
  */
-export function insertBeforeEndLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertBeforeEndLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEndLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEndLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
 }
@@ -474,17 +517,17 @@ export function insertBeforeEndLight(selectorOrOptions?: string | Omit<ApplyNode
  * - beforeEndShadowNode(options) - Append to $this in shadow DOM
  * - @beforeEndShadowNode - Bare decorator, appends to $this in shadow DOM
  */
-export function insertBeforeEndShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertBeforeEndShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEndShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEndShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
 }
@@ -498,17 +541,17 @@ export function insertBeforeEndShadow(selectorOrOptions?: string | Omit<ApplyNod
  * - afterBeginNode(options) - Prepend to $this (current element)
  * - @afterBeginNode - Bare decorator, prepends to $this
  */
-export function insertAfterBegin(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function insertAfterBegin(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertAfterBegin(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertAfterBegin(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertAfterBegin(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertAfterBegin(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @afterBeginNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'afterBegin'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
 }
@@ -522,17 +565,17 @@ export function insertAfterBegin(selectorOrOptions?: string | Omit<ApplyNodeOpti
  * - afterBeginLightNode(options) - Prepend to $this in light DOM
  * - @afterBeginLightNode - Bare decorator, prepends to $this in light DOM
  */
-export function insertAfterBeginLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertAfterBeginLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertAfterBeginLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertAfterBeginLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertAfterBeginLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertAfterBeginLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @afterBeginLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'afterBegin', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
 }
@@ -546,17 +589,17 @@ export function insertAfterBeginLight(selectorOrOptions?: string | Omit<ApplyNod
  * - replaceChildrenLightNode(options) - Replace children of $this in light DOM
  * - @replaceChildrenLightNode - Bare decorator, replaces children of $this in light DOM
  */
-export function replaceChildrenLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function replaceChildrenLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function replaceChildrenLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function replaceChildrenLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function replaceChildrenLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function replaceChildrenLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @replaceChildrenLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'replaceChildren', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
 }
@@ -569,17 +612,17 @@ export function replaceChildrenLight(selectorOrOptions?: string | Omit<ApplyNode
  * - clearChildrenLightNode(options) - Clear children of $this in light DOM
  * - @clearChildrenLightNode - Bare decorator, clears children of $this in light DOM
  */
-export function clearChildrenLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function clearChildrenLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function clearChildrenLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function clearChildrenLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function clearChildrenLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function clearChildrenLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @clearChildrenLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'clearChildren', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
 }

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,15 @@ 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, 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 +324,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 +335,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;