@dooboostore/simple-web-component 1.0.44 → 1.0.46

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

@@ -1140,8 +1140,8 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_BEFORE_ADOPTED_METADATA_KEY: () => ON_BEFORE_ADOPTED_METADATA_KEY,
     ON_BEFORE_CONNECTED_METADATA_KEY: () => ON_BEFORE_CONNECTED_METADATA_KEY,
     ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_METADATA_KEY,
+    ON_CONNECTED_BODY_METADATA_KEY: () => ON_CONNECTED_BODY_METADATA_KEY,
     ON_CONNECTED_COMPLETED_METADATA_KEY: () => ON_CONNECTED_COMPLETED_METADATA_KEY,
-    ON_CONNECTED_METADATA_KEY: () => ON_CONNECTED_METADATA_KEY,
     ON_CONNECTED_SWC_APP_METADATA_KEY: () => ON_CONNECTED_SWC_APP_METADATA_KEY,
     ON_INITIALIZE_METADATA_KEY: () => ON_INITIALIZE_METADATA_KEY,
     PROPERTY_METADATA_KEY: () => PROPERTY_METADATA_KEY,
@@ -1267,12 +1267,12 @@ var dooboostoreSimpleWebComponent = (() => {
     onAdopted: () => onAdopted,
     onAdoptedAfter: () => onAdoptedAfter,
     onAdoptedBefore: () => onAdoptedBefore,
-    onConnected: () => onConnected,
     onConnectedAfter: () => onConnectedAfter,
     onConnectedBefore: () => onConnectedBefore,
+    onConnectedBody: () => onConnectedBody,
+    onConnectedBodyLight: () => onConnectedBodyLight,
+    onConnectedBodyShadow: () => onConnectedBodyShadow,
     onConnectedCompleted: () => onConnectedCompleted,
-    onConnectedLight: () => onConnectedLight,
-    onConnectedShadow: () => onConnectedShadow,
     onConnectedSwcApp: () => onConnectedSwcApp,
     onDisconnected: () => onDisconnected,
     onDisconnectedAfter: () => onDisconnectedAfter,
@@ -1376,11 +1376,11 @@ var dooboostoreSimpleWebComponent = (() => {
     ValidUtils22.isNullOrUndefined = (data) => {
       return data == null || void 0 === data;
     };
-    ValidUtils22.isConstructor = (obj) => {
-      return typeof obj === "function" && obj.prototype !== void 0 && obj.prototype.constructor === obj;
+    ValidUtils22.isClassType = (obj) => {
+      return typeof obj === "function" && /^\s*class\s+/.test(obj.toString());
     };
-    ValidUtils22.isFunction = (obj) => {
-      return typeof obj === "function" && !(0, ValidUtils22.isConstructor)(obj);
+    ValidUtils22.isFunctionType = (obj) => {
+      return typeof obj === "function";
     };
     ValidUtils22.isNullish = (data) => {
       return ValidUtils22.isNotNullish(data);
@@ -1529,6 +1529,13 @@ var dooboostoreSimpleWebComponent = (() => {
   // ../core/dist/esm/array/ArrayUtils.js
   var ArrayUtils;
   ((ArrayUtils2) => {
+    ArrayUtils2.split = (data, length) => {
+      const result = [];
+      for (let i = 0; i < data.length; i += length) {
+        result.push(data.slice(i, i + length));
+      }
+      return result;
+    };
     ArrayUtils2.create2DArray = (rows, cols, initialValue) => {
       const array = [];
       for (let row = 0; row < rows; row++) {
@@ -4299,6 +4306,10 @@ var dooboostoreSimpleWebComponent = (() => {
       const rotatedY = translatedX * Math.sin(angleInRadians) + translatedY * Math.cos(angleInRadians);
       return new Point2D(rotatedX + center.x, rotatedY + center.y);
     };
+    MathUtil2.quadraticBezier = (p0, p1, p2, t) => {
+      const mt = 1 - t;
+      return mt * mt * p0 + 2 * mt * t * p1 + t * t * p2;
+    };
   })(MathUtil || (MathUtil = {}));
 
   // ../core/dist/esm/convert/ConvertUtils.js
@@ -5254,7 +5265,7 @@ var dooboostoreSimpleWebComponent = (() => {
       } catch (e) {
         const targetHas = Array.isArray(has) ? has : [has];
         for (let ha of targetHas) {
-          if (ValidUtils.isConstructor(ha)) {
+          if (ValidUtils.isFunctionType(ha)) {
             if (e instanceof ha) {
               return e;
             }
@@ -6709,7 +6720,7 @@ var dooboostoreSimpleWebComponent = (() => {
   var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-adopted");
   var ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-adopted");
   var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:on-add-event-listener");
-  var ON_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component");
+  var ON_CONNECTED_BODY_METADATA_KEY = Symbol.for("simple-web-component:on-connected-body");
   var ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for("simple-web-component:on-connected-swc-app");
   var ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for("simple-web-component:on-completed");
   var ATTRIBUTE_CHANGED_WILDCARD = "*";
@@ -6795,14 +6806,14 @@ var dooboostoreSimpleWebComponent = (() => {
   }
   var decorator = (options, target, propertyKey) => {
     const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor);
+    let list = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor);
     if (!list) {
       list = [];
-      ReflectUtils.defineMetadata(ON_CONNECTED_METADATA_KEY, list, constructor);
+      ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, options });
   };
-  function onConnectedShadow(optionOrTarget, propertyKey, arg3) {
+  function onConnectedBodyShadow(optionOrTarget, propertyKey, arg3) {
     if (propertyKey) {
       return decorator({ useShadow: true }, optionOrTarget, propertyKey);
     }
@@ -6810,7 +6821,7 @@ var dooboostoreSimpleWebComponent = (() => {
       decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
     };
   }
-  function onConnectedLight(optionOrTarget, propertyKey, arg3) {
+  function onConnectedBodyLight(optionOrTarget, propertyKey, arg3) {
     if (propertyKey) {
       return decorator({ useShadow: false }, optionOrTarget, propertyKey);
     }
@@ -6818,7 +6829,7 @@ var dooboostoreSimpleWebComponent = (() => {
       decorator({ ...optionOrTarget ?? {}, useShadow: false }, target, propertyKey2);
     };
   }
-  function onConnected(optionOrTarget, propertyKey, arg3) {
+  function onConnectedBody(optionOrTarget, propertyKey, arg3) {
     if (propertyKey) {
       return decorator({}, optionOrTarget, propertyKey);
     }
@@ -6833,7 +6844,7 @@ var dooboostoreSimpleWebComponent = (() => {
   };
   var findAllOnConnectedMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+    const results = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
     return [...results].sort((a, b) => {
       const orderA = a.options?.order ?? 0;
       const orderB = b.options?.order ?? 0;
@@ -9162,7 +9173,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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") {
@@ -9195,58 +9206,72 @@ var dooboostoreSimpleWebComponent = (() => {
             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 })) {
@@ -9322,7 +9347,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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)})`);
@@ -9337,75 +9362,110 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
               }
@@ -9430,7 +9490,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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)})`);
@@ -9445,86 +9505,124 @@ var dooboostoreSimpleWebComponent = (() => {
         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());
             }
@@ -9724,6 +9822,27 @@ var dooboostoreSimpleWebComponent = (() => {
     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") {
@@ -9733,37 +9852,37 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
         }
       }
@@ -10128,10 +10247,10 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow(conf);
-        const bMethods = findAllOnConnectedBeforeMetadata(this).filter((it) => useSsr ? !it.options.ssrFirst : true);
+        const bMethods = findAllOnConnectedBeforeMetadata(this);
         for (const m of bMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         this._executeSwcScript("swc-on-before-connected", helperHostSet);
-        const targetConnectedList = findAllOnConnectedMetadata(constructor).filter((it) => useSsr ? !it.options.ssrFirst : true);
+        const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
         const shadowMode = conf?.useShadow || targetConnectedList.find((it) => it.options.useShadow)?.options.useShadow;
         if (shadowMode && !this.shadowRoot) {
           const mode = shadowMode === true ? "open" : shadowMode;
@@ -10188,7 +10307,8 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
@@ -10224,7 +10344,7 @@ var dooboostoreSimpleWebComponent = (() => {
             const unifiedHandler = async (event2) => {
               for (const meta of sortedMetaList) {
                 const { selector, options } = meta;
-                const matchedEl = event2.target.closest(selector);
+                const matchedEl = event2.target?.closest(selector);
                 if (matchedEl && br.contains(matchedEl)) {
                   if (options.filter) {
                     const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
@@ -10251,6 +10371,22 @@ var dooboostoreSimpleWebComponent = (() => {
           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") {
@@ -10260,30 +10396,32 @@ var dooboostoreSimpleWebComponent = (() => {
               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) => {
@@ -10298,7 +10436,7 @@ var dooboostoreSimpleWebComponent = (() => {
               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;
@@ -10329,9 +10467,7 @@ var dooboostoreSimpleWebComponent = (() => {
           });
         });
         if (originalConnected) await originalConnected.apply(this);
-        const aMethods = findAllOnConnectedAfterMetadata(this).filter((it) => {
-          return useSsr ? !it.options.ssrFirst : true;
-        });
+        const aMethods = findAllOnConnectedAfterMetadata(this);
         for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         this._executeSwcScript("swc-on-connected", helperHostSet);
         this._executeSwcScript("swc-on-after-connected", helperHostSet);
@@ -10497,6 +10633,27 @@ var dooboostoreSimpleWebComponent = (() => {
     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") {
@@ -10506,33 +10663,33 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
         }
       }
@@ -10671,6 +10828,26 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // 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") {
@@ -10681,7 +10858,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
     const id = currentThis._swcId;
     const nodes = [];
-    if (typeof res === "string" && pos === "innerHtml") {
+    if (res instanceof win.Node) {
+      nodes.push(res);
+    } else if (typeof res === "string" && pos === "innerHtml") {
       const t = win.document.createElement("template");
       t.innerHTML = res;
       nodes.push(...Array.from(t.content.childNodes));
@@ -10715,7 +10894,7 @@ var dooboostoreSimpleWebComponent = (() => {
   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 {
@@ -10747,14 +10926,22 @@ var dooboostoreSimpleWebComponent = (() => {
             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);
@@ -10796,7 +10983,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10805,7 +10992,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10815,7 +11002,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10824,7 +11011,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10833,7 +11020,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10842,7 +11029,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10851,7 +11038,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10860,7 +11047,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10869,7 +11056,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10878,7 +11065,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10887,7 +11074,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10896,7 +11083,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10905,7 +11092,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10914,7 +11101,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10923,7 +11110,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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" });
@@ -10941,6 +11128,58 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // 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) => {
@@ -10975,28 +11214,7 @@ var dooboostoreSimpleWebComponent = (() => {
               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;
@@ -11128,6 +11346,58 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // 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) => {
@@ -11155,28 +11425,7 @@ var dooboostoreSimpleWebComponent = (() => {
               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;
@@ -12100,7 +12349,7 @@ var dooboostoreSimpleWebComponent = (() => {
         otherStorage,
         newInstanceCarrier
       });
-      const r = ValidUtils.isFunction(target) && !target.prototype ? target(...parameters) : new target(...parameters);
+      const r = ValidUtils.isFunctionType(target) && !target.prototype ? target(...parameters) : new target(...parameters);
       let p = this.proxy(r);
       const config = getSim(target);
       if (config?.proxy) {
@@ -12256,7 +12505,7 @@ var dooboostoreSimpleWebComponent = (() => {
             }
           }
           if (inject.proxy && obj) {
-            if (ValidUtils.isConstructor(inject.proxy)) {
+            if (ValidUtils.isClassType(inject.proxy)) {
               const handler = getSim(inject.proxy) ? this.getOrNewSim({ target: inject.proxy }) : new inject.proxy();
               if (handler) {
                 obj = new Proxy(obj, handler);
@@ -13835,7 +14084,8 @@ var dooboostoreSimpleWebComponent = (() => {
             }
           }
         } finally {
-          if (this.config?.ssr) {
+          const isBrowser = ValidUtils2.isBrowser();
+          if (!isBrowser && this.config?.ssr) {
             setSSRAttribute(instance);
           } else {
             removeSSRAttribute(instance);
@@ -13880,7 +14130,9 @@ var dooboostoreSimpleWebComponent = (() => {
               throw e;
             }
           }
-          if (this.config?.ssr) {
+          const isBrowser = ValidUtils2.isBrowser();
+          console.log("------>", isBrowser, this.config?.ssr);
+          if (!isBrowser && this.config?.ssr) {
             setSSRAttribute(instance);
           } else {
             removeSSRAttribute(instance);