@dooboostore/simple-web-component 1.0.34 → 1.0.36

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

@@ -5727,6 +5727,11 @@ var Expression;
 })(Expression || (Expression = {}));
 
 // ../core/dist/esm/expression/ActionExpression.js
+var DEFAULT_EXPRESSION_CONFIG = {
+  "callReturn": { start: "{{=", end: "}}" },
+  "call": { start: "{{@", end: "}}" },
+  "replace": { start: "{{", end: "}}" }
+};
 var ActionExpression = class {
   constructor(value, config) {
     this.originalTemplate = value || "";
@@ -5740,12 +5745,19 @@ var ActionExpression = class {
     }
     this.maskingTemplate = value;
     this.currentTemplate = value;
-    if (config?.wrapExpression) {
-      this.processWrapExpressions(this.currentTemplate, config.wrapExpression);
+    const exprConfig = {
+      "callReturn": config?.expression?.["callReturn"] || DEFAULT_EXPRESSION_CONFIG["callReturn"],
+      "call": config?.expression?.call || DEFAULT_EXPRESSION_CONFIG.call,
+      "replace": config?.expression?.replace || DEFAULT_EXPRESSION_CONFIG.replace
+    };
+    const types = ["callReturn", "call", "replace"];
+    types.sort((a, b) => exprConfig[b].start.length - exprConfig[a].start.length);
+    for (const type of types) {
+      const marker = exprConfig[type];
+      if (marker) {
+        this.processExpressionType(type, marker.start, marker.end);
+      }
     }
-    this.processCallReturnExpressions(this.currentTemplate);
-    this.processCallExpressions(this.currentTemplate);
-    this.processReplaceExpressions(this.currentTemplate);
     this.sortExpressionsByPosition();
     this.maskingTemplate = this.currentTemplate;
   }
@@ -5756,45 +5768,17 @@ var ActionExpression = class {
     });
     this.expressions.sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
   }
-  processWrapExpressions(value, wrapExpression) {
-    const wrapChar = wrapExpression.trim();
-    const escapedWrap = wrapChar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const wrappedCallReturnRegex = new RegExp(`${escapedWrap}\\{\\{=\\s*(.+?)\\s*\\}\\}${escapedWrap}`, "g");
-    let match;
-    while ((match = wrappedCallReturnRegex.exec(value)) !== null) {
-      this.addExpression(match, "call-return", wrapChar);
-    }
-    const wrappedCallRegex = new RegExp(`${escapedWrap}\\{\\{@\\s*(.+?)\\s*\\}\\}${escapedWrap}`, "g");
-    while ((match = wrappedCallRegex.exec(value)) !== null) {
-      this.addExpression(match, "call", wrapChar);
-    }
-    const wrappedReplaceRegex = new RegExp(`${escapedWrap}\\{\\{(?![=@])\\s*(.+?)\\s*\\}\\}${escapedWrap}`, "g");
-    while ((match = wrappedReplaceRegex.exec(value)) !== null) {
-      this.addExpression(match, "replace", wrapChar);
-    }
-  }
-  processCallReturnExpressions(value) {
-    const callReturnRegex = /(?<![a-zA-Z0-9$_@#.])\{\{=\s*(.+?)\s*\}\}(?![a-zA-Z0-9$_@#.])/g;
-    let match;
-    while ((match = callReturnRegex.exec(value)) !== null) {
-      this.addExpression(match, "call-return");
-    }
-  }
-  processCallExpressions(value) {
-    const callRegex = /(?<![a-zA-Z0-9$_@#.])\{\{@\s*(.+?)\s*\}\}(?![a-zA-Z0-9$_@#.])/g;
+  processExpressionType(type, start, end) {
+    const escapedStart = start.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const escapedEnd = end.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`${escapedStart}\\s*([\\s\\S]+?)\\s*${escapedEnd}`, "g");
     let match;
-    while ((match = callRegex.exec(value)) !== null) {
-      this.addExpression(match, "call");
+    const valueToMatch = this.currentTemplate;
+    while ((match = regex.exec(valueToMatch)) !== null) {
+      this.addExpression(match, type);
     }
   }
-  processReplaceExpressions(value) {
-    const replaceRegex = /(?<![a-zA-Z0-9$_@#.])\{\{(?![=@])\s*(.+?)\s*\}\}(?![a-zA-Z0-9$_@#.])/g;
-    let match;
-    while ((match = replaceRegex.exec(value)) !== null) {
-      this.addExpression(match, "replace");
-    }
-  }
-  addExpression(match, type, wrap) {
+  addExpression(match, type) {
     const id = Math.random().toString(36).substr(2, 9);
     const original = match[0];
     const rawScript = match[1];
@@ -5809,13 +5793,9 @@ var ActionExpression = class {
       original,
       script: rawScript.trim(),
       expressionStart,
-      expressionEnd,
-      ...wrap && { wrap }
+      expressionEnd
     });
   }
-  /**
-   * 구현 메서드
-   */
   replace(idOrExpr, valueOrCallback) {
     const id = typeof idOrExpr === "string" ? idOrExpr : idOrExpr.id;
     let expr;
@@ -5831,9 +5811,6 @@ var ActionExpression = class {
     }
     return this.getUnprocessedTemplate();
   }
-  /**
-   * 구현 메서드
-   */
   getExpressions(typeOrOptions) {
     if (!typeOrOptions) {
       return this.expressions;
@@ -5844,13 +5821,9 @@ var ActionExpression = class {
     const options = typeOrOptions;
     return this.expressions.filter((expr) => {
       if (options.type && expr.type !== options.type) return false;
-      if ("wrap" in options && expr.wrap !== options.wrap) return false;
       return true;
     });
   }
-  /**
-   * 구현 메서드
-   */
   getFirstExpression(typeOrOptions) {
     if (!typeOrOptions) {
       return this.getExpressions()[0];
@@ -5860,28 +5833,15 @@ var ActionExpression = class {
     }
     return this.getExpressions(typeOrOptions)[0];
   }
-  /**
-   * 원본 템플릿을 반환합니다.
-   */
   getOriginalTemplate() {
     return this.originalTemplate;
   }
-  /**
-   * 마스킹 처리된 템플릿을 반환합니다.
-   */
   getMaskingTemplate() {
     return this.maskingTemplate;
   }
-  /**
-   * 현재 처리 상태의 템플릿을 반환합니다.
-   */
   getCurrentTemplate() {
     return this.currentTemplate;
   }
-  /**
-   * 미처리된 마커들을 원본으로 복원한 템플릿을 반환합니다.
-   * replace() 호출 후 처리되지 않은 표현식들을 원본 형태로 되돌립니다.
-   */
   getUnprocessedTemplate() {
     let result = this.currentTemplate;
     for (const expr of this.expressions) {
@@ -5913,11 +5873,17 @@ var getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };
-function addEventListenerHost(type, options) {
-  return addEventListener(":host", type, options);
+function addEventListenerThis(type, options) {
+  return addEventListener("$this", type, options);
 }
 function addEventListenerAppHost(type, options) {
-  return addEventListener(":appHost", type, options);
+  return addEventListener("$appHost", type, options);
+}
+function addEventListenerWindow(type, options) {
+  return addEventListener("$window", type, options);
+}
+function addEventListenerDocument(type, options) {
+  return addEventListener("$document", type, options);
 }
 
 // src/decorators/lifecycles.ts
@@ -5944,17 +5910,16 @@ function createLifecycleDecorator(metadataKey) {
   };
 }
 var onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-var onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-var onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-var onConnected = onAfterConnected;
-var onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
-var onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
-var onDisconnected = onAfterDisconnected;
-var onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
-var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
-var onAdopted = onAfterAdopted;
+var onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
+var onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
+var onConnected = onConnectedAfter;
+var onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
+var onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
+var onDisconnected = onDisconnectedAfter;
+var onAdoptedBefore = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
+var onAdoptedAfter = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
+var onAdopted = onAdoptedAfter;
 var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
-var onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
 function onConnectedInnerHtml(arg1, arg2, arg3) {
   const decorator = (options, target, propertyKey) => {
     const constructor = target.constructor;
@@ -6110,13 +6075,25 @@ var htmlArticleElement = (options) => {
 };
 var SwcUtils;
 ((SwcUtils2) => {
+  SwcUtils2.getParentContainer = (e) => {
+    return e.parentElement ?? e.getRootNode();
+  };
   SwcUtils2.parsePathPatternsSetAttributeString = (pathPattern, path) => {
     return JSON.stringify(SwcUtils2.parsePathPatternsSet(pathPattern, path)).replace(/"/g, "'");
   };
-  SwcUtils2.parsePathPatternsSet = (pathPattern, path) => {
+  SwcUtils2.parsePathPatternsSet = (pathPattern, urlAndRouter) => {
+    urlAndRouter ?? (urlAndRouter = "/");
+    const p = typeof urlAndRouter === "string" ? urlAndRouter : urlAndRouter.value.url;
+    const searchParams = new URLSearchParams();
+    const qs = p.split("?")[1];
+    qs?.split("&").forEach((it) => {
+      const [k, v] = it.split("=");
+      searchParams.set(k, v);
+    });
     return {
-      path,
-      pathData: SwcUtils2.parsePathPatterns(pathPattern, path)
+      path: p,
+      searchParams,
+      pathData: SwcUtils2.parsePathPatterns(pathPattern, p)
     };
   };
   SwcUtils2.parsePathPatterns = (pathPattern, path) => {
@@ -6156,8 +6133,9 @@ var SwcUtils;
     }
     return current;
   };
-  SwcUtils2.findNearestSwcHost = (el) => {
-    if (el.__swc_host) return el.__swc_host;
+  SwcUtils2.findNearestSwcHostIncludingSelf = (el) => {
+    const el1 = el;
+    if (el1.__swc_host) return el1.__swc_host;
     let current = el.parentElement || el.getRootNode?.()?.host;
     const doc = el.ownerDocument;
     const win = doc?.defaultView || (typeof window !== "undefined" ? window : void 0);
@@ -6168,26 +6146,26 @@ var SwcUtils;
     }
     return void 0;
   };
-  SwcUtils2.findAllSwcHosts = (el) => {
+  SwcUtils2.findAllSwcHostsIncludingSelf = (el) => {
     const hosts = [];
-    let current = (0, SwcUtils2.findNearestSwcHost)(el);
+    let current = (0, SwcUtils2.findNearestSwcHostIncludingSelf)(el);
     while (current) {
       hosts.push(current);
-      current = (0, SwcUtils2.findNearestSwcHost)(current);
+      current = (0, SwcUtils2.findNearestSwcHostIncludingSelf)(current);
     }
     return hosts.reverse();
   };
   SwcUtils2.getHosts = (el) => {
-    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    const ancestors = (0, SwcUtils2.findAllSwcHostsIncludingSelf)(el);
     if (getElementConfig(el)) return [...ancestors, el];
     return ancestors;
   };
   SwcUtils2.getHost = (el) => {
     if (getElementConfig(el)) return el;
-    return (0, SwcUtils2.findNearestSwcHost)(el);
+    return (0, SwcUtils2.findNearestSwcHostIncludingSelf)(el);
   };
   SwcUtils2.getAppHosts = (el) => {
-    const hosts = SwcUtils2.findAllParentAppHostsDirect(el);
+    const hosts = SwcUtils2.findAllAppHostsIncludingSelfDirect(el);
     return hosts;
   };
   SwcUtils2.getAppHost = (el) => {
@@ -6195,11 +6173,11 @@ var SwcUtils;
     const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
     return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
   };
-  SwcUtils2.findParentAppHostDirect = (el) => {
-    const appHosts = (0, SwcUtils2.findAllParentAppHostsDirect)(el);
+  SwcUtils2.findAppHostIncludingSelfDirect = (el) => {
+    const appHosts = (0, SwcUtils2.findAllAppHostsIncludingSelfDirect)(el);
     return appHosts.length > 0 ? appHosts[appHosts.length - 1] : null;
   };
-  SwcUtils2.findAllParentAppHostsDirect = (el) => {
+  SwcUtils2.findAllAppHostsIncludingSelfDirect = (el) => {
     const appHosts = [];
     const w = el.ownerDocument?.defaultView || (typeof window !== "undefined" ? window : void 0);
     if (!w) {
@@ -6225,7 +6203,7 @@ var SwcUtils;
     return appHosts.reverse();
   };
   SwcUtils2.getHostSet = (el) => {
-    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    const ancestors = (0, SwcUtils2.findAllSwcHostsIncludingSelf)(el);
     const $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
     const $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
     const $hosts = ancestors;
@@ -6239,7 +6217,7 @@ var SwcUtils;
       }
       curr = curr.parentElement || curr.getRootNode().host;
     }
-    const $appHosts = SwcUtils2.findAllParentAppHostsDirect(el);
+    const $appHosts = SwcUtils2.findAllAppHostsIncludingSelfDirect(el);
     const $appHost = $appHosts.length > 0 ? $appHosts[$appHosts.length - 1] === el ? $appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null : $appHosts[$appHosts.length - 1] : null;
     const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
     return {
@@ -6247,7 +6225,8 @@ var SwcUtils;
       $parentHost,
       $hosts,
       $firstHost,
-      $lastHost: $parentHost,
+      $lastHost: $host,
+      $templateHost: el.__swc_template_host,
       $appHost,
       $appHosts,
       $firstAppHost,
@@ -6304,25 +6283,27 @@ function emitCustomEvent(selectorOrTarget, type, options = {}) {
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
         const eventTargets = [];
-        if (selectorOrTarget === ":window") eventTargets.push(currentWin);
-        else if (selectorOrTarget === ":document") eventTargets.push(currentWin.document);
-        else if (selectorOrTarget === ":parentHost") {
+        if (selectorOrTarget === "$window") eventTargets.push(currentWin);
+        else if (selectorOrTarget === "$document") eventTargets.push(currentWin.document);
+        else if (selectorOrTarget === "$host") {
+          if (hostSet.$host) eventTargets.push(hostSet.$host);
+        } else if (selectorOrTarget === "$parentHost") {
           if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selectorOrTarget === ":appHost") {
+        } else if (selectorOrTarget === "$appHost") {
           if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selectorOrTarget === ":firstHost") {
+        } else if (selectorOrTarget === "$firstHost") {
           if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selectorOrTarget === ":lastHost") {
+        } else if (selectorOrTarget === "$lastHost") {
           if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selectorOrTarget === ":firstAppHost") {
+        } else if (selectorOrTarget === "$firstAppHost") {
           if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selectorOrTarget === ":lastAppHost") {
+        } else if (selectorOrTarget === "$lastAppHost") {
           if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selectorOrTarget === ":hosts") {
+        } else if (selectorOrTarget === "$hosts") {
           hostSet.$hosts.forEach((h) => eventTargets.push(h));
-        } else if (selectorOrTarget === ":appHosts") {
+        } else if (selectorOrTarget === "$appHosts") {
           hostSet.$appHosts.forEach((h) => eventTargets.push(h));
-        } else if (selectorOrTarget === ":host" || !selectorOrTarget) {
+        } else if (selectorOrTarget === "$this" || !selectorOrTarget) {
           eventTargets.push(this);
         } else {
           const r = fullOptions.root || "auto";
@@ -6358,14 +6339,20 @@ var getEmitCustomEventMetadataList = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
 };
-function emitCustomEventHost(type, options = {}) {
-  if (!options.attributeName) {
-    options.attributeName = `on-emit-${type}`;
+function emitCustomEventThis(type, optionsOrAttributeaName) {
+  if (optionsOrAttributeaName && typeof optionsOrAttributeaName === "string") {
+    return emitCustomEventThis(type, { attributeName: optionsOrAttributeaName });
+  } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === "object") {
+    if (!optionsOrAttributeaName.attributeName) {
+      optionsOrAttributeaName.attributeName = `on-emit-${type}`;
+    }
+    return emitCustomEvent("$this", type, optionsOrAttributeaName);
+  } else {
+    return emitCustomEvent("$this", type, { attributeName: `on-emit-${type}` });
   }
-  return emitCustomEvent(":host", type, options);
 }
 
-// src/decorators/changedAttributeHost.ts
+// src/decorators/changedAttributeThis.ts
 var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for("simple-web-component:on-attribute-changed");
 var convertValue = (val, type) => {
   if (val === null || val === void 0) return val;
@@ -6373,7 +6360,7 @@ var convertValue = (val, type) => {
   if (type === Boolean) return val === "false" || val === "0" ? false : true;
   return val;
 };
-function changedAttributeHost(attributeName, options = {}) {
+function changedAttributeThis(attributeName, options = {}) {
   return (target, propertyKey) => {
     const constructor = target.constructor;
     let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -6440,25 +6427,26 @@ function createAttributeDecorator(action) {
         const handleResult = (resolvedValue) => {
           if (resolvedValue !== void 0) {
             const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $this: this };
+            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 === ":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 if (selector === ":host" || !selector) applyRoot(host2);
+            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" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+              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));
@@ -6519,12 +6507,12 @@ function applyAttribute(selector, action = "update", options = {}) {
 var setAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("set")(selector, nameOrOptions, options);
 var updateAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("update")(selector, nameOrOptions, options);
 var removeAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("remove")(selector, nameOrOptions, options);
-function applyAttributeHost(action = "update", options = {}) {
-  return createAttributeDecorator(action)(":host", options);
+function applyAttributeThis(action = "update", options = {}) {
+  return createAttributeDecorator(action)("$this", options);
 }
-var setAttributeHost = (nameOrOptions, options = {}) => createAttributeDecorator("set")(":host", nameOrOptions, options);
-var updateAttributeHost = (nameOrOptions, options = {}) => createAttributeDecorator("update")(":host", nameOrOptions, options);
-var removeAttributeHost = (nameOrOptions, options = {}) => createAttributeDecorator("remove")(":host", nameOrOptions, options);
+var setAttributeThis = (nameOrOptions, options = {}) => createAttributeDecorator("set")("$this", nameOrOptions, options);
+var updateAttributeThis = (nameOrOptions, options = {}) => createAttributeDecorator("update")("$this", nameOrOptions, options);
+var removeAttributeThis = (nameOrOptions, options = {}) => createAttributeDecorator("remove")("$this", nameOrOptions, options);
 var findAllAttributeApplyMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(ATTRIBUTE_APPLY_METADATA_KEY, target);
@@ -6569,26 +6557,28 @@ function query(selectorOrTarget, options = {}) {
           return t;
         };
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ":parentHost")
+        if (selector === "$this")
+          return applyRoot(this);
+        if (selector === "$host")
+          return applyRoot(hostSet.$host);
+        if (selector === "$parentHost")
           return applyRoot(hostSet.$parentHost);
-        if (selector === ":appHost")
+        if (selector === "$appHost")
           return applyRoot(hostSet.$appHost);
-        if (selector === ":firstHost")
+        if (selector === "$firstHost")
           return applyRoot(hostSet.$firstHost);
-        if (selector === ":lastHost")
+        if (selector === "$lastHost")
           return applyRoot(hostSet.$lastHost);
-        if (selector === ":firstAppHost")
+        if (selector === "$firstAppHost")
           return applyRoot(hostSet.$firstAppHost);
-        if (selector === ":lastAppHost")
+        if (selector === "$lastAppHost")
           return applyRoot(hostSet.$lastAppHost);
         const config = getElementConfig(this);
         const win = config?.window || window;
-        if (selector === ":window")
+        if (selector === "$window")
           return win;
-        if (selector === ":document")
+        if (selector === "$document")
           return win.document;
-        if (selector === ":host")
-          return applyRoot(this);
         if (r === "shadow")
           return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
         if (r === "light")
@@ -6603,7 +6593,7 @@ function query(selectorOrTarget, options = {}) {
         ensureInit(this);
         if (nv === null || nv === void 0) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(":") && selector !== ":host")
+          if (selector.startsWith("$") && selector !== "$this")
             return;
           const r = options.root || "auto";
           const targets = [];
@@ -6631,75 +6621,54 @@ function query(selectorOrTarget, options = {}) {
     });
   };
 }
-function queryHost(targetOrOptions, propertyKey) {
+function queryThis(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":host", {})(targetOrOptions, propertyKey);
+    return query("$this", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":host", targetOrOptions);
+    return query("$this", targetOrOptions);
   } else {
-    return query(":host", {});
+    return query("$this", {});
   }
 }
-var host = queryHost;
-function parentHost(targetOrOptions, propertyKey) {
+function queryWindow(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":parentHost", {})(targetOrOptions, propertyKey);
+    return query("$window", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":parentHost", targetOrOptions);
+    return query("$window", targetOrOptions);
   } else {
-    return query(":parentHost", {});
+    return query("$window", {});
   }
 }
-function appHost(targetOrOptions, propertyKey) {
+function queryDocument(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":appHost", {})(targetOrOptions, propertyKey);
+    return query("$document", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":appHost", targetOrOptions);
+    return query("$document", targetOrOptions);
   } else {
-    return query(":appHost", {});
+    return query("$document", {});
   }
 }
-function firstHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":firstHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":firstHost", targetOrOptions);
-  } else {
-    return query(":firstHost", {});
-  }
-}
-function lastHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":lastHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":lastHost", targetOrOptions);
-  } else {
-    return query(":lastHost", {});
-  }
-}
-function firstAppHost(targetOrOptions, propertyKey) {
+function queryHost(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":firstAppHost", {})(targetOrOptions, propertyKey);
+    return query("$host", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":firstAppHost", targetOrOptions);
+    return query("$host", targetOrOptions);
   } else {
-    return query(":firstAppHost", {});
+    return query("$host", {});
   }
 }
-function lastAppHost(targetOrOptions, propertyKey) {
+function queryAppHost(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return query(":lastAppHost", {})(targetOrOptions, propertyKey);
+    return query("$appHost", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return query(":lastAppHost", targetOrOptions);
+    return query("$appHost", targetOrOptions);
   } else {
-    return query(":lastAppHost", {});
+    return query("$appHost", {});
   }
 }
 var getQueryMetadata = (target) => {
@@ -6748,17 +6717,31 @@ function queryAll(selectorOrTarget, options = {}) {
           return results;
         };
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ":hosts")
+        if (selector === "$hosts")
           return applyRoot(hostSet.$hosts);
-        if (selector === ":appHosts")
+        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")
+        if (selector === "$window")
           return [win];
-        if (selector === ":document")
+        if (selector === "$document")
           return [win.document];
-        if (selector === ":host")
+        if (selector === "$this")
           return applyRoot(this);
         if (r === "shadow")
           return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
@@ -6776,7 +6759,7 @@ function queryAll(selectorOrTarget, options = {}) {
         ensureInit(this);
         if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(":") && selector !== ":host")
+          if (selector.startsWith("$") && selector !== "$this")
             return;
           const r = options.root || "auto";
           let targets = [];
@@ -6799,75 +6782,34 @@ function queryAll(selectorOrTarget, options = {}) {
     });
   };
 }
-function queryAllHost(targetOrOptions, propertyKey) {
+function queryAllThis(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":host", {})(targetOrOptions, propertyKey);
+    return queryAll("$this", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":host", targetOrOptions);
+    return queryAll("$this", targetOrOptions);
   } else {
-    return queryAll(":host", {});
+    return queryAll("$this", {});
   }
 }
-var allHost = queryAllHost;
 function allParentHost(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":parentHost", {})(targetOrOptions, propertyKey);
+    return queryAll("$host", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":parentHost", targetOrOptions);
+    return queryAll("$host", targetOrOptions);
   } else {
-    return queryAll(":parentHost", {});
+    return queryAll("$host", {});
   }
 }
 function allAppHost(targetOrOptions, propertyKey) {
   if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":appHost", {})(targetOrOptions, propertyKey);
+    return queryAll("$appHost", {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":appHost", targetOrOptions);
+    return queryAll("$appHost", targetOrOptions);
   } else {
-    return queryAll(":appHost", {});
-  }
-}
-function allFirstHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":firstHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":firstHost", targetOrOptions);
-  } else {
-    return queryAll(":firstHost", {});
-  }
-}
-function allLastHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":lastHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":lastHost", targetOrOptions);
-  } else {
-    return queryAll(":lastHost", {});
-  }
-}
-function allFirstAppHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":firstAppHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":firstAppHost", targetOrOptions);
-  } else {
-    return queryAll(":firstAppHost", {});
-  }
-}
-function allLastAppHost(targetOrOptions, propertyKey) {
-  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-    return queryAll(":lastAppHost", {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-    return queryAll(":lastAppHost", targetOrOptions);
-  } else {
-    return queryAll(":lastAppHost", {});
+    return queryAll("$appHost", {});
   }
 }
 var getQueryAllMetadata = (target) => {
@@ -7777,7 +7719,7 @@ var ensureInit = (inst) => {
       });
     }
     const hostSet = SwcUtils.getHostSet(inst);
-    const appHosts = SwcUtils.findAllParentAppHostsDirect(inst);
+    const appHosts = SwcUtils.findAllAppHostsIncludingSelfDirect(inst);
     inst._executeSwcScript?.("swc-on-constructor", hostSet);
     const cMethods = findAllLifecycleMetadata(inst, ON_INITIALIZE_METADATA_KEY);
     if (cMethods) {
@@ -7795,9 +7737,9 @@ var handleGlobalSwcEvent = async (event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host2 = SwcUtils.findNearestSwcHost(node);
-      if (host2 && host2.isConnected && typeof host2.__swc_executeAttributeEvent === "function") {
-        await host2.__swc_executeAttributeEvent(node, attrName, script, event);
+      const host = SwcUtils.findNearestSwcHostIncludingSelf(node);
+      if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
+        await host.__swc_executeAttributeEvent(node, attrName, script, event);
         event.__swc_handled = true;
         break;
       }
@@ -7839,7 +7781,7 @@ var setupPrototype = (proto) => {
   proto._resolveWindow = function(localConfig) {
     ensureInit(this);
     if (localConfig?.window) return localConfig.window;
-    const ancestors = SwcUtils.findAllSwcHosts(this);
+    const ancestors = SwcUtils.findAllSwcHostsIncludingSelf(this);
     for (let i = ancestors.length - 1; i >= 0; i--) {
       const aConf = getElementConfig(ancestors[i]);
       if (aConf?.window) return aConf.window;
@@ -7853,7 +7795,13 @@ var setupPrototype = (proto) => {
     const app = useHostSet?.$appHost?.simpleApplication;
     if (app) {
       const otherStorage = /* @__PURE__ */ new Map();
-      const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://HOSTSET" /* HOST_SET */, data: useHostSet }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://APPHOST" /* APP_HOST */, data: useHostSet.$appHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://APPHOSTS" /* APP_HOSTS */, data: useHostSet.$appHosts }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://HOST" /* HOST */, data: useHostSet.$host }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://HOSTS" /* HOSTS */, data: useHostSet.$hosts }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://FIRSTHOST" /* FIRST_HOST */, data: useHostSet.$firstHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://LASTHOST" /* LAST_HOST */, data: useHostSet.$lastHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://FIRSTAPPHOST" /* FIRST_APP_HOST */, data: useHostSet.$firstAppHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://LASTAPPHOST" /* LAST_APP_HOST */, data: useHostSet.$lastAppHost })]);
+      const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://HOSTSET" /* HOST_SET */, data: useHostSet }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://APPHOST" /* APP_HOST */, data: useHostSet.$appHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://APPHOSTS" /* APP_HOSTS */, data: useHostSet.$appHosts }), new SituationTypeContainer({
+        situationType: "SIMPLE_WEB_COMPONENT://HOST" /* HOST */,
+        data: useHostSet.$host
+      }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://HOSTS" /* HOSTS */, data: useHostSet.$hosts }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://FIRSTHOST" /* FIRST_HOST */, data: useHostSet.$firstHost }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://LASTHOST" /* LAST_HOST */, data: useHostSet.$lastHost }), new SituationTypeContainer({
+        situationType: "SIMPLE_WEB_COMPONENT://FIRSTAPPHOST" /* FIRST_APP_HOST */,
+        data: useHostSet.$firstAppHost
+      }), new SituationTypeContainer({ situationType: "SIMPLE_WEB_COMPONENT://LASTAPPHOST" /* LAST_APP_HOST */, data: useHostSet.$lastAppHost })]);
       otherStorage.set(SituationTypeContainers, situations);
       return app.simstanceManager.executeBindParameterSim(
         {
@@ -7937,7 +7885,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
     metadata.extends = extendsTagName;
   }
   const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
-  const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === ":host" || meta.selector === "");
+  const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const attributeList = findAllAttributeMetadata(constructor);
@@ -7945,204 +7893,245 @@ var elementDefine = (name, config = {}) => (constructor) => {
   const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
   const swcOnEvents = DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
   const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.options.name).filter(Boolean);
-  const hostAttributes = attributeList.filter((it) => it.selector === ":host").map((it) => it.options.name || String(it.propertyKey));
-  const proto = constructor.prototype;
+  const hostAttributes = attributeList.filter((it) => it.selector === "$this").map((it) => it.options.name || String(it.propertyKey));
   const originalStaticObservedAttributes = constructor.observedAttributes ?? [];
-  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([
-    ...metadata.observedAttributes ?? [],
-    ...originalStaticObservedAttributes,
-    ...attrChangeMap.keys(),
-    ...attributeApplyNames,
-    ...hostAttributes,
-    ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean),
-    ...swcLifecycleAttributes,
-    ...swcOnEvents
-  ])];
+  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
   const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
+  const proto = constructor.prototype;
   setupPrototype(proto);
+  let helperHostSet = null;
   const originalConnected = proto.connectedCallback;
-  proto.connectedCallback = function() {
+  proto.connectedCallback = async function() {
     ensureInit(this);
-    const hostSet = SwcUtils.getHostSet(this);
-    const appHost2 = hostSet.$appHost;
-    const conf = getElementConfig(this);
-    const currentWin = this._resolveWindow(conf);
-    const shadowMode = conf?.useShadow || connectedInnerHtmlList.find((it) => it.options.useShadow)?.options.useShadow;
-    if (shadowMode && !this.shadowRoot) {
-      const mode = shadowMode === true ? "open" : shadowMode;
-      this.attachShadow({ mode });
-    }
-    this._executeSwcScript("swc-on-before-connected", hostSet);
-    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-    if (bMethods) {
-      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
-    }
-    if (connectedInnerHtmlList.length > 0) {
-      let sContent = "", lContent = "";
-      for (const meta of connectedInnerHtmlList) {
-        const res = this._invokeLifecycleMethod(meta.propertyKey, hostSet);
-        if (res !== void 0) {
-          if (meta.options.useShadow || conf?.useShadow) sContent += res;
-          else lContent += res;
+    helperHostSet = SwcUtils.getHelperAndHostSet(win, this);
+    const appHost = helperHostSet.$appHost;
+    try {
+      if (appHost && typeof appHost._connected === "function") {
+        await appHost._connected(this);
+      } else if (appHost && typeof appHost) {
+        appHost._connected_safari ?? (appHost._connected_safari = []);
+        appHost._connected_safari.push(this);
+      }
+      const conf = getElementConfig(this);
+      const currentWin = this._resolveWindow(conf);
+      const shadowMode = conf?.useShadow || connectedInnerHtmlList.find((it) => it.options.useShadow)?.options.useShadow;
+      if (shadowMode && !this.shadowRoot) {
+        const mode = shadowMode === true ? "open" : shadowMode;
+        this.attachShadow({ mode });
+      }
+      const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+      if (bMethods) {
+        for (const m of bMethods) await this._invokeLifecycleMethod(m, helperHostSet);
+      }
+      this._executeSwcScript("swc-on-before-connected", helperHostSet);
+      if (connectedInnerHtmlList.length > 0) {
+        let sContent = "", lContent = "";
+        for (const meta of connectedInnerHtmlList) {
+          let res = await this._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
+          const actionExpression = new ActionExpression(res, {
+            expression: {
+              replace: {
+                start: meta.options.replaceWrap?.start || "{%{",
+                end: meta.options.replaceWrap?.end || "}%}"
+              },
+              callReturn: {
+                start: meta.options.replaceWrap?.start || "{%{=",
+                end: meta.options.replaceWrap?.end || "}%}"
+              },
+              call: {
+                start: meta.options.replaceWrap?.start || "{%{@",
+                end: meta.options.replaceWrap?.end || "}%}"
+              }
+            }
+          });
+          actionExpression.getExpressions().filter((it) => it.type === "replace").forEach((it) => {
+            try {
+              const sr = FunctionUtils.executeReturn({ script: it.script, context: this, args: helperHostSet });
+              actionExpression.replace(it, sr);
+            } catch (e) {
+              console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
+            }
+          });
+          res = actionExpression.getUnprocessedTemplate();
+          if (res !== void 0) {
+            if (meta.options.useShadow || conf?.useShadow) sContent += res;
+            else lContent += res;
+          }
+        }
+        try {
+          if (this.shadowRoot) {
+            this.shadowRoot.innerHTML = sContent;
+          }
+          if (lContent) {
+            this.innerHTML = lContent;
+          }
+        } catch (e) {
+          console.error("[ElementDefine] innerHTML setting error:", e);
         }
       }
-      try {
-        if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
-        if (lContent) this.innerHTML = lContent;
-      } catch (e) {
-        console.error("[ElementDefine] innerHTML setting error:", e);
+      const root = this.getRootNode();
+      if (!globalDelegatedRoots.has(root)) {
+        DOM_EVENT_NAMES.forEach((type) => {
+          root.addEventListener(type, handleGlobalSwcEvent);
+        });
+        globalDelegatedRoots.add(root);
       }
-    }
-    const root = this.getRootNode();
-    if (!globalDelegatedRoots.has(root)) {
-      DOM_EVENT_NAMES.forEach((type) => {
-        root.addEventListener(type, handleGlobalSwcEvent);
+      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 !== "") {
+          delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
       });
-      globalDelegatedRoots.add(root);
-    }
-    const delegateListeners = [];
-    const nonDelegateListeners = [];
-    addEventListenerList.forEach((meta) => {
-      if (meta.options.delegate && meta.selector !== ":window" && meta.selector !== ":document" && meta.selector !== ":parentHost" && meta.selector !== ":appHost" && meta.selector !== ":firstHost" && meta.selector !== ":lastHost" && meta.selector !== ":firstAppHost" && meta.selector !== ":lastAppHost" && meta.selector !== ":hosts" && meta.selector !== ":appHosts" && meta.selector !== ":host" && meta.selector !== "") {
-        delegateListeners.push(meta);
-      } else {
-        nonDelegateListeners.push(meta);
-      }
-    });
-    const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
-    delegateListeners.forEach((meta) => {
-      const r = meta.options.root || "auto";
-      const rootKey = `${meta.type}:${r}`;
-      if (!delegatesByTypeAndRoot.has(rootKey)) {
-        delegatesByTypeAndRoot.set(rootKey, []);
-      }
-      delegatesByTypeAndRoot.get(rootKey).push(meta);
-    });
-    delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
-      const [type, rStr] = typeRootKey.split(":");
-      const r = rStr === "auto" ? "auto" : rStr;
-      const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
-      const bindRoots = [];
-      if (r === "auto") bindRoots.push(this.shadowRoot || this);
-      else if (r === "light") bindRoots.push(this);
-      else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-      else if (r === "all") {
-        bindRoots.push(this);
-        if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-      }
-      bindRoots.forEach((br) => {
-        const sortedMetaList = [...metaList].sort((a, b) => {
-          const aStop = a.options.stopPropagation ? 1 : 0;
-          const bStop = b.options.stopPropagation ? 1 : 0;
-          return bStop - aStop;
-        });
-        const unifiedHandler = async (event) => {
-          for (const meta of sortedMetaList) {
-            const { selector, options } = meta;
-            const matchedEl = event.target.closest(selector);
-            if (matchedEl && br.contains(matchedEl)) {
-              if (options.filter) {
-                const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
-                if (!options.filter(event, helper)) {
-                  continue;
+      const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
+      delegateListeners.forEach((meta) => {
+        const r = meta.options.root || "auto";
+        const rootKey = `${meta.type}:${r}`;
+        if (!delegatesByTypeAndRoot.has(rootKey)) {
+          delegatesByTypeAndRoot.set(rootKey, []);
+        }
+        delegatesByTypeAndRoot.get(rootKey).push(meta);
+      });
+      delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
+        const [type, rStr] = typeRootKey.split(":");
+        const r = rStr === "auto" ? "auto" : rStr;
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        const bindRoots = [];
+        if (r === "auto") bindRoots.push(this.shadowRoot || this);
+        else if (r === "light") bindRoots.push(this);
+        else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === "all") {
+          bindRoots.push(this);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+        bindRoots.forEach((br) => {
+          const sortedMetaList = [...metaList].sort((a, b) => {
+            const aStop = a.options.stopPropagation ? 1 : 0;
+            const bStop = b.options.stopPropagation ? 1 : 0;
+            return bStop - aStop;
+          });
+          const unifiedHandler = async (event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (options.filter) {
+                  const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
+                  if (!options.filter(event, helper)) {
+                    continue;
+                  }
                 }
+                if (options.stopPropagation) event.stopPropagation();
+                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+                if (options.preventDefault) event.preventDefault();
+                const currentHostSet = SwcUtils.getHostSet(this);
+                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+                await this[meta.propertyKey](event, { ...currentHostSet, $matchedElement: matchedEl }, args);
+                if (event.cancelBubble) break;
               }
-              if (options.stopPropagation) event.stopPropagation();
-              if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-              if (options.preventDefault) event.preventDefault();
-              const currentHostSet = SwcUtils.getHostSet(this);
-              const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-              await this[meta.propertyKey](event, currentHostSet, matchedEl, args);
-              if (event.cancelBubble) break;
             }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+      nonDelegateListeners.forEach((meta) => {
+        const { selector, type, options } = meta;
+        const opts = { capture: options.capture, once: options.once, passive: options.passive };
+        const bindTargets = [];
+        const r = options.root || "auto";
+        const applyRootOption = (target) => {
+          if (!target) return;
+          if (r === "auto") {
+            bindTargets.push(target.shadowRoot || target);
+          } else {
+            if (r === "light" || r === "all") bindTargets.push(target);
+            if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
           }
         };
-        br.addEventListener(type, unifiedHandler, opts);
-        this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
-      });
-    });
-    nonDelegateListeners.forEach((meta) => {
-      const { selector, type, options } = meta;
-      const opts = { capture: options.capture, once: options.once, passive: options.passive };
-      const bindTargets = [];
-      const r = options.root || "auto";
-      const applyRootOption = (target) => {
-        if (!target) return;
-        if (r === "auto") {
-          bindTargets.push(target.shadowRoot || target);
-        } else {
-          if (r === "light" || r === "all") bindTargets.push(target);
-          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 === ":parentHost") applyRootOption(hostSet.$parentHost);
-      else if (selector === ":appHost") applyRootOption(hostSet.$appHost);
-      else if (selector === ":firstHost") applyRootOption(hostSet.$firstHost);
-      else if (selector === ":lastHost") applyRootOption(hostSet.$lastHost);
-      else if (selector === ":firstAppHost") applyRootOption(hostSet.$firstAppHost);
-      else if (selector === ":lastAppHost") applyRootOption(hostSet.$lastAppHost);
-      else if (selector === ":hosts") hostSet.$hosts.forEach(applyRootOption);
-      else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRootOption);
-      else if (selector === ":host" || !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 (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);
+          }
+          searchRoots.forEach((sr) => {
+            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
+          });
         }
-        searchRoots.forEach((sr) => {
-          sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
+        bindTargets.forEach((t) => {
+          const handler = async (event) => {
+            if (options.filter) {
+              const helper = SwcUtils.getHelperAndHostSet(currentWin, t);
+              if (!options.filter(event, { currentThis: this, helper })) {
+                return;
+              }
+            }
+            if (options.stopPropagation) event.stopPropagation();
+            if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+            if (options.preventDefault) event.preventDefault();
+            const currentHostSet = SwcUtils.getHostSet(this);
+            const args = { event, ...currentHostSet, $el: t, $root: t };
+            await this[meta.propertyKey](event, { currentHostSet, $$matchedElement: event.currentTarget }, args);
+          };
+          t.addEventListener(type, handler, opts);
+          if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
+            this._boundListeners.push({ target: t, type, handler, options: opts });
+          }
         });
-      }
-      bindTargets.forEach((t) => {
-        const handler = async (event) => {
-          if (options.filter) {
-            const helper = SwcUtils.getHelperAndHostSet(currentWin, t);
-            if (!options.filter(event, { currentThis: this, helper })) {
-              return;
+      });
+      if (originalConnected) await originalConnected.apply(this);
+      const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+      if (aMethods) {
+        for (const m of aMethods) await this._invokeLifecycleMethod(m, helperHostSet);
+      }
+      this._executeSwcScript("swc-on-connected", helperHostSet);
+      this._executeSwcScript("swc-on-after-connected", helperHostSet);
+      this.__swc_connected = true;
+      for (let [name2, metaList] of Array.from(attrChangeMap)) {
+        for (const meta of metaList) {
+          if (meta.options.while === "connected") {
+            const val = getAttributeValue(this, name2, { type: meta.options.type });
+            if (val !== null) {
+              await this[meta.propertyKey](val, null, name2, helperHostSet);
             }
           }
-          if (options.stopPropagation) event.stopPropagation();
-          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-          if (options.preventDefault) event.preventDefault();
-          const currentHostSet = SwcUtils.getHostSet(this);
-          const args = { event, ...currentHostSet, $el: t, $root: t };
-          await this[meta.propertyKey](event, currentHostSet, args);
-        };
-        t.addEventListener(type, handler, opts);
-        if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
-          this._boundListeners.push({ target: t, type, handler, options: opts });
         }
-      });
-    });
-    if (originalConnected) originalConnected.apply(this);
-    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-    if (aMethods) {
-      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
-    }
-    this._executeSwcScript("swc-on-connected", hostSet);
-    this._executeSwcScript("swc-on-after-connected", hostSet);
-    this.__swc_connected = true;
-    const appHostss = SwcUtils.findAllParentAppHostsDirect(this);
-    if (appHost2 && typeof appHost2._connected === "function") {
-      appHost2._connected(this);
-    } else if (appHost2 && typeof appHost2) {
-      appHost2._connected_safari ?? (appHost2._connected_safari = []);
-      appHost2._connected_safari.push(this);
+      }
+    } finally {
+      if (appHost && typeof appHost._connectedDone === "function") {
+        await appHost._connectedDone(this);
+      }
     }
   };
   const originalDisconnected = proto.disconnectedCallback;
   proto.disconnectedCallback = function() {
-    const hostSet = SwcUtils.getHostSet(this);
-    this._executeSwcScript("swc-on-before-disconnected", hostSet);
+    console.log("disconnnnnnnnnnnnnnnnnnn", helperHostSet, this);
+    const appHost = helperHostSet.$appHost;
+    if (appHost && typeof appHost._disconnected === "function") {
+      appHost._disconnected(this);
+    }
+    this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
     const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
     if (bMethods) {
-      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
+      for (const m of bMethods) this._invokeLifecycleMethod(m, helperHostSet);
     }
     if (this._boundListeners) {
       this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
@@ -8151,15 +8140,11 @@ var elementDefine = (name, config = {}) => (constructor) => {
     if (originalDisconnected) originalDisconnected.apply(this);
     const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
     if (aMethods) {
-      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
+      for (const m of aMethods) this._invokeLifecycleMethod(m, helperHostSet);
     }
-    this._executeSwcScript("swc-on-disconnected", hostSet);
-    this._executeSwcScript("swc-on-after-disconnected", hostSet);
+    this._executeSwcScript("swc-on-disconnected", helperHostSet);
+    this._executeSwcScript("swc-on-after-disconnected", helperHostSet);
     this.__swc_connected = false;
-    const appHost2 = hostSet.$appHost;
-    if (appHost2 && typeof appHost2._disconnected === "function") {
-      appHost2._disconnected(this);
-    }
   };
   const originalAdopted = proto.adoptedCallback;
   proto.adoptedCallback = function() {
@@ -8184,12 +8169,12 @@ var elementDefine = (name, config = {}) => (constructor) => {
     let processedVal = newVal;
     if (newVal !== null) {
       const ae = new ActionExpression(newVal);
-      const expr = ae.getFirstExpression("call-return");
+      const expr = ae.getFirstExpression("callReturn");
       if (expr) {
         const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
         const helperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
+        const script = ConvertUtils2.decodeHtmlEntity(expr.script, win2.document);
         try {
-          const script = ConvertUtils2.decodeHtmlEntity(expr.script, win2.document);
           const result = FunctionUtils.executeReturn({
             script,
             context: this,
@@ -8215,6 +8200,9 @@ var elementDefine = (name, config = {}) => (constructor) => {
     const metaList = attrChangeMap.get(name2);
     if (metaList && Array.isArray(metaList)) {
       for (const meta of metaList) {
+        if (meta.options.while === "connected" && !this.__swc_connected) {
+          continue;
+        }
         const convertedVal = convertAttributeValue(processedVal, meta.options.type);
         this[meta.propertyKey](convertedVal, old, name2, hSet);
       }
@@ -8248,7 +8236,7 @@ var getAttributeValue = (inst, attrName, options) => {
   if (primaryTarget && typeof primaryTarget.hasAttribute === "function" && primaryTarget.hasAttribute(attrName)) {
     let domVal = primaryTarget.getAttribute(attrName);
     const ae = new ActionExpression(domVal);
-    const expr = ae.getFirstExpression("call-return");
+    const expr = ae.getFirstExpression("callReturn");
     if (expr) {
       try {
         const result = FunctionUtils.executeReturn({
@@ -8278,20 +8266,21 @@ var resolveTargetEls = (inst, selector, options, currentWin) => {
       if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
     }
   };
-  if (selector === ":host" || !selector) {
+  if (selector === "$this" || !selector) {
     applyRoot(inst);
-  } else if (selector === ":window") {
+  } else if (selector === "$window") {
     results.push(currentWin);
-  } else if (selector === ":document") {
+  } else if (selector === "$document") {
     results.push(currentWin.document);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    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);
+    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 (r === "shadow") {
         const found = inst.shadowRoot?.querySelectorAll(selector);
@@ -8363,22 +8352,22 @@ function attribute(selector, options = {}) {
     }
   };
 }
-function attributeHost(targetOrAttrOrOptions, propertyKeyOrOptions) {
+function attributeThis(targetOrAttrOrOptions, propertyKeyOrOptions) {
   if (propertyKeyOrOptions !== void 0 && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-    return attribute(":host", { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
+    return attribute("$this", { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
   }
   if (typeof targetOrAttrOrOptions === "string") {
     const attrName = targetOrAttrOrOptions;
     const options = typeof propertyKeyOrOptions === "object" ? propertyKeyOrOptions : {};
-    return attribute(":host", { ...options, name: attrName });
+    return attribute("$this", { ...options, name: attrName });
   } else if (typeof targetOrAttrOrOptions === "object") {
     const options = targetOrAttrOrOptions;
     return (target, propertyKey) => {
-      return attribute(":host", { ...options, name: String(propertyKey) })(target, propertyKey);
+      return attribute("$this", { ...options, name: String(propertyKey) })(target, propertyKey);
     };
   } else {
     return (target, propertyKey) => {
-      return attribute(":host", { name: String(propertyKey) })(target, propertyKey);
+      return attribute("$this", { name: String(propertyKey) })(target, propertyKey);
     };
   }
 }
@@ -8447,11 +8436,12 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
           if (r === "all") return t.shadowRoot || t;
           return t;
         };
-        if (selector === ":host") return applyRoot(this);
-        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 === "$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 targetRoot = applyRoot(this);
         return targetRoot ? targetRoot.querySelector(selector) : null;
       };
@@ -8489,20 +8479,20 @@ var findAllApplyNodeMetadata = (target) => {
   });
   return result;
 };
-function applyNodeHost(targetOrOptions, propertyKey, descriptor) {
-  if (propertyKey !== void 0) return applyNode(":host", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
+function applyNodeThis(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) return applyNode("$this", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(":host", { position: "beforeEnd", ...opt });
+  return applyNode("$this", { position: "beforeEnd", ...opt });
 }
-function applyReplaceChildrenNodeHost(targetOrOptions, propertyKey, descriptor) {
-  if (propertyKey !== void 0) return applyNode(":host", { position: "replaceChildren" })(targetOrOptions, propertyKey, descriptor);
+function applyReplaceChildrenNodeThis(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) return applyNode("$this", { position: "replaceChildren" })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(":host", { position: "replaceChildren", ...opt });
+  return applyNode("$this", { position: "replaceChildren", ...opt });
 }
-function applyInnerHtmlNodeHost(targetOrOptions, propertyKey, descriptor) {
-  if (propertyKey !== void 0) return applyNode(":host", { position: "innerHtml" })(targetOrOptions, propertyKey, descriptor);
+function applyInnerHtmlNodeThis(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) return applyNode("$this", { position: "innerHtml" })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(":host", { position: "innerHtml", ...opt });
+  return applyNode("$this", { position: "innerHtml", ...opt });
 }
 function applyReplaceChildrenNode(selector, options = {}) {
   return applyNode(selector, { ...options, position: "replaceChildren" });
@@ -8510,6 +8500,9 @@ function applyReplaceChildrenNode(selector, options = {}) {
 function applyInnerHtmlNode(selector, options = {}) {
   return applyNode(selector, { ...options, position: "innerHtml" });
 }
+function applyInnerTextNode(selector, options = {}) {
+  return applyNode(selector, { ...options, position: "innerText" });
+}
 
 // src/decorators/applyClass.ts
 var CLASS_METADATA_KEY = Symbol.for("simple-web-component:class");
@@ -8537,25 +8530,26 @@ function createClassDecorator(action) {
         const handleResult = (resolvedValue) => {
           if (resolvedValue !== void 0) {
             const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $this: this };
+            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 === ":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 if (selector === ":host" || !selector) applyRoot(host2);
+            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" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+              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));
@@ -8629,14 +8623,14 @@ var updateClass = (selector, classMapOrOptions, options = {}) => createClassDeco
 var addClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("add")(selector, classMapOrOptions, options);
 var removeClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("remove")(selector, classMapOrOptions, options);
 var toggleClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("toggle")(selector, classMapOrOptions, options);
-function applyClassHost(action = "update", options = {}) {
-  return createClassDecorator(action)(":host", options);
+function applyClassThis(action = "update", options = {}) {
+  return createClassDecorator(action)("$this", options);
 }
-var setClassHost = (classMapOrOptions, options = {}) => createClassDecorator("set")(":host", classMapOrOptions, options);
-var updateClassHost = (classMapOrOptions, options = {}) => createClassDecorator("update")(":host", classMapOrOptions, options);
-var addClassHost = (classMapOrOptions, options = {}) => createClassDecorator("add")(":host", classMapOrOptions, options);
-var removeClassHost = (classMapOrOptions, options = {}) => createClassDecorator("remove")(":host", classMapOrOptions, options);
-var toggleClassHost = (classMapOrOptions, options = {}) => createClassDecorator("toggle")(":host", classMapOrOptions, options);
+var setClassThis = (classMapOrOptions, options = {}) => createClassDecorator("set")("$this", classMapOrOptions, options);
+var updateClassThis = (classMapOrOptions, options = {}) => createClassDecorator("update")("$this", classMapOrOptions, options);
+var addClassThis = (classMapOrOptions, options = {}) => createClassDecorator("add")("$this", classMapOrOptions, options);
+var removeClassThis = (classMapOrOptions, options = {}) => createClassDecorator("remove")("$this", classMapOrOptions, options);
+var toggleClassThis = (classMapOrOptions, options = {}) => createClassDecorator("toggle")("$this", classMapOrOptions, options);
 var findAllClassMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(CLASS_METADATA_KEY, target);
@@ -8667,25 +8661,26 @@ function createStyleDecorator(action) {
         const handleResult = (resolvedValue) => {
           if (resolvedValue !== void 0) {
             const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, host2);
+            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 === ":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 if (selector === ":host" || !selector) applyRoot(host2);
+            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" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+              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));
@@ -8743,12 +8738,12 @@ function applyStyle(selector, action = "update", options = {}) {
 var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
 var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
 var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
-function applyStyleHost(action = "update", options = {}) {
-  return createStyleDecorator(action)(":host", options);
+function applyStyleThis(action = "update", options = {}) {
+  return createStyleDecorator(action)("$this", options);
 }
-var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
-var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
-var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
+var setStyleThis = (options = {}) => createStyleDecorator("set")("$this", options);
+var updateStyleThis = (options = {}) => createStyleDecorator("update")("$this", options);
+var removeStyleThis = (options = {}) => createStyleDecorator("remove")("$this", options);
 var findAllStyleMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -8787,25 +8782,26 @@ var setProperty = (selector, propertyNameOrOptions, options = {}) => {
       const handleResult = (resolvedValue) => {
         if (resolvedValue !== void 0) {
           const win = this.ownerDocument?.defaultView || window;
-          const host2 = this;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $this: this };
+          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 === ":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 if (selector === ":host" || !selector) applyRoot(host2);
+          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" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+            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));
@@ -8838,8 +8834,8 @@ var setProperty = (selector, propertyNameOrOptions, options = {}) => {
     };
   };
 };
-var setPropertyHost = (propertyNameOrOptions, options = {}) => {
-  return setProperty(":host", propertyNameOrOptions, options);
+var setPropertyThis = (propertyNameOrOptions, options = {}) => {
+  return setProperty("$this", propertyNameOrOptions, options);
 };
 
 // src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts
@@ -8854,7 +8850,7 @@ function createSubscribeSwcAppRouteChangeWhileConnected(options) {
       list = [];
       ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
     }
-    list.push({ propertyKey, pathPattern, filter });
+    list.push({ propertyKey, options });
     return descriptor;
   };
 }
@@ -8865,7 +8861,7 @@ function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions, propertyKey,
   let options = {};
   if (Array.isArray(targetOrOptions)) {
     options.path = targetOrOptions;
-  } else if (typeof targetOrOptions === "string") {
+  } else if (typeof targetOrOptions === "string" || typeof targetOrOptions === "function") {
     options.path = targetOrOptions;
   } else if (targetOrOptions && typeof targetOrOptions === "object") {
     options = targetOrOptions;
@@ -8934,9 +8930,9 @@ function createPublishSwcAppMessage(messageType) {
       const result = originalMethod.apply(this, args);
       if (result instanceof Promise) {
         result.then((data) => {
-          const appHost2 = SwcUtils.getAppHost(this);
-          if (appHost2) {
-            appHost2.publishMessage({
+          const appHost = SwcUtils.getAppHost(this);
+          if (appHost) {
+            appHost.publishMessage({
               publisher: this,
               data,
               type: messageType
@@ -8946,9 +8942,9 @@ function createPublishSwcAppMessage(messageType) {
           console.warn("publishSwcAppMessage async error:", err);
         });
       } else {
-        const appHost2 = SwcUtils.getAppHost(this);
-        if (appHost2) {
-          appHost2.publishMessage({
+        const appHost = SwcUtils.getAppHost(this);
+        if (appHost) {
+          appHost.publishMessage({
             publisher: this,
             data: result,
             type: messageType
@@ -9011,6 +9007,22 @@ var RouterAction;
     return typeof obj?.hasActivate === "function";
   };
 })(RouterAction || (RouterAction = {}));
+
+// ../simple-boot/dist/esm/decorators/cache/CacheDecorator.js
+var CacheMetadataKey = Symbol.for("simple-boot:cache-metadata");
+
+// ../simple-boot/dist/esm/fetch/ApiService.js
+var ApiServiceInterceptor;
+((ApiServiceInterceptor2) => {
+  ApiServiceInterceptor2.TOKEN = Symbol.for("simple-boot:api-service-interceptor-token");
+  ApiServiceInterceptor2.resolveAll = (simstanceManager) => {
+    try {
+      return (simstanceManager.findSims(ApiServiceInterceptor2.TOKEN) ?? []).map((it) => it.getValue()).filter(ValidUtils.isDefined);
+    } catch (e) {
+      return [];
+    }
+  };
+})(ApiServiceInterceptor || (ApiServiceInterceptor = {}));
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   APPLY_NODE_METADATA_KEY,
@@ -9045,40 +9057,37 @@ export {
   SWC_NOT_FOUND,
   SwcUtils,
   addClass,
-  addClassHost,
+  addClassThis,
   addEventListener,
   addEventListenerAppHost,
-  addEventListenerHost,
+  addEventListenerDocument,
+  addEventListenerThis,
+  addEventListenerWindow,
   allAppHost,
-  allFirstAppHost,
-  allFirstHost,
-  allHost,
-  allLastAppHost,
-  allLastHost,
   allParentHost,
-  appHost,
   applyAttribute,
-  applyAttributeHost,
+  applyAttributeThis,
   applyClass,
-  applyClassHost,
+  applyClassThis,
   applyInnerHtmlNode,
-  applyInnerHtmlNodeHost,
+  applyInnerHtmlNodeThis,
+  applyInnerTextNode,
   applyNode,
-  applyNodeHost,
+  applyNodeThis,
   applyReplaceChildrenNode,
-  applyReplaceChildrenNodeHost,
+  applyReplaceChildrenNodeThis,
   applyStyle,
-  applyStyleHost,
+  applyStyleThis,
   attribute,
-  attributeHost,
-  changedAttributeHost,
+  attributeThis,
+  changedAttributeThis,
   commentNode,
   convertAttributeValue,
   convertValue2 as convertValue,
   createElement,
   elementDefine,
   emitCustomEvent,
-  emitCustomEventHost,
+  emitCustomEventThis,
   ensureInit,
   findAllApplyNodeMetadata,
   findAllAttributeApplyMetadata,
@@ -9087,8 +9096,6 @@ export {
   findAllClassMetadata,
   findAllLifecycleMetadata,
   findAllStyleMetadata,
-  firstAppHost,
-  firstHost,
   getAddEventListenerMetadata,
   getAttributeValue,
   getChangedAttributeMetadata,
@@ -9100,7 +9107,6 @@ export {
   getQueryMetadata,
   getSubscribeSwcAppMessageWhileConnectedMetadata,
   getSubscribeSwcAppRouteChangeWhileConnectedMetadata,
-  host,
   htmlAElement,
   htmlArticleElement,
   htmlButtonElement,
@@ -9112,53 +9118,53 @@ export {
   htmlSectionElement,
   htmlSpanElement,
   htmlUlElement,
-  lastAppHost,
-  lastHost,
   onAddEventListener,
   onAdopted,
-  onAfterAdopted,
-  onAfterConnected,
-  onAfterDisconnected,
-  onBeforeAdopted,
-  onBeforeConnected,
-  onBeforeDisconnected,
+  onAdoptedAfter,
+  onAdoptedBefore,
   onConnected,
+  onConnectedAfter,
+  onConnectedBefore,
   onConnectedInnerHtml,
-  onConnectedSwcApp,
   onDisconnected,
+  onDisconnectedAfter,
+  onDisconnectedBefore,
   onInitialize,
-  parentHost,
   publishSwcAppMessage,
   query,
   queryAll,
-  queryAllHost,
+  queryAllThis,
+  queryAppHost,
+  queryDocument,
   queryHost,
+  queryThis,
+  queryWindow,
   removeAttribute,
-  removeAttributeHost,
+  removeAttributeThis,
   removeClass,
-  removeClassHost,
+  removeClassThis,
   removeStyle,
-  removeStyleHost,
+  removeStyleThis,
   resolveTargetEls,
   setAttribute,
-  setAttributeHost,
+  setAttributeThis,
   setClass,
-  setClassHost,
+  setClassThis,
   setProperty,
-  setPropertyHost,
+  setPropertyThis,
   setStyle,
-  setStyleHost,
+  setStyleThis,
   subscribeSwcAppMessageWhileConnected,
   subscribeSwcAppRouteChangeWhileConnected,
   textNode,
   toggleClass,
-  toggleClassHost,
+  toggleClassThis,
   updateAttribute,
-  updateAttributeHost,
+  updateAttributeThis,
   updateClass,
-  updateClassHost,
+  updateClassThis,
   updateStyle,
-  updateStyleHost
+  updateStyleThis
 };
 /*! Bundled license information: