@dooboostore/simple-web-component 1.0.34 → 1.0.36

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

@@ -1151,40 +1151,37 @@ var dooboostoreSimpleWebComponent = (() => {
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcUtils: () => SwcUtils,
     addClass: () => addClass,
-    addClassHost: () => addClassHost,
+    addClassThis: () => addClassThis,
     addEventListener: () => addEventListener,
     addEventListenerAppHost: () => addEventListenerAppHost,
-    addEventListenerHost: () => addEventListenerHost,
+    addEventListenerDocument: () => addEventListenerDocument,
+    addEventListenerThis: () => addEventListenerThis,
+    addEventListenerWindow: () => addEventListenerWindow,
     allAppHost: () => allAppHost,
-    allFirstAppHost: () => allFirstAppHost,
-    allFirstHost: () => allFirstHost,
-    allHost: () => allHost,
-    allLastAppHost: () => allLastAppHost,
-    allLastHost: () => allLastHost,
     allParentHost: () => allParentHost,
-    appHost: () => appHost,
     applyAttribute: () => applyAttribute,
-    applyAttributeHost: () => applyAttributeHost,
+    applyAttributeThis: () => applyAttributeThis,
     applyClass: () => applyClass,
-    applyClassHost: () => applyClassHost,
+    applyClassThis: () => applyClassThis,
     applyInnerHtmlNode: () => applyInnerHtmlNode,
-    applyInnerHtmlNodeHost: () => applyInnerHtmlNodeHost,
+    applyInnerHtmlNodeThis: () => applyInnerHtmlNodeThis,
+    applyInnerTextNode: () => applyInnerTextNode,
     applyNode: () => applyNode,
-    applyNodeHost: () => applyNodeHost,
+    applyNodeThis: () => applyNodeThis,
     applyReplaceChildrenNode: () => applyReplaceChildrenNode,
-    applyReplaceChildrenNodeHost: () => applyReplaceChildrenNodeHost,
+    applyReplaceChildrenNodeThis: () => applyReplaceChildrenNodeThis,
     applyStyle: () => applyStyle,
-    applyStyleHost: () => applyStyleHost,
+    applyStyleThis: () => applyStyleThis,
     attribute: () => attribute,
-    attributeHost: () => attributeHost,
-    changedAttributeHost: () => changedAttributeHost,
+    attributeThis: () => attributeThis,
+    changedAttributeThis: () => changedAttributeThis,
     commentNode: () => commentNode,
     convertAttributeValue: () => convertAttributeValue,
     convertValue: () => convertValue2,
     createElement: () => createElement,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
-    emitCustomEventHost: () => emitCustomEventHost,
+    emitCustomEventThis: () => emitCustomEventThis,
     ensureInit: () => ensureInit,
     findAllApplyNodeMetadata: () => findAllApplyNodeMetadata,
     findAllAttributeApplyMetadata: () => findAllAttributeApplyMetadata,
@@ -1193,8 +1190,6 @@ var dooboostoreSimpleWebComponent = (() => {
     findAllClassMetadata: () => findAllClassMetadata,
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
-    firstAppHost: () => firstAppHost,
-    firstHost: () => firstHost,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getAttributeValue: () => getAttributeValue,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
@@ -1206,7 +1201,6 @@ var dooboostoreSimpleWebComponent = (() => {
     getQueryMetadata: () => getQueryMetadata,
     getSubscribeSwcAppMessageWhileConnectedMetadata: () => getSubscribeSwcAppMessageWhileConnectedMetadata,
     getSubscribeSwcAppRouteChangeWhileConnectedMetadata: () => getSubscribeSwcAppRouteChangeWhileConnectedMetadata,
-    host: () => host,
     htmlAElement: () => htmlAElement,
     htmlArticleElement: () => htmlArticleElement,
     htmlButtonElement: () => htmlButtonElement,
@@ -1218,53 +1212,53 @@ var dooboostoreSimpleWebComponent = (() => {
     htmlSectionElement: () => htmlSectionElement,
     htmlSpanElement: () => htmlSpanElement,
     htmlUlElement: () => htmlUlElement,
-    lastAppHost: () => lastAppHost,
-    lastHost: () => lastHost,
     onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
-    onAfterAdopted: () => onAfterAdopted,
-    onAfterConnected: () => onAfterConnected,
-    onAfterDisconnected: () => onAfterDisconnected,
-    onBeforeAdopted: () => onBeforeAdopted,
-    onBeforeConnected: () => onBeforeConnected,
-    onBeforeDisconnected: () => onBeforeDisconnected,
+    onAdoptedAfter: () => onAdoptedAfter,
+    onAdoptedBefore: () => onAdoptedBefore,
     onConnected: () => onConnected,
+    onConnectedAfter: () => onConnectedAfter,
+    onConnectedBefore: () => onConnectedBefore,
     onConnectedInnerHtml: () => onConnectedInnerHtml,
-    onConnectedSwcApp: () => onConnectedSwcApp,
     onDisconnected: () => onDisconnected,
+    onDisconnectedAfter: () => onDisconnectedAfter,
+    onDisconnectedBefore: () => onDisconnectedBefore,
     onInitialize: () => onInitialize,
-    parentHost: () => parentHost,
     publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
-    queryAllHost: () => queryAllHost,
+    queryAllThis: () => queryAllThis,
+    queryAppHost: () => queryAppHost,
+    queryDocument: () => queryDocument,
     queryHost: () => queryHost,
+    queryThis: () => queryThis,
+    queryWindow: () => queryWindow,
     removeAttribute: () => removeAttribute,
-    removeAttributeHost: () => removeAttributeHost,
+    removeAttributeThis: () => removeAttributeThis,
     removeClass: () => removeClass,
-    removeClassHost: () => removeClassHost,
+    removeClassThis: () => removeClassThis,
     removeStyle: () => removeStyle,
-    removeStyleHost: () => removeStyleHost,
+    removeStyleThis: () => removeStyleThis,
     resolveTargetEls: () => resolveTargetEls,
     setAttribute: () => setAttribute,
-    setAttributeHost: () => setAttributeHost,
+    setAttributeThis: () => setAttributeThis,
     setClass: () => setClass,
-    setClassHost: () => setClassHost,
+    setClassThis: () => setClassThis,
     setProperty: () => setProperty,
-    setPropertyHost: () => setPropertyHost,
+    setPropertyThis: () => setPropertyThis,
     setStyle: () => setStyle,
-    setStyleHost: () => setStyleHost,
+    setStyleThis: () => setStyleThis,
     subscribeSwcAppMessageWhileConnected: () => subscribeSwcAppMessageWhileConnected,
     subscribeSwcAppRouteChangeWhileConnected: () => subscribeSwcAppRouteChangeWhileConnected,
     textNode: () => textNode,
     toggleClass: () => toggleClass,
-    toggleClassHost: () => toggleClassHost,
+    toggleClassThis: () => toggleClassThis,
     updateAttribute: () => updateAttribute,
-    updateAttributeHost: () => updateAttributeHost,
+    updateAttributeThis: () => updateAttributeThis,
     updateClass: () => updateClass,
-    updateClassHost: () => updateClassHost,
+    updateClassThis: () => updateClassThis,
     updateStyle: () => updateStyle,
-    updateStyleHost: () => updateStyleHost
+    updateStyleThis: () => updateStyleThis
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 
@@ -5883,6 +5877,11 @@ var dooboostoreSimpleWebComponent = (() => {
   })(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 || "";
@@ -5896,12 +5895,19 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       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;
     }
@@ -5912,45 +5918,17 @@ var dooboostoreSimpleWebComponent = (() => {
       });
       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];
@@ -5965,13 +5943,9 @@ var dooboostoreSimpleWebComponent = (() => {
         original,
         script: rawScript.trim(),
         expressionStart,
-        expressionEnd,
-        ...wrap && { wrap }
+        expressionEnd
       });
     }
-    /**
-     * 구현 메서드
-     */
     replace(idOrExpr, valueOrCallback) {
       const id = typeof idOrExpr === "string" ? idOrExpr : idOrExpr.id;
       let expr;
@@ -5987,9 +5961,6 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       return this.getUnprocessedTemplate();
     }
-    /**
-     * 구현 메서드
-     */
     getExpressions(typeOrOptions) {
       if (!typeOrOptions) {
         return this.expressions;
@@ -6000,13 +5971,9 @@ var dooboostoreSimpleWebComponent = (() => {
       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];
@@ -6016,28 +5983,15 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       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) {
@@ -6069,11 +6023,17 @@ var dooboostoreSimpleWebComponent = (() => {
     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
@@ -6100,17 +6060,16 @@ var dooboostoreSimpleWebComponent = (() => {
     };
   }
   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;
@@ -6266,13 +6225,25 @@ var dooboostoreSimpleWebComponent = (() => {
   };
   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) => {
@@ -6312,8 +6283,9 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       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);
@@ -6324,26 +6296,26 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       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) => {
@@ -6351,11 +6323,11 @@ var dooboostoreSimpleWebComponent = (() => {
       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) {
@@ -6381,7 +6353,7 @@ var dooboostoreSimpleWebComponent = (() => {
       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;
@@ -6395,7 +6367,7 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         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 {
@@ -6403,7 +6375,8 @@ var dooboostoreSimpleWebComponent = (() => {
         $parentHost,
         $hosts,
         $firstHost,
-        $lastHost: $parentHost,
+        $lastHost: $host,
+        $templateHost: el.__swc_template_host,
         $appHost,
         $appHosts,
         $firstAppHost,
@@ -6460,25 +6433,27 @@ var dooboostoreSimpleWebComponent = (() => {
           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";
@@ -6514,14 +6489,20 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -6529,7 +6510,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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);
@@ -6596,25 +6577,26 @@ var dooboostoreSimpleWebComponent = (() => {
           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));
@@ -6675,12 +6657,12 @@ var dooboostoreSimpleWebComponent = (() => {
   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);
@@ -6725,26 +6707,28 @@ var dooboostoreSimpleWebComponent = (() => {
             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")
@@ -6759,7 +6743,7 @@ var dooboostoreSimpleWebComponent = (() => {
           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 = [];
@@ -6787,75 +6771,54 @@ var dooboostoreSimpleWebComponent = (() => {
       });
     };
   }
-  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) => {
@@ -6904,17 +6867,31 @@ var dooboostoreSimpleWebComponent = (() => {
             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)) : [];
@@ -6932,7 +6909,7 @@ var dooboostoreSimpleWebComponent = (() => {
           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 = [];
@@ -6955,75 +6932,34 @@ var dooboostoreSimpleWebComponent = (() => {
       });
     };
   }
-  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) => {
@@ -7933,7 +7869,7 @@ var dooboostoreSimpleWebComponent = (() => {
         });
       }
       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) {
@@ -7951,9 +7887,9 @@ var dooboostoreSimpleWebComponent = (() => {
       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;
         }
@@ -7995,7 +7931,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -8009,7 +7945,13 @@ var dooboostoreSimpleWebComponent = (() => {
       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(
           {
@@ -8093,7 +8035,7 @@ var dooboostoreSimpleWebComponent = (() => {
       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);
@@ -8101,204 +8043,245 @@ var dooboostoreSimpleWebComponent = (() => {
     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));
@@ -8307,15 +8290,11 @@ var dooboostoreSimpleWebComponent = (() => {
       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() {
@@ -8340,12 +8319,12 @@ var dooboostoreSimpleWebComponent = (() => {
       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,
@@ -8371,6 +8350,9 @@ var dooboostoreSimpleWebComponent = (() => {
       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);
         }
@@ -8404,7 +8386,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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({
@@ -8434,20 +8416,21 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
@@ -8519,22 +8502,22 @@ var dooboostoreSimpleWebComponent = (() => {
       }
     };
   }
-  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);
       };
     }
   }
@@ -8603,11 +8586,12 @@ var dooboostoreSimpleWebComponent = (() => {
             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;
         };
@@ -8645,20 +8629,20 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     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" });
@@ -8666,6 +8650,9 @@ var dooboostoreSimpleWebComponent = (() => {
   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");
@@ -8693,25 +8680,26 @@ var dooboostoreSimpleWebComponent = (() => {
           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));
@@ -8785,14 +8773,14 @@ var dooboostoreSimpleWebComponent = (() => {
   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);
@@ -8823,25 +8811,26 @@ var dooboostoreSimpleWebComponent = (() => {
           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));
@@ -8899,12 +8888,12 @@ var dooboostoreSimpleWebComponent = (() => {
   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);
@@ -8943,25 +8932,26 @@ var dooboostoreSimpleWebComponent = (() => {
         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));
@@ -8994,8 +8984,8 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   };
-  var setPropertyHost = (propertyNameOrOptions, options = {}) => {
-    return setProperty(":host", propertyNameOrOptions, options);
+  var setPropertyThis = (propertyNameOrOptions, options = {}) => {
+    return setProperty("$this", propertyNameOrOptions, options);
   };
 
   // src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts
@@ -9010,7 +9000,7 @@ var dooboostoreSimpleWebComponent = (() => {
         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;
     };
   }
@@ -9021,7 +9011,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -9090,9 +9080,9 @@ var dooboostoreSimpleWebComponent = (() => {
         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
@@ -9102,9 +9092,9 @@ var dooboostoreSimpleWebComponent = (() => {
             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
@@ -9167,6 +9157,22 @@ var dooboostoreSimpleWebComponent = (() => {
       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 = {}));
   return __toCommonJS(bundle_entry_exports);
 })();
 /*! Bundled license information: