@dooboostore/simple-web-component 1.0.44 → 1.0.45

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -8953,7 +8953,7 @@ function emitCustomEvent(selectorOrTarget, typeOrPropertyKey, optionsOrDescripto
   if (typeof selectorOrTarget === "object" && typeof typeOrPropertyKey === "string" && typeof optionsOrDescriptor === "object" && "value" in optionsOrDescriptor) {
     throw new Error(`@emitCustomEvent decorator cannot be used on properties. (Property: ${String(typeOrPropertyKey)})`);
   }
-  if (typeof selectorOrTarget === "string" && typeof typeOrPropertyKey === "string") {
+  if ((typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") && typeof typeOrPropertyKey === "string") {
     return createEmitDecorator(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor);
   }
   if (typeof selectorOrTarget === "string" && typeOrPropertyKey !== "string") {
@@ -8986,58 +8986,72 @@ function createEmitDecorator(selector, type, options) {
           composed: fullOptions.composed,
           cancelable: fullOptions.cancelable
         });
-        const hostSet = SwcUtils.getHostSet(this);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
         const eventTargets = [];
-        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);
+        let resolvedSelector = selector;
+        if (typeof selector === "function") {
+          resolvedSelector = selector(this, hostSet);
+        }
+        if (resolvedSelector instanceof currentWin.Element) {
+          eventTargets.push(resolvedSelector);
+        } else if (resolvedSelector instanceof currentWin.NodeList) {
+          eventTargets.push(...Array.from(resolvedSelector));
+        } else if (Array.isArray(resolvedSelector)) {
+          eventTargets.push(...resolvedSelector);
+        } else if (resolvedSelector === null) {
         } else {
-          const r = fullOptions.root || "auto";
-          const searchRoots = [];
-          if (r === "auto")
-            searchRoots.push(this.shadowRoot || this);
-          else if (r === "light")
-            searchRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot)
-            searchRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            searchRoots.push(this);
-            if (this.shadowRoot)
+          const stringSelector = resolvedSelector;
+          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);
+          } else {
+            const r = fullOptions.root || "auto";
+            const searchRoots = [];
+            if (r === "auto")
+              searchRoots.push(this.shadowRoot || this);
+            else if (r === "light")
+              searchRoots.push(this);
+            else if (r === "shadow" && this.shadowRoot)
               searchRoots.push(this.shadowRoot);
+            else if (r === "all") {
+              searchRoots.push(this);
+              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) => {
           if (fullOptions.filter && !fullOptions.filter(t, detail, { currentThis: this, helper: hostSet })) {
@@ -9113,7 +9127,7 @@ function query(selectorOrTarget, optionsOrPropertyKey, descriptor) {
   if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
     throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
   }
-  if (typeof selectorOrTarget === "string") {
+  if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
     return (targetObj, propertyKey, descriptor2) => {
       if (descriptor2 !== void 0) {
         throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
@@ -9128,75 +9142,110 @@ function query(selectorOrTarget, optionsOrPropertyKey, descriptor) {
       Object.defineProperty(targetObj, propertyKey, {
         get() {
           ensureInit(this);
-          const selector = selectorOrTarget;
-          const r = optionsOrPropertyKey?.root || "auto";
-          const applyRoot = (t) => {
-            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;
-          };
-          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);
           const config = getElementConfig(this);
           const win = config?.window || window;
-          if (selector === "$window")
-            return win;
-          if (selector === "$document")
-            return win.document;
-          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 hostSet = SwcUtils.getHelperAndHostSet(win, this);
+          let resolvedSelector;
+          let resolvedElement = null;
+          if (typeof selectorOrTarget === "function") {
+            const result = selectorOrTarget(this, hostSet);
+            if (result instanceof win.Node || result instanceof win.Element) {
+              resolvedElement = result instanceof win.HTMLElement ? result : null;
+            } else if (result instanceof win.NodeList || Array.isArray(result)) {
+              resolvedElement = result.length > 0 && result[0] instanceof win.HTMLElement ? result[0] : null;
+            }
+          } else {
+            resolvedSelector = selectorOrTarget;
+            const r = optionsOrPropertyKey?.root || "auto";
+            const applyRoot = (t) => {
+              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;
+            };
+            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);
+            else if (resolvedSelector === "$window")
+              return win;
+            else if (resolvedSelector === "$document")
+              return win.document;
+            else {
+              if (r === "shadow")
+                resolvedElement = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
+              else if (r === "light")
+                resolvedElement = this.querySelector(resolvedSelector);
+              else if (r === "all") {
+                const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
+                resolvedElement = shadowMatch || this.querySelector(resolvedSelector);
+              } else
+                resolvedElement = (this.shadowRoot || this).querySelector(resolvedSelector);
+            }
+          }
+          if (resolvedElement instanceof win.HTMLElement && optionsOrPropertyKey?.filter) {
+            const shouldInclude = optionsOrPropertyKey.filter(resolvedElement, { currentThis: this, helper: hostSet });
+            if (!shouldInclude) {
+              return null;
+            }
           }
-          return (this.shadowRoot || this).querySelector(selector);
+          return resolvedElement;
         },
         set(nv) {
           ensureInit(this);
           if (nv === null || nv === void 0) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith("$") && selector !== "$this")
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            if (typeof selectorOrTarget === "function") {
+              const result = selectorOrTarget(this, hostSet);
+              if (result instanceof win.Element) {
+                result.remove();
+              } else if (result instanceof win.NodeList || Array.isArray(result)) {
+                const el = result.length > 0 ? result[0] : null;
+                if (el instanceof win.Element) {
+                  el.remove();
+                }
+              }
+              return;
+            }
+            const resolvedSelector = selectorOrTarget;
+            if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
               return;
             const r = optionsOrPropertyKey?.root || "auto";
             const targets = [];
             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);
             }
@@ -9221,7 +9270,7 @@ function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
   if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
     throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
   }
-  if (typeof selectorOrTarget === "string") {
+  if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
     return (targetObj, propertyKey, descriptor2) => {
       if (descriptor2 !== void 0) {
         throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
@@ -9236,86 +9285,124 @@ function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
       Object.defineProperty(targetObj, propertyKey, {
         get() {
           ensureInit(this);
-          const selector = selectorOrTarget;
-          const r = optionsOrPropertyKey?.root || "auto";
-          const applyRoot = (t) => {
-            if (!t)
-              return [];
-            const items = Array.isArray(t) ? t : [t];
-            const results = [];
-            items.forEach((it) => {
-              if (!(it instanceof HTMLElement)) {
-                results.push(it);
-                return;
-              }
-              if (r === "auto")
-                results.push(it.shadowRoot || it);
-              else {
-                if (r === "light" || r === "all")
-                  results.push(it);
-                if ((r === "shadow" || r === "all") && it.shadowRoot)
-                  results.push(it.shadowRoot);
-              }
-            });
-            return results;
-          };
-          const hostSet = SwcUtils.getHostSet(this);
-          if (selector === "$hosts")
-            return applyRoot(hostSet.$hosts);
-          if (selector === "$appHosts")
-            return applyRoot(hostSet.$appHosts);
-          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);
           const config = getElementConfig(this);
           const win = config?.window || window;
-          if (selector === "$window")
-            return [win];
-          if (selector === "$document")
-            return [win.document];
-          if (selector === "$this")
-            return applyRoot(this);
-          if (r === "shadow")
-            return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-          if (r === "light")
-            return Array.from(this.querySelectorAll(selector));
-          if (r === "all") {
-            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            const lNodes = Array.from(this.querySelectorAll(selector));
-            return [...sNodes, ...lNodes];
+          const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+          let resolvedSelector;
+          let resolvedElements = [];
+          if (typeof selectorOrTarget === "function") {
+            const result = selectorOrTarget(this, hostSet);
+            if (result instanceof win.NodeList) {
+              resolvedElements = Array.from(result).filter((el) => el instanceof win.HTMLElement);
+            } else if (Array.isArray(result)) {
+              resolvedElements = result.filter((el) => el instanceof win.HTMLElement);
+            }
+          } else {
+            resolvedSelector = selectorOrTarget;
+            const r = optionsOrPropertyKey?.root || "auto";
+            const applyRoot = (t) => {
+              if (!t)
+                return [];
+              const items = Array.isArray(t) ? t : [t];
+              const results = [];
+              items.forEach((it) => {
+                if (!(it instanceof HTMLElement)) {
+                  results.push(it);
+                  return;
+                }
+                if (r === "auto")
+                  results.push(it.shadowRoot || it);
+                else {
+                  if (r === "light" || r === "all")
+                    results.push(it);
+                  if ((r === "shadow" || r === "all") && it.shadowRoot)
+                    results.push(it.shadowRoot);
+                }
+              });
+              return results;
+            };
+            if (resolvedSelector === "$hosts")
+              resolvedElements = applyRoot(hostSet.$hosts).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$appHosts")
+              resolvedElements = applyRoot(hostSet.$appHosts).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$host")
+              resolvedElements = applyRoot(hostSet.$host).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$parentHost")
+              resolvedElements = applyRoot(hostSet.$parentHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$appHost")
+              resolvedElements = applyRoot(hostSet.$appHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$firstHost")
+              resolvedElements = applyRoot(hostSet.$firstHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$lastHost")
+              resolvedElements = applyRoot(hostSet.$lastHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$firstAppHost")
+              resolvedElements = applyRoot(hostSet.$firstAppHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$lastAppHost")
+              resolvedElements = applyRoot(hostSet.$lastAppHost).filter((el) => el instanceof HTMLElement);
+            else if (resolvedSelector === "$window")
+              return [win];
+            else if (resolvedSelector === "$document")
+              return [win.document];
+            else if (resolvedSelector === "$this")
+              resolvedElements = applyRoot(this).filter((el) => el instanceof HTMLElement);
+            else {
+              if (r === "shadow")
+                resolvedElements = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+              else if (r === "light")
+                resolvedElements = Array.from(this.querySelectorAll(resolvedSelector));
+              else if (r === "all") {
+                const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+                const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
+                resolvedElements = [...sNodes, ...lNodes];
+              } else
+                resolvedElements = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
+            }
           }
-          const root = this.shadowRoot || this;
-          return Array.from(root.querySelectorAll(selector));
+          if (optionsOrPropertyKey?.filter) {
+            resolvedElements = resolvedElements.filter((el) => {
+              if (!(el instanceof win.HTMLElement))
+                return true;
+              return optionsOrPropertyKey.filter(el, { currentThis: this, helper: hostSet });
+            });
+          }
+          return resolvedElements;
         },
         set(nv) {
           ensureInit(this);
           if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith("$") && selector !== "$this")
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            if (typeof selectorOrTarget === "function") {
+              const result = selectorOrTarget(this, hostSet);
+              if (result instanceof win.NodeList) {
+                Array.from(result).forEach((el) => {
+                  if (el instanceof win.Element)
+                    el.remove();
+                });
+              } else if (Array.isArray(result)) {
+                result.forEach((el) => {
+                  if (el instanceof win.Element)
+                    el.remove();
+                });
+              }
+              return;
+            }
+            const resolvedSelector = selectorOrTarget;
+            if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
               return;
             const r = optionsOrPropertyKey?.root || "auto";
             let targets = [];
             if (r === "shadow")
-              targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+              targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
             else if (r === "light")
-              targets = Array.from(this.querySelectorAll(selector));
+              targets = Array.from(this.querySelectorAll(resolvedSelector));
             else if (r === "all") {
-              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-              const lNodes = Array.from(this.querySelectorAll(selector));
+              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+              const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
               targets = [...sNodes, ...lNodes];
             } else {
-              targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+              targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
             }
             targets.forEach((t) => t.remove());
           }
@@ -9515,6 +9602,27 @@ var resolvePropertyTargets = (inst, selector, options) => {
   const currentWin = conf.window;
   const r = options.root || "auto";
   const results = [];
+  let resolvedSelector = selector;
+  if (typeof selector === "function") {
+    const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+    resolvedSelector = selector(inst, hostSet);
+  }
+  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;
+  }
+  const stringSelector = resolvedSelector;
   const applyRoot = (target) => {
     if (!target) return;
     if (r === "auto") {
@@ -9524,37 +9632,37 @@ var resolvePropertyTargets = (inst, selector, options) => {
       if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
     }
   };
-  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);
-    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);
+    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 {
       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);
       }
     }
@@ -9979,7 +10087,8 @@ var elementDefine = (name, config = {}) => (constructor) => {
       const delegateListeners = [];
       const nonDelegateListeners = [];
       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 !== "") {
+        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);
@@ -10042,6 +10151,22 @@ var elementDefine = (name, config = {}) => (constructor) => {
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
         const bindTargets = [];
         const r = options.root || "auto";
+        let resolvedSelector = 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);
+          } else if (result instanceof currentWin.NodeList) {
+            bindTargets.push(...Array.from(result));
+          } else if (Array.isArray(result)) {
+            bindTargets.push(...result);
+          }
+        } else {
+          resolvedSelector = selector;
+        }
         const applyRootOption = (target) => {
           if (!target) return;
           if (r === "auto") {
@@ -10051,30 +10176,32 @@ var elementDefine = (name, config = {}) => (constructor) => {
             if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
           }
         };
-        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 = [];
-          if (r === "auto") searchRoots.push(this.shadowRoot || this);
-          else if (r === "light") searchRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            searchRoots.push(this);
-            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 = [];
+            if (r === "auto") searchRoots.push(this.shadowRoot || this);
+            else if (r === "light") searchRoots.push(this);
+            else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
+            else if (r === "all") {
+              searchRoots.push(this);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+            }
+            searchRoots.forEach((sr) => {
+              sr.querySelectorAll(resolvedSelector).forEach((el) => bindTargets.push(el));
+            });
           }
-          searchRoots.forEach((sr) => {
-            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
-          });
         }
         bindTargets.forEach((t) => {
           const handler = async (event2) => {
@@ -10089,7 +10216,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
             if (options.preventDefault) event2.preventDefault();
             const currentHostSet = SwcUtils.getHostSet(this);
             const args = { event: event2, ...currentHostSet, $el: t, $root: t };
-            await this[meta.propertyKey](event2, { currentHostSet, $$matchedElement: event2.currentTarget }, args);
+            await this[meta.propertyKey](event2, { currentHostSet, $matchedElement: event2.currentTarget }, args);
           };
           const eventSubject = new Subject();
           let eventStream = eventSubject;
@@ -10288,6 +10415,27 @@ var resolveAttributeTargets = (inst, selector, options) => {
   const currentWin = conf.window;
   const r = options.root || "auto";
   const results = [];
+  let resolvedSelector = selector;
+  if (typeof selector === "function") {
+    const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+    resolvedSelector = selector(inst, hostSet);
+  }
+  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;
+  }
+  const stringSelector = resolvedSelector;
   const applyRoot = (target) => {
     if (!target) return;
     if (r === "auto") {
@@ -10297,33 +10445,33 @@ var resolveAttributeTargets = (inst, selector, options) => {
       if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
     }
   };
-  if (selector === "$this" || !selector) {
+  if (stringSelector === "$this" || !stringSelector) {
     applyRoot(inst);
   } 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);
-    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);
+    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 {
       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);
       }
     }
@@ -10462,6 +10610,26 @@ var findAllAttributeApplyMetadata = (target) => {
 
 // src/decorators/applyNode.ts
 var APPLY_NODE_METADATA_KEY = Symbol.for("simple-web-component:apply-node");
+var resolveSelector = (selector, inst, win) => {
+  if (typeof selector === "function") {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    if (result instanceof win.Element) {
+      return result;
+    }
+    if (result instanceof win.NodeList) {
+      return result.length > 0 ? result[0] : null;
+    }
+    if (Array.isArray(result)) {
+      return result.length > 0 ? result[0] : null;
+    }
+    if (result === null) {
+      return null;
+    }
+    return result;
+  }
+  return selector;
+};
 var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
   if (!targetEl) return;
   if (pos === "clearChildren") {
@@ -10506,7 +10674,7 @@ var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
 function applyNode(selectorOrOptions, maybeOptions) {
   let selector;
   let options;
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     selector = selectorOrOptions;
     options = maybeOptions || { position: "replaceChildren" };
   } else {
@@ -10538,14 +10706,22 @@ function applyNode(selectorOrOptions, maybeOptions) {
           if (r === "all") return t.shadowRoot || t;
           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);
+        const resolved = resolveSelector(selector, this, currentWin);
+        if (resolved instanceof currentWin.Element) {
+          return applyRoot(resolved);
+        }
+        if (resolved === null) {
+          return null;
+        }
+        const stringSelector = resolved;
+        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();
       const res = original.apply(this, args);
@@ -10587,7 +10763,7 @@ function replaceChildren(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "replaceChildren" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "replaceChildren" });
   }
   return applyNode({ ...selectorOrOptions, position: "replaceChildren" });
@@ -10596,7 +10772,7 @@ function clearChildrenNode(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "clearChildren" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "clearChildren" });
   }
   return applyNode({ ...selectorOrOptions, position: "clearChildren" });
@@ -10606,7 +10782,7 @@ function innerHtml(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerHtml" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerHtml" });
@@ -10615,7 +10791,7 @@ function innerHtmlLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerHtml", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerHtml", root: "light" });
@@ -10624,7 +10800,7 @@ function innerHtmlShadow(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerHtml", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml", root: "shadow" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerHtml", root: "shadow" });
@@ -10633,7 +10809,7 @@ function innerText(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerText" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerText" });
@@ -10642,7 +10818,7 @@ function innerTextLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerText", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerText", root: "light" });
@@ -10651,7 +10827,7 @@ function innerTextShadow(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "innerText", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText", root: "shadow" });
   }
   return applyNode({ ...selectorOrOptions, position: "innerText", root: "shadow" });
@@ -10660,7 +10836,7 @@ function insertBeforeEnd(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "beforeEnd" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd" });
   }
   return applyNode({ ...selectorOrOptions, position: "beforeEnd" });
@@ -10669,7 +10845,7 @@ function insertBeforeEndLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "beforeEnd", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "beforeEnd", root: "light" });
@@ -10678,7 +10854,7 @@ function insertBeforeEndShadow(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "beforeEnd", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd", root: "shadow" });
   }
   return applyNode({ ...selectorOrOptions, position: "beforeEnd", root: "shadow" });
@@ -10687,7 +10863,7 @@ function insertAfterBegin(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "afterBegin" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "afterBegin" });
   }
   return applyNode({ ...selectorOrOptions, position: "afterBegin" });
@@ -10696,7 +10872,7 @@ function insertAfterBeginLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "afterBegin", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "afterBegin", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "afterBegin", root: "light" });
@@ -10705,7 +10881,7 @@ function replaceChildrenLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "replaceChildren", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "replaceChildren", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "replaceChildren", root: "light" });
@@ -10714,7 +10890,7 @@ function clearChildrenLight(selectorOrOptions, maybeOptions, descriptor) {
   if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
     return applyNode({ position: "clearChildren", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
   }
-  if (typeof selectorOrOptions === "string") {
+  if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
     return applyNode(selectorOrOptions, { ...maybeOptions, position: "clearChildren", root: "light" });
   }
   return applyNode({ ...selectorOrOptions, position: "clearChildren", root: "light" });
@@ -10732,6 +10908,58 @@ var findAllApplyNodeMetadata = (target) => {
 
 // src/decorators/applyClass.ts
 var CLASS_METADATA_KEY = Symbol.for("simple-web-component:class");
+var resolveSelector2 = (selector, inst, win) => {
+  if (typeof selector === "function") {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    if (result instanceof win.Element) {
+      return [result];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result);
+    }
+    if (Array.isArray(result)) {
+      return result;
+    }
+    if (result === null) {
+      return [];
+    }
+    return result;
+  }
+  return selector;
+};
+var getTargetElements = (selector, inst, win, root) => {
+  const resolved = resolveSelector2(selector, inst, win);
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+  const stringSelector = resolved;
+  const targetEls = [];
+  const host = inst;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+  const applyRoot = (t) => {
+    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));
+    }
+  }
+  return targetEls;
+};
 function createClassDecorator(action) {
   return (selector, classMapOrOptions, options = {}) => {
     return (target, propertyKey, descriptor) => {
@@ -10766,28 +10994,7 @@ function createClassDecorator(action) {
             const host = this;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = finalOptions.root || "auto";
-            const targetEls = [];
-            const applyRoot = (t) => {
-              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));
-              }
-            }
+            const targetEls = getTargetElements(selector, this, win, r);
             targetEls.forEach((targetEl) => {
               if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
                 return;
@@ -10919,6 +11126,58 @@ var findAllClassMetadata = (target) => {
 
 // src/decorators/applyStyle.ts
 var STYLE_METADATA_KEY = Symbol.for("simple-web-component:style");
+var resolveSelector3 = (selector, inst, win) => {
+  if (typeof selector === "function") {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    if (result instanceof win.Element) {
+      return [result];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result);
+    }
+    if (Array.isArray(result)) {
+      return result;
+    }
+    if (result === null) {
+      return [];
+    }
+    return result;
+  }
+  return selector;
+};
+var getTargetElements2 = (selector, inst, win, root) => {
+  const resolved = resolveSelector3(selector, inst, win);
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+  const stringSelector = resolved;
+  const targetEls = [];
+  const host = inst;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+  const applyRoot = (t) => {
+    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));
+    }
+  }
+  return targetEls;
+};
 function createStyleDecorator(action) {
   return (selector, options = {}) => {
     return (target, propertyKey, descriptor) => {
@@ -10946,28 +11205,7 @@ function createStyleDecorator(action) {
             const host = this;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = options.root || "auto";
-            const targetEls = [];
-            const applyRoot = (t) => {
-              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));
-              }
-            }
+            const targetEls = getTargetElements2(selector, this, win, r);
             targetEls.forEach((targetEl) => {
               if (options.filter && !options.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
                 return;