@dooboostore/simple-web-component 1.0.32 → 1.0.34

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

@@ -1142,10 +1142,12 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_CONNECTED_SWC_APP_METADATA_KEY: () => ON_CONNECTED_SWC_APP_METADATA_KEY,
     ON_INITIALIZE_METADATA_KEY: () => ON_INITIALIZE_METADATA_KEY,
     PROPERTY_SET_METADATA_KEY: () => PROPERTY_SET_METADATA_KEY,
+    PUBLISH_SWC_APP_MESSAGE_METADATA_KEY: () => PUBLISH_SWC_APP_MESSAGE_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
-    SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY: () => SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY,
+    SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY: () => SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY,
+    SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY: () => SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcUtils: () => SwcUtils,
     addClass: () => addClass,
@@ -1177,6 +1179,8 @@ var dooboostoreSimpleWebComponent = (() => {
     attributeHost: () => attributeHost,
     changedAttributeHost: () => changedAttributeHost,
     commentNode: () => commentNode,
+    convertAttributeValue: () => convertAttributeValue,
+    convertValue: () => convertValue2,
     createElement: () => createElement,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
@@ -1192,13 +1196,16 @@ var dooboostoreSimpleWebComponent = (() => {
     firstAppHost: () => firstAppHost,
     firstHost: () => firstHost,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
+    getAttributeValue: () => getAttributeValue,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
     getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
+    getPublishSwcAppMessageMetadata: () => getPublishSwcAppMessageMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
-    getSubscribeSwcAppRouteChangeMetadata: () => getSubscribeSwcAppRouteChangeMetadata,
+    getSubscribeSwcAppMessageWhileConnectedMetadata: () => getSubscribeSwcAppMessageWhileConnectedMetadata,
+    getSubscribeSwcAppRouteChangeWhileConnectedMetadata: () => getSubscribeSwcAppRouteChangeWhileConnectedMetadata,
     host: () => host,
     htmlAElement: () => htmlAElement,
     htmlArticleElement: () => htmlArticleElement,
@@ -1227,6 +1234,7 @@ var dooboostoreSimpleWebComponent = (() => {
     onDisconnected: () => onDisconnected,
     onInitialize: () => onInitialize,
     parentHost: () => parentHost,
+    publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
     queryAllHost: () => queryAllHost,
@@ -1246,7 +1254,8 @@ var dooboostoreSimpleWebComponent = (() => {
     setPropertyHost: () => setPropertyHost,
     setStyle: () => setStyle,
     setStyleHost: () => setStyleHost,
-    subscribeSwcAppRouteChange: () => subscribeSwcAppRouteChange,
+    subscribeSwcAppMessageWhileConnected: () => subscribeSwcAppMessageWhileConnected,
+    subscribeSwcAppRouteChangeWhileConnected: () => subscribeSwcAppRouteChangeWhileConnected,
     textNode: () => textNode,
     toggleClass: () => toggleClass,
     toggleClassHost: () => toggleClassHost,
@@ -6334,8 +6343,8 @@ var dooboostoreSimpleWebComponent = (() => {
       return (0, SwcUtils2.findNearestSwcHost)(el);
     };
     SwcUtils2.getAppHosts = (el) => {
-      const hosts = (0, SwcUtils2.getHosts)(el);
-      return hosts.filter((host2) => host2.tagName.toLowerCase() === "swc-app" || host2.getAttribute("is")?.startsWith("swc-app-"));
+      const hosts = SwcUtils2.findAllParentAppHostsDirect(el);
+      return hosts;
     };
     SwcUtils2.getAppHost = (el) => {
       const appHosts = (0, SwcUtils2.getAppHosts)(el);
@@ -6348,6 +6357,10 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     SwcUtils2.findAllParentAppHostsDirect = (el) => {
       const appHosts = [];
+      const w = el.ownerDocument?.defaultView || (typeof window !== "undefined" ? window : void 0);
+      if (!w) {
+        return appHosts;
+      }
       let current = el;
       while (current) {
         const isAppHost = current.tagName.toLowerCase() === "swc-app" || current.getAttribute("is")?.startsWith("swc-app-");
@@ -6358,7 +6371,7 @@ var dooboostoreSimpleWebComponent = (() => {
           current = current.parentElement;
         } else {
           const root = current.getRootNode();
-          if (root instanceof ShadowRoot) {
+          if (w.ShadowRoot && root instanceof w.ShadowRoot) {
             current = root.host;
           } else {
             break;
@@ -6433,54 +6446,67 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       list.push({ propertyKey, selector: selectorOrTarget, type, options: fullOptions });
       const original = descriptor.value;
-      descriptor.value = async function(...args) {
+      descriptor.value = function(...args) {
         ensureInit(this);
-        const detail = await original.apply(this, args);
-        const event = new CustomEvent(type, {
-          detail,
-          bubbles: fullOptions.bubbles,
-          composed: fullOptions.composed,
-          cancelable: fullOptions.cancelable
-        });
-        const hostSet = SwcUtils.getHostSet(this);
-        const conf = getElementConfig(this);
-        const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-        const eventTargets = [];
-        if (selectorOrTarget === ":window") eventTargets.push(currentWin);
-        else if (selectorOrTarget === ":document") eventTargets.push(currentWin.document);
-        else if (selectorOrTarget === ":parentHost") {
-          if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selectorOrTarget === ":appHost") {
-          if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selectorOrTarget === ":firstHost") {
-          if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selectorOrTarget === ":lastHost") {
-          if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selectorOrTarget === ":firstAppHost") {
-          if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selectorOrTarget === ":lastAppHost") {
-          if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selectorOrTarget === ":hosts") {
-          hostSet.$hosts.forEach((h) => eventTargets.push(h));
-        } else if (selectorOrTarget === ":appHosts") {
-          hostSet.$appHosts.forEach((h) => eventTargets.push(h));
-        } else if (selectorOrTarget === ":host" || !selectorOrTarget) eventTargets.push(this);
-        else {
-          const r = fullOptions.root || "auto";
-          const searchRoots = [];
-          if (r === "auto") searchRoots.push(this.shadowRoot || this);
-          else if (r === "light") searchRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            searchRoots.push(this);
-            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+        const res = original.apply(this, args);
+        const handleResult = (detail) => {
+          const event = new CustomEvent(type, {
+            detail,
+            bubbles: fullOptions.bubbles,
+            composed: fullOptions.composed,
+            cancelable: fullOptions.cancelable
+          });
+          const hostSet = SwcUtils.getHostSet(this);
+          const conf = getElementConfig(this);
+          const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
+          const eventTargets = [];
+          if (selectorOrTarget === ":window") eventTargets.push(currentWin);
+          else if (selectorOrTarget === ":document") eventTargets.push(currentWin.document);
+          else if (selectorOrTarget === ":parentHost") {
+            if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+          } else if (selectorOrTarget === ":appHost") {
+            if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+          } else if (selectorOrTarget === ":firstHost") {
+            if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+          } else if (selectorOrTarget === ":lastHost") {
+            if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+          } else if (selectorOrTarget === ":firstAppHost") {
+            if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+          } else if (selectorOrTarget === ":lastAppHost") {
+            if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+          } else if (selectorOrTarget === ":hosts") {
+            hostSet.$hosts.forEach((h) => eventTargets.push(h));
+          } else if (selectorOrTarget === ":appHosts") {
+            hostSet.$appHosts.forEach((h) => eventTargets.push(h));
+          } else if (selectorOrTarget === ":host" || !selectorOrTarget) {
+            eventTargets.push(this);
+          } else {
+            const r = fullOptions.root || "auto";
+            const searchRoots = [];
+            if (r === "auto") searchRoots.push(this.shadowRoot || this);
+            else if (r === "light") searchRoots.push(this);
+            else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
+            else if (r === "all") {
+              searchRoots.push(this);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+            }
+            searchRoots.forEach((sr) => {
+              sr.querySelectorAll(selectorOrTarget).forEach((el) => eventTargets.push(el));
+            });
           }
-          searchRoots.forEach((sr) => {
-            sr.querySelectorAll(selectorOrTarget).forEach((el) => eventTargets.push(el));
+          eventTargets.forEach((t) => {
+            if (fullOptions.filter && !fullOptions.filter(t, detail, { currentThis: this, helper: hostSet })) {
+              return;
+            }
+            t.dispatchEvent(event);
           });
+          return detail;
+        };
+        if (res instanceof Promise) {
+          return res.then(handleResult);
+        } else {
+          return handleResult(res);
         }
-        eventTargets.forEach((t) => t.dispatchEvent(event));
-        return detail;
       };
     };
   }
@@ -6497,21 +6523,26 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/changedAttributeHost.ts
   var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for("simple-web-component:on-attribute-changed");
-  function changedAttributeHost(attributeName) {
+  var convertValue = (val, type) => {
+    if (val === null || val === void 0) return val;
+    if (type === Number) return Number(val);
+    if (type === Boolean) return val === "false" || val === "0" ? false : true;
+    return val;
+  };
+  function changedAttributeHost(attributeName, options = {}) {
     return (target, propertyKey) => {
       const constructor = target.constructor;
-      let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-      if (!meta) {
-        meta = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+      let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+      if (!metaList) {
+        metaList = [];
+        ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
       }
       const name = attributeName || String(propertyKey);
-      let methods = meta.get(name);
-      if (!methods) {
-        methods = [];
-        meta.set(name, methods);
-      }
-      if (!methods.includes(propertyKey)) methods.push(propertyKey);
+      metaList.push({
+        attributeName: name,
+        propertyKey,
+        options
+      });
     };
   }
   var getChangedAttributeMetadata = (target) => {
@@ -6519,7 +6550,21 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
   };
   var findAllAttributeChangedMetadata = (target) => {
-    return ReflectUtils.findAllMapMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, target);
+    const constructor = target instanceof Function ? target : target.constructor;
+    const metaList = ReflectUtils.findAllMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+    const result = /* @__PURE__ */ new Map();
+    metaList.forEach((meta) => {
+      meta.forEach((item) => {
+        if (!result.has(item.attributeName)) {
+          result.set(item.attributeName, []);
+        }
+        result.get(item.attributeName).push(item);
+      });
+    });
+    return result;
+  };
+  var convertAttributeValue = (val, type) => {
+    return convertValue(val, type);
   };
 
   // src/decorators/applyAttribute.ts
@@ -6545,70 +6590,80 @@ var dooboostoreSimpleWebComponent = (() => {
           options: { ...finalOptions, name: attributeName }
         });
         const original = descriptor.value;
-        descriptor.value = async function(...args) {
+        descriptor.value = function(...args) {
           ensureInit(this);
-          const res = await original.apply(this, args);
-          if (res !== void 0) {
-            const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $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);
-            else {
-              const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
-              if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...Array.from(found));
+          const res = original.apply(this, args);
+          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 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);
+              else {
+                const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+                if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...Array.from(found));
+                }
               }
-            }
-            targetEls.forEach((targetEl) => {
-              const resolvedRes = typeof res === "function" ? res(targetEl, hostSet) : res;
-              if (action === "set" || action === "update") {
-                if (attributeName) {
-                  if (resolvedRes === null || resolvedRes === void 0 || resolvedRes === false) {
+              targetEls.forEach((targetEl) => {
+                if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
+                  return;
+                }
+                const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+                if (action === "set" || action === "update") {
+                  if (attributeName) {
+                    if (resolvedRes === null || resolvedRes === void 0 || resolvedRes === false) {
+                      targetEl.removeAttribute(attributeName);
+                    } else {
+                      targetEl.setAttribute(attributeName, resolvedRes === true ? "" : String(resolvedRes));
+                    }
+                  } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([attr, val]) => {
+                      const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
+                      if (finalVal === null || finalVal === void 0 || finalVal === false) {
+                        targetEl.removeAttribute(attr);
+                      } else {
+                        targetEl.setAttribute(attr, finalVal === true ? "" : String(finalVal));
+                      }
+                    });
+                  }
+                } else if (action === "remove") {
+                  if (attributeName) {
                     targetEl.removeAttribute(attributeName);
+                  } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([attr, val]) => {
+                      const shouldRemove = typeof val === "function" ? val(targetEl, hostSet) : !!val;
+                      if (shouldRemove) targetEl.removeAttribute(attr);
+                    });
                   } else {
-                    targetEl.setAttribute(attributeName, resolvedRes === true ? "" : String(resolvedRes));
+                    const attrs = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
+                    attrs.forEach((a) => targetEl.removeAttribute(String(a)));
                   }
-                } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([attr, val]) => {
-                    const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
-                    if (finalVal === null || finalVal === void 0 || finalVal === false) {
-                      targetEl.removeAttribute(attr);
-                    } else {
-                      targetEl.setAttribute(attr, finalVal === true ? "" : String(finalVal));
-                    }
-                  });
-                }
-              } else if (action === "remove") {
-                if (attributeName) {
-                  targetEl.removeAttribute(attributeName);
-                } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([attr, val]) => {
-                    const shouldRemove = typeof val === "function" ? val(targetEl, hostSet) : !!val;
-                    if (shouldRemove) targetEl.removeAttribute(attr);
-                  });
-                } else {
-                  const attrs = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
-                  attrs.forEach((a) => targetEl.removeAttribute(String(a)));
                 }
-              }
-            });
+              });
+            }
+            return resolvedValue;
+          };
+          if (res instanceof Promise) {
+            return res.then(handleResult);
+          } else {
+            return handleResult(res);
           }
-          return res;
         };
         return descriptor;
       };
@@ -7906,7 +7961,7 @@ var dooboostoreSimpleWebComponent = (() => {
     }
   };
   function buildEnv(configWindow) {
-    const win = configWindow || (typeof window !== "undefined" ? window : void 0);
+    const win = configWindow;
     const doc = win?.document;
     const builtInTagMap = /* @__PURE__ */ new Map();
     for (const [cls, tag] of HTML_TAG_ENTRIES) {
@@ -7945,7 +8000,7 @@ var dooboostoreSimpleWebComponent = (() => {
         const aConf = getElementConfig(ancestors[i]);
         if (aConf?.window) return aConf.window;
       }
-      return typeof window !== "undefined" ? window : void 0;
+      return getElementConfig(this).window ?? (typeof window !== "undefined" ? window : void 0);
     };
     proto._invokeLifecycleMethod = function(methodName, hostSet, extraArgs = []) {
       ensureInit(this);
@@ -8047,8 +8102,11 @@ var dooboostoreSimpleWebComponent = (() => {
     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 originalStaticObservedAttributes = constructor.observedAttributes ?? [];
     const mergedObservedAttributes = [.../* @__PURE__ */ new Set([
       ...metadata.observedAttributes ?? [],
+      ...originalStaticObservedAttributes,
       ...attrChangeMap.keys(),
       ...attributeApplyNames,
       ...hostAttributes,
@@ -8057,7 +8115,6 @@ var dooboostoreSimpleWebComponent = (() => {
       ...swcOnEvents
     ])];
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
-    const proto = constructor.prototype;
     setupPrototype(proto);
     const originalConnected = proto.connectedCallback;
     proto.connectedCallback = function() {
@@ -8066,8 +8123,10 @@ var dooboostoreSimpleWebComponent = (() => {
       const appHost2 = hostSet.$appHost;
       const conf = getElementConfig(this);
       const currentWin = this._resolveWindow(conf);
-      if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
-        this.attachShadow({ mode: "open" });
+      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);
@@ -8079,12 +8138,16 @@ var dooboostoreSimpleWebComponent = (() => {
         for (const meta of connectedInnerHtmlList) {
           const res = this._invokeLifecycleMethod(meta.propertyKey, hostSet);
           if (res !== void 0) {
-            if (meta.options.useShadow) sContent += res;
+            if (meta.options.useShadow || conf?.useShadow) sContent += res;
             else lContent += res;
           }
         }
-        if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
-        if (lContent) this.innerHTML = lContent;
+        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)) {
@@ -8196,7 +8259,7 @@ var dooboostoreSimpleWebComponent = (() => {
           const handler = async (event) => {
             if (options.filter) {
               const helper = SwcUtils.getHelperAndHostSet(currentWin, t);
-              if (!options.filter(event, helper)) {
+              if (!options.filter(event, { currentThis: this, helper })) {
                 return;
               }
             }
@@ -8280,15 +8343,17 @@ var dooboostoreSimpleWebComponent = (() => {
         const expr = ae.getFirstExpression("call-return");
         if (expr) {
           const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
+          const helperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
           try {
+            const script = ConvertUtils2.decodeHtmlEntity(expr.script, win2.document);
             const result = FunctionUtils.executeReturn({
-              script: ConvertUtils2.decodeHtmlEntity(expr.script, win2.document),
+              script,
               context: this,
-              args: SwcUtils.getHelperAndHostSet(win2, this)
+              args: helperAndHostSet
             });
-            processedVal = String(result);
+            processedVal = result;
           } catch (e) {
-            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}:`, e);
+            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${helperAndHostSet}`, e);
             processedVal = newVal;
           }
         }
@@ -8303,9 +8368,12 @@ var dooboostoreSimpleWebComponent = (() => {
       if (hostCustomEventMeta && newVal !== null) {
         this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
       }
-      const mKeys = attrChangeMap.get(name2);
-      if (mKeys && Array.isArray(mKeys)) {
-        for (const key of mKeys) this[key](processedVal, old, name2, hSet);
+      const metaList = attrChangeMap.get(name2);
+      if (metaList && Array.isArray(metaList)) {
+        for (const meta of metaList) {
+          const convertedVal = convertAttributeValue(processedVal, meta.options.type);
+          this[meta.propertyKey](convertedVal, old, name2, hSet);
+        }
       }
     };
     Object.defineProperty(constructor, "observedAttributes", {
@@ -8322,12 +8390,38 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/attribute.ts
   var ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for("simple-web-component:attribute-field");
-  var convertValue = (val, type) => {
+  var convertValue2 = (val, type) => {
     if (val === null || val === void 0) return val;
     if (type === Number) return Number(val);
     if (type === Boolean) return val === "false" || val === "0" ? false : true;
     return val;
   };
+  var getAttributeValue = (inst, attrName, options) => {
+    const conf = getElementConfig(inst);
+    const currentWin = inst._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
+    const targets = options?.selector ? resolveTargetEls(inst, options.selector, options, currentWin) : [inst];
+    const primaryTarget = targets[0];
+    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");
+      if (expr) {
+        try {
+          const result = FunctionUtils.executeReturn({
+            script: ConvertUtils2.decodeHtmlEntity(expr.script, currentWin.document),
+            context: inst,
+            args: SwcUtils.getHelperAndHostSet(currentWin, inst)
+          });
+          return convertValue2(result, options?.type);
+        } catch (e) {
+          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+          return convertValue2(domVal, options?.type);
+        }
+      }
+      return convertValue2(domVal, options?.type);
+    }
+    return null;
+  };
   var resolveTargetEls = (inst, selector, options, currentWin) => {
     const r = options.root || "auto";
     const results = [];
@@ -8402,35 +8496,13 @@ var dooboostoreSimpleWebComponent = (() => {
         Object.defineProperty(target, propertyKey, {
           get() {
             const attrName = options.name || String(propertyKey);
-            const conf = getElementConfig(this);
-            const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-            const targetType = options.type || designType;
-            const targets = resolveTargetEls(this, selector, options, currentWin);
-            const primaryTarget = targets[0];
-            if (primaryTarget && typeof primaryTarget.hasAttribute === "function") {
-              if (primaryTarget.hasAttribute(attrName)) {
-                let domVal = primaryTarget.getAttribute(attrName);
-                const ae = new ActionExpression(domVal);
-                const expr = ae.getFirstExpression("call-return");
-                if (expr) {
-                  try {
-                    const result = FunctionUtils.executeReturn({
-                      script: ConvertUtils2.decodeHtmlEntity(expr.script, currentWin.document),
-                      context: this,
-                      args: SwcUtils.getHelperAndHostSet(currentWin, this)
-                    });
-                    return convertValue(result, targetType);
-                  } catch (e) {
-                    console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
-                    return convertValue(domVal, targetType);
-                  }
-                }
-                return convertValue(domVal, targetType);
-              }
-              return null;
-            }
-            const data = convertValue(this[privateKey], targetType);
-            return data;
+            const mergedOptions = {
+              ...options,
+              selector,
+              type: options.type || designType
+            };
+            const result = getAttributeValue(this, attrName, mergedOptions);
+            return result !== null ? result : this[privateKey];
           },
           set(nv) {
             const attrName = options.name || String(propertyKey);
@@ -8543,14 +8615,7 @@ var dooboostoreSimpleWebComponent = (() => {
         const res = original.apply(this, args);
         const runApply = (target, val) => {
           const pos = options.position || "beforeEnd";
-          const defaultFilter = (t, v) => {
-            if (v instanceof Node) return !t.contains(v);
-            if (pos === "innerHtml" && typeof v === "string") return t.innerHTML !== v;
-            if (pos === "replaceChildren" && v instanceof Node) return !t.contains(v);
-            return true;
-          };
-          const activeFilter = options.filter || defaultFilter;
-          if (activeFilter(target, val, hostSet)) {
+          if (!options.filter || options.filter(target, val, { currentThis: this, helper: hostSet })) {
             applyToDom(target, val, pos, currentDoc);
           }
         };
@@ -8622,81 +8687,91 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         metaList.set(propertyKey, { propertyKey, selector, action, options: finalOptions });
         const original = descriptor.value;
-        descriptor.value = async function(...args) {
+        descriptor.value = function(...args) {
           ensureInit(this);
-          const res = await original.apply(this, args);
-          if (res !== void 0) {
-            const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $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);
-            else {
-              const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
-              if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...Array.from(found));
-              }
-            }
-            targetEls.forEach((targetEl) => {
-              const resolvedRes = typeof res === "function" ? res(targetEl, hostSet) : res;
-              if (action === "set") {
-                let classes = "";
-                if (classMap && typeof classMap === "string") {
-                  classes = resolvedRes ? classMap : "";
-                } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  classes = Object.entries(resolvedRes).filter(([_, force]) => typeof force === "function" ? force(targetEl, hostSet) : !!force).map(([cls]) => cls).join(" ");
-                } else {
-                  classes = Array.isArray(resolvedRes) ? resolvedRes.join(" ") : String(resolvedRes);
+          const res = original.apply(this, args);
+          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 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);
+              else {
+                const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+                if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...Array.from(found));
                 }
-                targetEl.className = classes;
-              } else if (action === "update" || action === "toggle") {
-                if (classMap && typeof classMap === "string") {
-                  targetEl.classList.toggle(classMap, !!resolvedRes);
-                } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([cls, force]) => {
-                    const isActive = typeof force === "function" ? force(targetEl, hostSet) : !!force;
-                    targetEl.classList.toggle(cls, isActive);
-                  });
-                } else {
-                  const classes = Array.isArray(resolvedRes) ? resolvedRes.map(String) : [String(resolvedRes)];
-                  if (action === "update") targetEl.classList.add(...classes);
-                  else classes.forEach((c) => targetEl.classList.toggle(c));
+              }
+              targetEls.forEach((targetEl) => {
+                if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
+                  return;
                 }
-              } else if (action === "add" || action === "remove") {
-                if (classMap && typeof classMap === "string" && !!resolvedRes) {
-                  if (action === "add") targetEl.classList.add(classMap);
-                  else targetEl.classList.remove(classMap);
-                } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([cls, force]) => {
-                    const shouldExecute = typeof force === "function" ? force(targetEl, hostSet) : !!force;
-                    if (shouldExecute) {
-                      if (action === "add") targetEl.classList.add(cls);
-                      else targetEl.classList.remove(cls);
-                    }
-                  });
-                } else {
-                  const classes = Array.isArray(resolvedRes) ? resolvedRes.map(String) : [String(resolvedRes)];
-                  if (action === "add") targetEl.classList.add(...classes);
-                  else targetEl.classList.remove(...classes);
+                const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+                if (action === "set") {
+                  let classes = "";
+                  if (classMap && typeof classMap === "string") {
+                    classes = resolvedRes ? classMap : "";
+                  } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    classes = Object.entries(resolvedRes).filter(([_, force]) => typeof force === "function" ? force(targetEl, hostSet) : !!force).map(([cls]) => cls).join(" ");
+                  } else {
+                    classes = Array.isArray(resolvedRes) ? resolvedRes.join(" ") : String(resolvedRes);
+                  }
+                  targetEl.className = classes;
+                } else if (action === "update" || action === "toggle") {
+                  if (classMap && typeof classMap === "string") {
+                    targetEl.classList.toggle(classMap, !!resolvedRes);
+                  } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([cls, force]) => {
+                      const isActive = typeof force === "function" ? force(targetEl, hostSet) : !!force;
+                      targetEl.classList.toggle(cls, isActive);
+                    });
+                  } else {
+                    const classes = Array.isArray(resolvedRes) ? resolvedRes.map(String) : [String(resolvedRes)];
+                    if (action === "update") targetEl.classList.add(...classes);
+                    else classes.forEach((c) => targetEl.classList.toggle(c));
+                  }
+                } else if (action === "add" || action === "remove") {
+                  if (classMap && typeof classMap === "string" && !!resolvedRes) {
+                    if (action === "add") targetEl.classList.add(classMap);
+                    else targetEl.classList.remove(classMap);
+                  } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([cls, force]) => {
+                      const shouldExecute = typeof force === "function" ? force(targetEl, hostSet) : !!force;
+                      if (shouldExecute) {
+                        if (action === "add") targetEl.classList.add(cls);
+                        else targetEl.classList.remove(cls);
+                      }
+                    });
+                  } else {
+                    const classes = Array.isArray(resolvedRes) ? resolvedRes.map(String) : [String(resolvedRes)];
+                    if (action === "add") targetEl.classList.add(...classes);
+                    else targetEl.classList.remove(...classes);
+                  }
                 }
-              }
-            });
+              });
+            }
+            return resolvedValue;
+          };
+          if (res instanceof Promise) {
+            return res.then(handleResult);
+          } else {
+            return handleResult(res);
           }
-          return res;
         };
         return descriptor;
       };
@@ -8742,67 +8817,77 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         metaList.set(propertyKey, { propertyKey, selector, action, options });
         const original = descriptor.value;
-        descriptor.value = async function(...args) {
+        descriptor.value = function(...args) {
           ensureInit(this);
-          const res = await original.apply(this, args);
-          if (res !== void 0) {
-            const win = this.ownerDocument?.defaultView || window;
-            const host2 = this;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, host2);
-            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);
-            else {
-              const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
-              if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...Array.from(found));
+          const res = original.apply(this, args);
+          const handleResult = (resolvedValue) => {
+            if (resolvedValue !== void 0) {
+              const win = this.ownerDocument?.defaultView || window;
+              const host2 = this;
+              const hostSet = SwcUtils.getHelperAndHostSet(win, host2);
+              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);
+              else {
+                const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+                if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...Array.from(found));
+                }
               }
-            }
-            targetEls.forEach((targetEl) => {
-              const resolvedRes = typeof res === "function" ? res(targetEl, hostSet) : res;
-              if (action === "set" || action === "update") {
-                if (action === "set") targetEl.style.cssText = "";
-                if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([prop, val]) => {
-                    const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
-                    if (finalVal === null || finalVal === void 0) {
-                      targetEl.style.removeProperty(prop);
-                    } else {
-                      targetEl.style[prop] = String(finalVal);
-                    }
-                  });
-                } else if (typeof resolvedRes === "string") {
-                  targetEl.style.cssText = resolvedRes;
+              targetEls.forEach((targetEl) => {
+                if (options.filter && !options.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
+                  return;
                 }
-              } else if (action === "remove") {
-                if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes).forEach(([prop, val]) => {
-                    const shouldRemove = typeof val === "function" ? val(targetEl, hostSet) : !!val;
-                    if (shouldRemove) {
-                      targetEl.style.removeProperty(prop);
-                    }
-                  });
-                } else {
-                  const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
-                  props.forEach((p) => targetEl.style.removeProperty(String(p)));
+                const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+                if (action === "set" || action === "update") {
+                  if (action === "set") targetEl.style.cssText = "";
+                  if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([prop, val]) => {
+                      const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
+                      if (finalVal === null || finalVal === void 0) {
+                        targetEl.style.removeProperty(prop);
+                      } else {
+                        targetEl.style[prop] = String(finalVal);
+                      }
+                    });
+                  } else if (typeof resolvedRes === "string") {
+                    targetEl.style.cssText = resolvedRes;
+                  }
+                } else if (action === "remove") {
+                  if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                    Object.entries(resolvedRes).forEach(([prop, val]) => {
+                      const shouldRemove = typeof val === "function" ? val(targetEl, hostSet) : !!val;
+                      if (shouldRemove) {
+                        targetEl.style.removeProperty(prop);
+                      }
+                    });
+                  } else {
+                    const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
+                    props.forEach((p) => targetEl.style.removeProperty(String(p)));
+                  }
                 }
-              }
-            });
+              });
+            }
+            return resolvedValue;
+          };
+          if (res instanceof Promise) {
+            return res.then(handleResult);
+          } else {
+            return handleResult(res);
           }
-          return res;
         };
         return descriptor;
       };
@@ -8852,48 +8937,59 @@ var dooboostoreSimpleWebComponent = (() => {
         options: { ...finalOptions, name: propertyName }
       });
       const original = descriptor.value;
-      descriptor.value = async function(...args) {
+      descriptor.value = function(...args) {
         ensureInit(this);
-        const res = await original.apply(this, args);
-        if (res !== void 0) {
-          const win = this.ownerDocument?.defaultView || window;
-          const host2 = this;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host2), $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);
-          else {
-            const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
-            if (targetRoot) {
-              const found = targetRoot.querySelectorAll(selector);
-              if (found) targetEls.push(...Array.from(found));
+        const res = original.apply(this, args);
+        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 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);
+            else {
+              const targetRoot = r === "auto" ? host2.shadowRoot || host2 : r === "shadow" ? host2.shadowRoot : host2;
+              if (targetRoot) {
+                const found = targetRoot.querySelectorAll(selector);
+                if (found) targetEls.push(...Array.from(found));
+              }
             }
+            targetEls.forEach((targetEl) => {
+              if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
+                return;
+              }
+              const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+              if (propertyName) {
+                targetEl[propertyName] = resolvedRes;
+              } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                Object.entries(resolvedRes).forEach(([prop, val]) => {
+                  const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
+                  targetEl[prop] = finalVal;
+                });
+              } else {
+                targetEl.value = resolvedRes;
+              }
+            });
           }
-          targetEls.forEach((targetEl) => {
-            const resolvedRes = typeof res === "function" ? res(targetEl, hostSet) : res;
-            if (propertyName) {
-              targetEl[propertyName] = resolvedRes;
-            } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-              Object.entries(resolvedRes).forEach(([prop, val]) => {
-                const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
-                targetEl[prop] = finalVal;
-              });
-            } else {
-              targetEl.value = resolvedRes;
-            }
-          });
+          return resolvedValue;
+        };
+        if (res instanceof Promise) {
+          return res.then(handleResult);
+        } else {
+          return handleResult(res);
         }
       };
     };
@@ -8902,25 +8998,25 @@ var dooboostoreSimpleWebComponent = (() => {
     return setProperty(":host", propertyNameOrOptions, options);
   };
 
-  // src/decorators/subscribeSwcAppRouteChange.ts
-  var SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-route-change");
-  function createSwcAppRouteChangeSubscriber(options) {
+  // src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts
+  var SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-route-change-while-connected");
+  function createSubscribeSwcAppRouteChangeWhileConnected(options) {
     return (target, propertyKey, descriptor) => {
       const pathPattern = options?.path;
       const filter = options?.filter;
       const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, constructor);
+      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
       if (!list) {
         list = [];
-        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, list, constructor);
+        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
       }
       list.push({ propertyKey, pathPattern, filter });
       return descriptor;
     };
   }
-  function subscribeSwcAppRouteChange(targetOrOptions, propertyKey, descriptor) {
+  function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions, propertyKey, descriptor) {
     if (propertyKey && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-      return createSwcAppRouteChangeSubscriber({})(targetOrOptions, propertyKey, descriptor);
+      return createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKey, descriptor);
     }
     let options = {};
     if (Array.isArray(targetOrOptions)) {
@@ -8930,11 +9026,110 @@ var dooboostoreSimpleWebComponent = (() => {
     } else if (targetOrOptions && typeof targetOrOptions === "object") {
       options = targetOrOptions;
     }
-    return createSwcAppRouteChangeSubscriber(options);
+    return createSubscribeSwcAppRouteChangeWhileConnected(options);
+  }
+  var getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  };
+
+  // src/decorators/subscribeSwcAppMessageWhileConnected.ts
+  var SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-message-while-connected");
+  function createSubscribeSwcAppMessageWhileConnected(options, messageType) {
+    return (target, propertyKey, descriptor) => {
+      const filter = options?.filter;
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, messageType, filter });
+      return descriptor;
+    };
+  }
+  function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions, optionsOrPropertyKey, descriptor) {
+    if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object" && optionsOrPropertyKey && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol") && descriptor) {
+      const target = targetOrMessageTypeOrOptions;
+      const propertyKey = optionsOrPropertyKey;
+      return createSubscribeSwcAppMessageWhileConnected({})(target, propertyKey, descriptor);
+    }
+    let messageType;
+    let options = {};
+    if (typeof targetOrMessageTypeOrOptions === "string") {
+      messageType = targetOrMessageTypeOrOptions;
+      if (optionsOrPropertyKey && typeof optionsOrPropertyKey === "object") {
+        options = optionsOrPropertyKey;
+      }
+    } else if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object") {
+      options = targetOrMessageTypeOrOptions;
+    }
+    return createSubscribeSwcAppMessageWhileConnected(options, messageType);
+  }
+  var getSubscribeSwcAppMessageWhileConnectedMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  };
+
+  // src/decorators/publishSwcAppMessage.ts
+  var PUBLISH_SWC_APP_MESSAGE_METADATA_KEY = Symbol.for("simple-web-component:publish-swc-app-message");
+  function createPublishSwcAppMessage(messageType) {
+    return (target, propertyKey, descriptor) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, messageType });
+      if (!descriptor) {
+        return descriptor;
+      }
+      const originalMethod = descriptor.value;
+      descriptor.value = function(...args) {
+        const result = originalMethod.apply(this, args);
+        if (result instanceof Promise) {
+          result.then((data) => {
+            const appHost2 = SwcUtils.getAppHost(this);
+            if (appHost2) {
+              appHost2.publishMessage({
+                publisher: this,
+                data,
+                type: messageType
+              });
+            }
+          }).catch((err) => {
+            console.warn("publishSwcAppMessage async error:", err);
+          });
+        } else {
+          const appHost2 = SwcUtils.getAppHost(this);
+          if (appHost2) {
+            appHost2.publishMessage({
+              publisher: this,
+              data: result,
+              type: messageType
+            });
+          }
+        }
+        return result;
+      };
+      return descriptor;
+    };
+  }
+  function publishSwcAppMessage(targetOrMessageType, propertyKey, descriptor) {
+    if (targetOrMessageType && typeof targetOrMessageType === "object" && propertyKey && (typeof propertyKey === "string" || typeof propertyKey === "symbol") && descriptor) {
+      const target = targetOrMessageType;
+      return createPublishSwcAppMessage()(target, propertyKey, descriptor);
+    }
+    let messageType;
+    if (typeof targetOrMessageType === "string") {
+      messageType = targetOrMessageType;
+    }
+    return createPublishSwcAppMessage(messageType);
   }
-  var getSubscribeSwcAppRouteChangeMetadata = (target) => {
+  var getPublishSwcAppMessageMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, constructor);
+    return ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor);
   };
 
   // ../simple-boot/dist/esm/decorators/SimDecorator.js