@dooboostore/simple-web-component 1.0.44 → 1.0.46

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

@@ -1167,11 +1167,11 @@ var ValidUtils;
   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);
@@ -1320,6 +1320,13 @@ var ValidUtils;
 // ../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++) {
@@ -4090,6 +4097,10 @@ var MathUtil;
     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
@@ -5045,7 +5056,7 @@ var Promises;
     } 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;
           }
@@ -6500,7 +6511,7 @@ var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-aft
 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 = "*";
@@ -6586,14 +6597,14 @@ function onConnectedCompleted(optionOrTarget, propertyKey) {
 }
 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);
   }
@@ -6601,7 +6612,7 @@ function onConnectedShadow(optionOrTarget, propertyKey, arg3) {
     decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
   };
 }
-function onConnectedLight(optionOrTarget, propertyKey, arg3) {
+function onConnectedBodyLight(optionOrTarget, propertyKey, arg3) {
   if (propertyKey) {
     return decorator({ useShadow: false }, optionOrTarget, propertyKey);
   }
@@ -6609,7 +6620,7 @@ function onConnectedLight(optionOrTarget, propertyKey, arg3) {
     decorator({ ...optionOrTarget ?? {}, useShadow: false }, target, propertyKey2);
   };
 }
-function onConnected(optionOrTarget, propertyKey, arg3) {
+function onConnectedBody(optionOrTarget, propertyKey, arg3) {
   if (propertyKey) {
     return decorator({}, optionOrTarget, propertyKey);
   }
@@ -6624,7 +6635,7 @@ var findAllLifecycleMetadata = (target, metadataKey) => {
 };
 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;
@@ -8953,7 +8964,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 +8997,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 +9138,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 +9153,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 +9281,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 +9296,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 +9613,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 +9643,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);
       }
     }
@@ -9919,10 +10038,10 @@ var elementDefine = (name, config = {}) => (constructor) => {
       }
       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;
@@ -9979,7 +10098,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);
@@ -10015,7 +10135,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
           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);
@@ -10042,6 +10162,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 +10187,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 +10227,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;
@@ -10120,9 +10258,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
         });
       });
       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);
@@ -10288,6 +10424,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 +10454,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 +10619,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") {
@@ -10472,7 +10649,9 @@ var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
   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));
@@ -10506,7 +10685,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 +10717,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 +10774,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 +10783,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 +10793,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 +10802,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 +10811,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 +10820,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 +10829,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 +10838,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 +10847,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 +10856,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 +10865,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 +10874,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 +10883,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 +10892,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 +10901,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 +10919,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 +11005,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 +11137,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 +11216,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;
@@ -11891,7 +12140,7 @@ var SimstanceManager = class _SimstanceManager {
       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) {
@@ -12047,7 +12296,7 @@ var SimstanceManager = class _SimstanceManager {
           }
         }
         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);
@@ -13626,7 +13875,8 @@ function SwcAppMixin(Base) {
           }
         }
       } finally {
-        if (this.config?.ssr) {
+        const isBrowser = ValidUtils2.isBrowser();
+        if (!isBrowser && this.config?.ssr) {
           setSSRAttribute(instance);
         } else {
           removeSSRAttribute(instance);
@@ -13671,7 +13921,9 @@ function SwcAppMixin(Base) {
             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);
@@ -13996,8 +14248,8 @@ export {
   ON_BEFORE_ADOPTED_METADATA_KEY,
   ON_BEFORE_CONNECTED_METADATA_KEY,
   ON_BEFORE_DISCONNECTED_METADATA_KEY,
+  ON_CONNECTED_BODY_METADATA_KEY,
   ON_CONNECTED_COMPLETED_METADATA_KEY,
-  ON_CONNECTED_METADATA_KEY,
   ON_CONNECTED_SWC_APP_METADATA_KEY,
   ON_INITIALIZE_METADATA_KEY,
   PROPERTY_METADATA_KEY,
@@ -14123,12 +14375,12 @@ export {
   onAdopted,
   onAdoptedAfter,
   onAdoptedBefore,
-  onConnected,
   onConnectedAfter,
   onConnectedBefore,
+  onConnectedBody,
+  onConnectedBodyLight,
+  onConnectedBodyShadow,
   onConnectedCompleted,
-  onConnectedLight,
-  onConnectedShadow,
   onConnectedSwcApp,
   onDisconnected,
   onDisconnectedAfter,