@dooboostore/simple-web-component 1.0.38 → 1.0.40

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

@@ -1123,9 +1123,8 @@ var dooboostoreSimpleWebComponent = (() => {
     ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
     APPLY_NODE_METADATA_KEY: () => APPLY_NODE_METADATA_KEY,
     APPLY_SLOT_METADATA_KEY: () => APPLY_SLOT_METADATA_KEY,
-    ATTRIBUTE_APPLY_METADATA_KEY: () => ATTRIBUTE_APPLY_METADATA_KEY,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
-    ATTRIBUTE_FIELD_METADATA_KEY: () => ATTRIBUTE_FIELD_METADATA_KEY,
+    ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
     BROWSER_GLOBALS: () => BROWSER_GLOBALS,
     CLASS_METADATA_KEY: () => CLASS_METADATA_KEY,
     DOM_EVENT_NAMES: () => DOM_EVENT_NAMES,
@@ -1145,7 +1144,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_CONNECTED_METADATA_KEY: () => ON_CONNECTED_METADATA_KEY,
     ON_CONNECTED_SWC_APP_METADATA_KEY: () => ON_CONNECTED_SWC_APP_METADATA_KEY,
     ON_INITIALIZE_METADATA_KEY: () => ON_INITIALIZE_METADATA_KEY,
-    PROPERTY_SET_METADATA_KEY: () => PROPERTY_SET_METADATA_KEY,
+    PROPERTY_METADATA_KEY: () => PROPERTY_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,
@@ -1177,43 +1176,29 @@ var dooboostoreSimpleWebComponent = (() => {
     addEventListenerDocument: () => addEventListenerDocument,
     addEventListenerThis: () => addEventListenerThis,
     addEventListenerWindow: () => addEventListenerWindow,
+    afterBeginLightNodeThis: () => afterBeginLightNodeThis,
+    afterBeginNodeThis: () => afterBeginNodeThis,
     allAppHost: () => allAppHost,
     allParentHost: () => allParentHost,
+    appendHtmlSlot: () => appendHtmlSlot,
+    appendSlot: () => appendSlot,
+    appendTextSlot: () => appendTextSlot,
     applyAttribute: () => applyAttribute,
-    applyAttributeThis: () => applyAttributeThis,
     applyClass: () => applyClass,
     applyClassThis: () => applyClassThis,
     applyNode: () => applyNode,
-    applyNodeInnerHtml: () => applyNodeInnerHtml,
-    applyNodeInnerText: () => applyNodeInnerText,
-    applyNodeReplaceChildren: () => applyNodeReplaceChildren,
     applyNodeThis: () => applyNodeThis,
-    applyNodeThisAfterBegin: () => applyNodeThisAfterBegin,
-    applyNodeThisAfterBeginLightDom: () => applyNodeThisAfterBeginLightDom,
-    applyNodeThisBeforeEnd: () => applyNodeThisBeforeEnd,
-    applyNodeThisBeforeEndLightDom: () => applyNodeThisBeforeEndLightDom,
-    applyNodeThisBeforeEndShadow: () => applyNodeThisBeforeEndShadow,
-    applyNodeThisReplaceChildren: () => applyNodeThisReplaceChildren,
-    applyNodeThisReplaceChildrenLightDom: () => applyNodeThisReplaceChildrenLightDom,
+    applyProperty: () => applyProperty,
     applySlot: () => applySlot,
-    applySlotAppend: () => applySlotAppend,
-    applySlotAppendHtml: () => applySlotAppendHtml,
-    applySlotAppendText: () => applySlotAppendText,
-    applySlotClear: () => applySlotClear,
-    applySlotPrepend: () => applySlotPrepend,
-    applySlotPrependHtml: () => applySlotPrependHtml,
-    applySlotPrependText: () => applySlotPrependText,
-    applySlotReplaceChildren: () => applySlotReplaceChildren,
-    applySlotReplaceChildrenHtml: () => applySlotReplaceChildrenHtml,
-    applySlotReplaceChildrenText: () => applySlotReplaceChildrenText,
     applyStyle: () => applyStyle,
     applyStyleThis: () => applyStyleThis,
-    applyThisInnerHtmlNode: () => applyThisInnerHtmlNode,
-    applyThisInnerHtmlNodeLightDom: () => applyThisInnerHtmlNodeLightDom,
-    applyThisReplaceChildrenNodeLightDom: () => applyThisReplaceChildrenNodeLightDom,
     attribute: () => attribute,
     attributeThis: () => attributeThis,
+    beforeEndLightNodeThis: () => beforeEndLightNodeThis,
+    beforeEndNodeThis: () => beforeEndNodeThis,
+    beforeEndShadowNodeThis: () => beforeEndShadowNodeThis,
     changedAttributeThis: () => changedAttributeThis,
+    clearSlot: () => clearSlot,
     commentNode: () => commentNode,
     convertAttributeValue: () => convertAttributeValue,
     convertValue: () => convertValue2,
@@ -1243,6 +1228,8 @@ var dooboostoreSimpleWebComponent = (() => {
     findAllOnConnectedAfterMetadata: () => findAllOnConnectedAfterMetadata,
     findAllOnConnectedBeforeMetadata: () => findAllOnConnectedBeforeMetadata,
     findAllOnConnectedMetadata: () => findAllOnConnectedMetadata,
+    findAllPropertyApplyMetadata: () => findAllPropertyApplyMetadata,
+    findAllPropertyMetadata: () => findAllPropertyMetadata,
     findAllStateMetadata: () => findAllStateMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
@@ -1267,6 +1254,15 @@ var dooboostoreSimpleWebComponent = (() => {
     htmlSectionElement: () => htmlSectionElement,
     htmlSpanElement: () => htmlSpanElement,
     htmlUlElement: () => htmlUlElement,
+    innerHtmlLightNode: () => innerHtmlLightNode,
+    innerHtmlLightNodeThis: () => innerHtmlLightNodeThis,
+    innerHtmlNode: () => innerHtmlNode,
+    innerHtmlNodeThis: () => innerHtmlNodeThis,
+    innerHtmlShadowNode: () => innerHtmlShadowNode,
+    innerTextLightNode: () => innerTextLightNode,
+    innerTextNode: () => innerTextNode,
+    innerTextNodeThis: () => innerTextNodeThis,
+    innerTextShadowNode: () => innerTextShadowNode,
     isSSR: () => isSSR,
     onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
@@ -1276,13 +1272,18 @@ var dooboostoreSimpleWebComponent = (() => {
     onConnectedAfter: () => onConnectedAfter,
     onConnectedBefore: () => onConnectedBefore,
     onConnectedCompleted: () => onConnectedCompleted,
-    onConnectedLightDom: () => onConnectedLightDom,
-    onConnectedShadowDom: () => onConnectedShadowDom,
+    onConnectedLight: () => onConnectedLight,
+    onConnectedShadow: () => onConnectedShadow,
     onConnectedSwcApp: () => onConnectedSwcApp,
     onDisconnected: () => onDisconnected,
     onDisconnectedAfter: () => onDisconnectedAfter,
     onDisconnectedBefore: () => onDisconnectedBefore,
     onInitialize: () => onInitialize,
+    prependHtmlSlot: () => prependHtmlSlot,
+    prependSlot: () => prependSlot,
+    prependTextSlot: () => prependTextSlot,
+    property: () => property,
+    propertyThis: () => propertyThis,
     publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
@@ -1292,14 +1293,19 @@ var dooboostoreSimpleWebComponent = (() => {
     queryHost: () => queryHost,
     queryThis: () => queryThis,
     queryWindow: () => queryWindow,
-    removeAttribute: () => removeAttribute,
-    removeAttributeThis: () => removeAttributeThis,
     removeClass: () => removeClass,
     removeClassThis: () => removeClassThis,
     removeSSRAttribute: () => removeSSRAttribute,
     removeStyle: () => removeStyle,
     removeStyleThis: () => removeStyleThis,
-    resolveTargetEls: () => resolveTargetEls,
+    replaceChildrenHtmlSlot: () => replaceChildrenHtmlSlot,
+    replaceChildrenLightNodeThis: () => replaceChildrenLightNodeThis,
+    replaceChildrenNode: () => replaceChildrenNode,
+    replaceChildrenNodeThis: () => replaceChildrenNodeThis,
+    replaceChildrenSlot: () => replaceChildrenSlot,
+    replaceChildrenTextSlot: () => replaceChildrenTextSlot,
+    resolveAttributeTargets: () => resolveAttributeTargets,
+    resolvePropertyTargets: () => resolvePropertyTargets,
     setAttribute: () => setAttribute,
     setAttributeThis: () => setAttributeThis,
     setClass: () => setClass,
@@ -1326,8 +1332,6 @@ var dooboostoreSimpleWebComponent = (() => {
     textNode: () => textNode,
     toggleClass: () => toggleClass,
     toggleClassThis: () => toggleClassThis,
-    updateAttribute: () => updateAttribute,
-    updateAttributeThis: () => updateAttributeThis,
     updateClass: () => updateClass,
     updateClassThis: () => updateClassThis,
     updateStyle: () => updateStyle,
@@ -4433,8 +4437,8 @@ var dooboostoreSimpleWebComponent = (() => {
           }
         }
         if (ValidUtils.isObject(obj)) {
-          for (const property in obj) {
-            obj[property] = ConvertUtils22.toObject(obj[property]);
+          for (const property2 in obj) {
+            obj[property2] = ConvertUtils22.toObject(obj[property2]);
           }
         }
         return obj;
@@ -4468,10 +4472,10 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     ConvertUtils22.concatenateToString = (object_o, unionString_s = "=", spilString_s = " ", pairString_s = "") => {
       const results = [];
-      for (const property in object_o) {
-        const value = object_o[property];
+      for (const property2 in object_o) {
+        const value = object_o[property2];
         if (value) {
-          results.push(property.toString() + unionString_s + pairString_s + value + pairString_s);
+          results.push(property2.toString() + unionString_s + pairString_s + value + pairString_s);
         }
       }
       return results.join(spilString_s);
@@ -6214,9 +6218,9 @@ var dooboostoreSimpleWebComponent = (() => {
   // ../core/dist/esm/function/FunctionUtils.js
   var FunctionUtils;
   ((FunctionUtils2) => {
-    FunctionUtils2.getParameterNames = (func, property) => {
-      if (typeof func === "object" && property) {
-        func = func[property];
+    FunctionUtils2.getParameterNames = (func, property2) => {
+      if (typeof func === "object" && property2) {
+        func = func[property2];
       }
       return new RegExp("(?:" + func.name + "\\s*|^)\\s*\\((.*?)\\)").exec(func.toString().replace(/\n/g, ""))?.[1].replace(/\/\*.*?\*\//g, "").replace(/ /g, "").split(",") ?? [];
     };
@@ -6635,7 +6639,7 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     list.push({ propertyKey, options });
   };
-  function onConnectedShadowDom(optionOrTarget, propertyKey, arg3) {
+  function onConnectedShadow(optionOrTarget, propertyKey, arg3) {
     if (propertyKey) {
       return decorator({ useShadow: true }, optionOrTarget, propertyKey);
     }
@@ -6643,7 +6647,7 @@ var dooboostoreSimpleWebComponent = (() => {
       decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
     };
   }
-  function onConnectedLightDom(optionOrTarget, propertyKey, arg3) {
+  function onConnectedLight(optionOrTarget, propertyKey, arg3) {
     if (propertyKey) {
       return decorator({ useShadow: false }, optionOrTarget, propertyKey);
     }
@@ -9125,132 +9129,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return convertValue(val, type);
   };
 
-  // src/decorators/applyAttribute.ts
-  var ATTRIBUTE_APPLY_METADATA_KEY = Symbol.for("simple-web-component:attribute-apply");
-  function createAttributeDecorator(action) {
-    return (selector, nameOrOptions, options = {}) => {
-      return (target, propertyKey, descriptor) => {
-        const constructor = target.constructor;
-        let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_APPLY_METADATA_KEY, constructor);
-        if (!metaList) {
-          metaList = /* @__PURE__ */ new Map();
-          ReflectUtils.defineMetadata(ATTRIBUTE_APPLY_METADATA_KEY, metaList, constructor);
-        }
-        let attributeName = typeof nameOrOptions === "string" ? nameOrOptions : void 0;
-        let finalOptions = options;
-        if (typeof nameOrOptions === "object" && nameOrOptions !== null) {
-          finalOptions = nameOrOptions;
-        }
-        metaList.set(propertyKey, {
-          propertyKey,
-          selector,
-          action,
-          options: { ...finalOptions, name: attributeName }
-        });
-        const original = descriptor.value;
-        descriptor.value = function(...args) {
-          ensureInit(this);
-          const res = original.apply(this, args);
-          const handleResult = (resolvedValue) => {
-            if (resolvedValue !== void 0) {
-              const win = this.ownerDocument?.defaultView || window;
-              const host = this;
-              const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-              const r = finalOptions.root || "auto";
-              const targetEls = [];
-              const applyRoot = (t) => {
-                if (!t || !(t instanceof win.HTMLElement)) return;
-                targetEls.push(t);
-              };
-              if (selector === "$this" || !selector) applyRoot(host);
-              else if (selector === "$host") applyRoot(hostSet.$host);
-              else if (selector === "$parentHost") applyRoot(hostSet.$parentHost);
-              else if (selector === "$appHost") applyRoot(hostSet.$appHost);
-              else if (selector === "$firstHost") applyRoot(hostSet.$firstHost);
-              else if (selector === "$lastHost") applyRoot(hostSet.$lastHost);
-              else if (selector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
-              else if (selector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
-              else if (selector === "$hosts") hostSet.$hosts.forEach(applyRoot);
-              else if (selector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
-              else {
-                const targetRoot = r === "auto" ? host.shadowRoot || host : r === "shadow" ? host.shadowRoot : host;
-                if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...Array.from(found));
-                }
-              }
-              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 {
-                    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 descriptor;
-      };
-    };
-  }
-  function applyAttribute(selector, action = "update", options = {}) {
-    return createAttributeDecorator(action)(selector, options);
-  }
-  var setAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("set")(selector, nameOrOptions, options);
-  var updateAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("update")(selector, nameOrOptions, options);
-  var removeAttribute = (selector, nameOrOptions, options = {}) => createAttributeDecorator("remove")(selector, nameOrOptions, options);
-  function applyAttributeThis(action = "update", options = {}) {
-    return createAttributeDecorator(action)("$this", 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);
-    maps.forEach((map) => {
-      if (map instanceof Map) {
-        map.forEach((v, k) => result.set(k, v));
-      }
-    });
-    return result;
-  };
-
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol.for("simple-web-component:query");
   function query(selectorOrTarget, options = {}) {
@@ -9664,98 +9542,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return InjectSituationType2;
   })(InjectSituationType || {});
 
-  // src/decorators/applySlot.ts
-  var APPLY_SLOT_METADATA_KEY = Symbol.for("simple-web-component:apply-slot");
-  function applySlot(id, options = { position: "replaceChildrenHtml" }) {
-    return (targetObj, propertyKey, descriptor) => {
-      const type = descriptor === void 0 ? "property" : "method";
-      if (type === "property") {
-        Object.defineProperty(targetObj, propertyKey, {
-          get() {
-            const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
-            return nodeSlot;
-          },
-          set(nv) {
-            if (nv) {
-            } else {
-              const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
-              nodeSlot.clear();
-            }
-          },
-          configurable: true,
-          enumerable: true
-        });
-      }
-      const constructor = targetObj.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor);
-      if (!metaList) {
-        metaList = [];
-        ReflectUtils.defineMetadata(APPLY_SLOT_METADATA_KEY, metaList, constructor);
-      }
-      metaList.push({ propertyKey, id, type, options });
-      if (type === "method") {
-        const original = descriptor.value;
-        descriptor.value = function(...args) {
-          ensureInit(this);
-          const conf = getElementConfig(this);
-          const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-          const currentDoc = currentWin.document;
-          const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
-          let res = original.apply(this, args);
-          if (res) {
-            const nodeSlot = new NodeSlot(this, this._swcId);
-            const pos = options.position || "replaceChildrenHtml";
-            const doc = currentWin.document;
-            if (pos === "replaceChildrenHtml") {
-              nodeSlot.replaceChildrenHtml(id, res);
-            } else if (pos === "replaceChildrenText") {
-              nodeSlot.replaceChildrenText(id, res);
-            } else if (pos === "appendHtml") {
-              nodeSlot.appendHtml(id, res);
-            } else if (pos === "appendText") {
-              nodeSlot.appendText(id, res);
-            } else if (pos === "prependHtml") {
-              nodeSlot.prependHtml(id, res);
-            } else if (pos === "prependText") {
-              nodeSlot.prependText(id, res);
-            } else if (pos === "clear") {
-              nodeSlot.clear(id);
-            }
-          }
-          return res;
-        };
-      }
-    };
-  }
-  var findAllApplySlotMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
-  };
-  function applySlotClear(id) {
-    return applySlot(id, { position: "clear" });
-  }
-  function applySlotPrependHtml(id) {
-    return applySlot(id, { position: "prependHtml" });
-  }
-  var applySlotPrepend = applySlotPrependHtml;
-  function applySlotPrependText(id) {
-    return applySlot(id, { position: "prependText" });
-  }
-  function applySlotAppendHtml(id) {
-    return applySlot(id, { position: "appendHtml" });
-  }
-  function applySlotAppendText(id) {
-    return applySlot(id, { position: "appendText" });
-  }
-  var applySlotAppend = applySlotAppendHtml;
-  function applySlotReplaceChildrenHtml(id) {
-    return applySlot(id, { position: "replaceChildrenHtml" });
-  }
-  var applySlotReplaceChildren = applySlotReplaceChildrenHtml;
-  function applySlotReplaceChildrenText(id) {
-    return applySlot(id, { position: "replaceChildrenText" });
-  }
-
   // src/decorators/state.ts
   var STATE_METADATA_KEY = Symbol.for("simple-web-component:state");
   function state(nameOrTarget, propertyKey) {
@@ -9763,7 +9549,6 @@ var dooboostoreSimpleWebComponent = (() => {
       let storage = targetObj[stateMetadata.propertyKey];
       Object.defineProperty(targetObj, stateMetadata.propertyKey, {
         set(nv) {
-          console.log("setState!!", nv);
           storage = nv;
           const config = getElementConfig(this);
           const ea = new ElementApply(this, { id: this._swcId });
@@ -9813,6 +9598,185 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor) ?? [];
   };
 
+  // src/decorators/applyProperty.ts
+  var PROPERTY_METADATA_KEY = Symbol.for("simple-web-component:property");
+  var resolvePropertyTargets = (inst, selector, options) => {
+    const conf = getElementConfig(inst);
+    const currentWin = conf.window;
+    const r = options.root || "auto";
+    const results = [];
+    const applyRoot = (target) => {
+      if (!target) return;
+      if (r === "auto") {
+        results.push(target);
+      } else {
+        if (r === "light" || r === "all") results.push(target);
+        if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
+      }
+    };
+    if (selector === "$this" || !selector) {
+      applyRoot(inst);
+    } else if (selector === "$window") {
+      results.push(currentWin);
+    } else if (selector === "$document") {
+      results.push(currentWin.document);
+    } else {
+      const hostSet = SwcUtils.getHostSet(inst);
+      if (selector === "$host") applyRoot(hostSet.$host);
+      else if (selector === "$parentHost") applyRoot(hostSet.$parentHost);
+      else if (selector === "$appHost") applyRoot(hostSet.$appHost);
+      else if (selector === "$firstHost") applyRoot(hostSet.$firstHost);
+      else if (selector === "$lastHost") applyRoot(hostSet.$lastHost);
+      else if (selector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
+      else if (selector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
+      else if (selector === "$hosts") hostSet.$hosts.forEach(applyRoot);
+      else if (selector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
+      else {
+        if (r === "shadow") {
+          const found = inst.shadowRoot?.querySelectorAll(selector);
+          if (found) results.push(...found);
+        } else if (r === "light") {
+          const found = inst.querySelectorAll(selector);
+          if (found) results.push(...found);
+        } else if (r === "all") {
+          const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+          const lMatch = inst.querySelectorAll(selector);
+          if (sMatch) results.push(...sMatch);
+          if (lMatch) results.push(...lMatch);
+        } else {
+          const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+          if (found) results.push(...found);
+        }
+      }
+    }
+    return results;
+  };
+  function applyProperty(selector, targetPropertyKeyOrOptions, options) {
+    return (target, propertyKey, descriptor) => {
+      const constructor = target.constructor;
+      const metaType = descriptor && typeof descriptor.value === "function" ? "method" : "property";
+      let finalOptions = {};
+      let targetPropertyKey;
+      if (typeof targetPropertyKeyOrOptions === "string" || typeof targetPropertyKeyOrOptions === "symbol") {
+        targetPropertyKey = targetPropertyKeyOrOptions;
+        finalOptions = options || {};
+      } else if (targetPropertyKeyOrOptions) {
+        finalOptions = targetPropertyKeyOrOptions;
+        targetPropertyKey = finalOptions.name || propertyKey;
+      } else {
+        targetPropertyKey = propertyKey;
+      }
+      let metaList = ReflectUtils.getOwnMetadata(PROPERTY_METADATA_KEY, constructor);
+      if (!metaList) {
+        metaList = [];
+        ReflectUtils.defineMetadata(PROPERTY_METADATA_KEY, metaList, constructor);
+      }
+      metaList.push({
+        propertyKey,
+        selector,
+        targetPropertyKey,
+        options: finalOptions,
+        type: metaType
+      });
+      const applyValueToTargets = (inst, resolvedValue) => {
+        if (resolvedValue === void 0) return resolvedValue;
+        const targetEls = resolvePropertyTargets(inst, selector, finalOptions);
+        const conf = getElementConfig(inst);
+        const currentWin = conf.window;
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+        targetEls.forEach((targetEl) => {
+          if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: inst, helper: hostSet })) {
+            return;
+          }
+          const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+          targetEl[targetPropertyKey] = resolvedRes;
+        });
+        return resolvedValue;
+      };
+      if (descriptor && typeof descriptor.value === "function") {
+        const original = descriptor.value;
+        descriptor.value = function(...args) {
+          ensureInit(this);
+          const res = original.apply(this, args);
+          if (res instanceof Promise) {
+            return res.then((v) => {
+              applyValueToTargets(this, v);
+              return v;
+            });
+          } else {
+            applyValueToTargets(this, res);
+            return res;
+          }
+        };
+        return;
+      }
+      Object.defineProperty(target, propertyKey, {
+        configurable: true,
+        enumerable: true,
+        get() {
+          ensureInit(this);
+          const targetEls = resolvePropertyTargets(this, selector, finalOptions);
+          const conf = getElementConfig(this);
+          const currentWin = conf.window;
+          const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+          const filtered = targetEls.filter((el) => {
+            if (finalOptions.filter && !finalOptions.filter(el, el[targetPropertyKey], { currentThis: this, helper: hostSet })) {
+              return false;
+            }
+            return true;
+          });
+          const values = filtered.map((el) => el[targetPropertyKey]);
+          return values.length === 1 ? values[0] : values;
+        },
+        set(value) {
+          ensureInit(this);
+          applyValueToTargets(this, value);
+        }
+      });
+    };
+  }
+  function property(selector, targetPropertyKeyOrOptions, options) {
+    return applyProperty(selector, targetPropertyKeyOrOptions, options);
+  }
+  function propertyThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+      return applyProperty("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+    }
+    if (typeof targetOrOptions === "string" || typeof targetOrOptions === "symbol") {
+      return applyProperty("$this", targetOrOptions, propertyKeyOrOptions);
+    } else if (targetOrOptions && typeof targetOrOptions === "object") {
+      return applyProperty("$this", void 0, targetOrOptions);
+    } else {
+      return applyProperty("$this", void 0, {});
+    }
+  }
+  function setProperty(selector, targetPropertyKeyOrOptions, options) {
+    return applyProperty(selector, targetPropertyKeyOrOptions, options);
+  }
+  function setPropertyThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+      return applyProperty("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+    }
+    if (typeof targetOrOptions === "string" || typeof targetOrOptions === "symbol") {
+      return applyProperty("$this", targetOrOptions, propertyKeyOrOptions);
+    } else if (targetOrOptions && typeof targetOrOptions === "object") {
+      return applyProperty("$this", void 0, targetOrOptions);
+    } else {
+      return applyProperty("$this", void 0, {});
+    }
+  }
+  var findAllPropertyMetadata = (target) => {
+    const actualTarget = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.findAllMetadata(PROPERTY_METADATA_KEY, actualTarget).flat();
+  };
+  var findAllPropertyApplyMetadata = (target) => {
+    const result = /* @__PURE__ */ new Map();
+    findAllPropertyMetadata(target).forEach((meta) => {
+      result.set(meta.propertyKey, meta);
+    });
+    return result;
+  };
+
   // src/decorators/elementDefine.ts
   var ELEMENT_CONFIG_KEY = Symbol.for("simple-web-component:element-config");
   var getElementConfig = (target) => {
@@ -9826,13 +9790,12 @@ var dooboostoreSimpleWebComponent = (() => {
       inst._boundListeners = [];
       inst.__swc_initialized = true;
       const target = inst instanceof Function ? inst : inst.constructor;
-      const attributeList = findAllAttributeMetadata(target);
-      attributeList.forEach((meta) => {
-        const initUserData = inst[meta.propertyKey];
-        delete inst[meta.propertyKey];
-        if (initUserData !== void 0)
-          inst[meta.propertyKey] = initUserData;
-      });
+      const attributeAllList = findAllAttributeMetadata(target).filter((it) => it.type === "property");
+      if (attributeAllList) {
+        attributeAllList.forEach((meta) => {
+          delete inst[meta.propertyKey];
+        });
+      }
       const queryList = getQueryMetadata(target);
       if (queryList) {
         queryList.forEach((meta) => {
@@ -9845,9 +9808,9 @@ var dooboostoreSimpleWebComponent = (() => {
           delete inst[meta.propertyKey];
         });
       }
-      const slotAllList = findAllApplySlotMetadata(target);
-      if (slotAllList) {
-        slotAllList.filter((it) => it.type === "property").forEach((meta) => {
+      const propertyAllList = findAllPropertyMetadata(target).filter((it) => it.type === "property");
+      if (propertyAllList) {
+        propertyAllList.forEach((meta) => {
           delete inst[meta.propertyKey];
         });
       }
@@ -9904,24 +9867,6 @@ var dooboostoreSimpleWebComponent = (() => {
   var setupPrototype = (proto, win) => {
     if (proto.__swc_proto_setup) return;
     proto.__swc_proto_setup = true;
-    proto.createSlotString = function(id) {
-      return NodeSlot.slot(`${this._swcId}-${id}`);
-    };
-    proto.createEaHtml = function(id, script) {
-      return ElementApply.html(id, script);
-    };
-    proto.createEaText = function(id, script) {
-      return ElementApply.text(id, script);
-    };
-    proto.createEaAttribute = function(id, name, script) {
-      return ElementApply.attribute(id, name, script);
-    };
-    proto.createEaEvent = function(id, name, script) {
-      return ElementApply.event(id, name, script);
-    };
-    proto.createEaProperty = function(id, name, script) {
-      return ElementApply.property(id, name, script);
-    };
     proto._executeSwcScript = function(attrName, hostSet, extraArgs = {}) {
       ensureInit(this);
       const script = this.getAttribute(attrName);
@@ -10051,8 +9996,8 @@ var dooboostoreSimpleWebComponent = (() => {
     const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
     const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
     const swcOnEvents = DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
-    const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.options.name).filter(Boolean);
-    const hostAttributes = attributeList.filter((it) => it.selector === "$this").map((it) => it.options.name || String(it.propertyKey));
+    const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.targetAttributeName).filter(Boolean);
+    const hostAttributes = attributeList.filter((it) => it.selector === "$this").map((it) => it.propertyKey || 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 proto = constructor.prototype;
@@ -10379,8 +10324,8 @@ var dooboostoreSimpleWebComponent = (() => {
     return constructor;
   };
 
-  // src/decorators/attribute.ts
-  var ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for("simple-web-component:attribute-field");
+  // src/decorators/applyAttribute.ts
+  var ATTRIBUTE_METADATA_KEY = Symbol.for("simple-web-component:attribute");
   var convertValue2 = (val, type) => {
     if (val === null || val === void 0) return val;
     if (type === Number) return Number(val);
@@ -10390,7 +10335,7 @@ var dooboostoreSimpleWebComponent = (() => {
   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 targets = options?.selector ? resolveAttributeTargets(inst, options.selector, options) : [inst];
     const primaryTarget = targets[0];
     if (primaryTarget && typeof primaryTarget.hasAttribute === "function" && primaryTarget.hasAttribute(attrName)) {
       let domVal = primaryTarget.getAttribute(attrName);
@@ -10404,8 +10349,8 @@ var dooboostoreSimpleWebComponent = (() => {
             args: SwcUtils.getHelperAndHostSet(currentWin, inst)
           });
           return convertValue2(result, options?.type);
-        } catch (e) {
-          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+        } catch (err) {
+          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, err);
           return convertValue2(domVal, options?.type);
         }
       }
@@ -10413,7 +10358,9 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     return null;
   };
-  var resolveTargetEls = (inst, selector, options, currentWin) => {
+  var resolveAttributeTargets = (inst, selector, options) => {
+    const conf = getElementConfig(inst);
+    const currentWin = conf.window;
     const r = options.root || "auto";
     const results = [];
     const applyRoot = (target) => {
@@ -10427,10 +10374,6 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     if (selector === "$this" || !selector) {
       applyRoot(inst);
-    } else if (selector === "$window") {
-      results.push(currentWin);
-    } else if (selector === "$document") {
-      results.push(currentWin.document);
     } else {
       const hostSet = SwcUtils.getHostSet(inst);
       if (selector === "$host") applyRoot(hostSet.$host);
@@ -10440,6 +10383,8 @@ var dooboostoreSimpleWebComponent = (() => {
       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 (r === "shadow") {
           const found = inst.shadowRoot?.querySelectorAll(selector);
@@ -10460,133 +10405,168 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     return results;
   };
-  function attribute(selector, options = {}) {
-    return (target, propertyKey) => {
+  function applyAttribute(selector, targetAttributeNameOrOptions, options) {
+    return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
-      const privateKey = Symbol(String(propertyKey));
       const designType = Reflect.getMetadata("design:type", target, propertyKey);
-      let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor);
+      const metaType = descriptor && typeof descriptor.value === "function" ? "method" : "property";
+      let finalOptions = {};
+      let targetAttributeName;
+      if (typeof targetAttributeNameOrOptions === "string") {
+        targetAttributeName = targetAttributeNameOrOptions;
+        finalOptions = options || {};
+      } else if (targetAttributeNameOrOptions) {
+        finalOptions = targetAttributeNameOrOptions;
+        targetAttributeName = finalOptions.name || String(propertyKey);
+      } else {
+        targetAttributeName = String(propertyKey);
+      }
+      let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor);
       if (!metaList) {
         metaList = [];
-        ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);
-      }
-      metaList.push({ propertyKey, selector, options, privateKey });
-      const applySetAttribute = (inst, targets, attrName, nv) => {
-        targets.forEach((it) => {
-          if (it && typeof it.setAttribute === "function") {
-            if (nv === null) {
-              it.removeAttribute(attrName);
-            } else {
-              it.setAttribute(attrName, String(nv));
-            }
-          } else {
-            inst[privateKey] = nv;
+        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+      }
+      metaList.push({
+        propertyKey,
+        selector,
+        targetAttributeName,
+        options: finalOptions,
+        type: metaType
+      });
+      const applyValueToTargets = (inst, resolvedValue) => {
+        const conf = getElementConfig(inst);
+        const currentWin = conf.window;
+        const targetEls = resolveAttributeTargets(inst, selector, finalOptions);
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+        targetEls.forEach((targetEl) => {
+          if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: inst, helper: hostSet })) {
+            return;
+          }
+          if (resolvedValue === null) {
+            targetEl.removeAttribute(targetAttributeName);
+          } else if (resolvedValue !== void 0) {
+            targetEl.setAttribute(targetAttributeName, resolvedValue === true ? "" : String(resolvedValue));
           }
         });
+        return resolvedValue;
       };
-      try {
-        Object.defineProperty(target, propertyKey, {
-          get() {
-            const attrName = options.name || String(propertyKey);
-            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);
-            const conf = getElementConfig(this);
-            const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-            const targets = resolveTargetEls(this, selector, options, currentWin);
-            applySetAttribute(this, targets, attrName, nv);
-          },
-          enumerable: true,
-          configurable: true
-        });
-      } catch (err) {
-        console.error("[SWC] defineProperty error:", err);
+      if (descriptor && typeof descriptor.value === "function") {
+        const original = descriptor.value;
+        descriptor.value = function(...args) {
+          ensureInit(this);
+          const res = original.apply(this, args);
+          if (res instanceof Promise) {
+            return res.then((v) => {
+              applyValueToTargets(this, v);
+              return v;
+            });
+          } else {
+            applyValueToTargets(this, res);
+            return res;
+          }
+        };
+        return;
       }
+      Object.defineProperty(target, propertyKey, {
+        configurable: true,
+        enumerable: true,
+        get() {
+          ensureInit(this);
+          const mergedOptions = { ...finalOptions, selector, type: finalOptions.type || designType };
+          return getAttributeValue(this, targetAttributeName, mergedOptions);
+        },
+        set(value) {
+          ensureInit(this);
+          if (value instanceof Promise) {
+            value.then((v) => applyValueToTargets(this, v)).catch(() => {
+            });
+          } else {
+            applyValueToTargets(this, value);
+          }
+        }
+      });
     };
   }
-  function attributeThis(targetOrAttrOrOptions, propertyKeyOrOptions) {
-    if (propertyKeyOrOptions !== void 0 && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-      return attribute("$this", { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
-    }
-    if (typeof targetOrAttrOrOptions === "string") {
-      const attrName = targetOrAttrOrOptions;
-      const options = typeof propertyKeyOrOptions === "object" ? propertyKeyOrOptions : {};
-      return attribute("$this", { ...options, name: attrName });
-    } else if (typeof targetOrAttrOrOptions === "object") {
-      const options = targetOrAttrOrOptions;
-      return (target, propertyKey) => {
-        return attribute("$this", { ...options, name: String(propertyKey) })(target, propertyKey);
-      };
+  function attribute(selector, targetAttributeNameOrOptions, options) {
+    return applyAttribute(selector, targetAttributeNameOrOptions, options);
+  }
+  function attributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol") {
+      return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+    }
+    if (typeof targetOrOptions === "string") {
+      return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
+    } else if (targetOrOptions && typeof targetOrOptions === "object") {
+      return applyAttribute("$this", void 0, targetOrOptions);
     } else {
-      return (target, propertyKey) => {
-        return attribute("$this", { name: String(propertyKey) })(target, propertyKey);
-      };
+      return applyAttribute("$this", void 0, {});
+    }
+  }
+  function setAttribute(selector, targetAttributeNameOrOptions, options) {
+    return applyAttribute(selector, targetAttributeNameOrOptions, options);
+  }
+  function setAttributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+      return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+    }
+    if (typeof targetOrOptions === "string") {
+      return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
+    } else if (targetOrOptions && typeof targetOrOptions === "object") {
+      return applyAttribute("$this", void 0, targetOrOptions);
+    } else {
+      return applyAttribute("$this", void 0, {});
     }
   }
   var findAllAttributeMetadata = (target) => {
     const actualTarget = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.findAllMetadata(ATTRIBUTE_FIELD_METADATA_KEY, actualTarget).flat();
+    return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, actualTarget).flat();
+  };
+  var findAllAttributeApplyMetadata = (target) => {
+    const result = /* @__PURE__ */ new Map();
+    findAllAttributeMetadata(target).forEach((meta) => {
+      result.set(meta.propertyKey, meta);
+    });
+    return result;
   };
 
   // src/decorators/applyNode.ts
   var APPLY_NODE_METADATA_KEY = Symbol.for("simple-web-component:apply-node");
-  var normalizeNodes = (res, doc) => {
-    const items = Array.isArray(res) ? res : [res];
-    return items.map((it) => {
-      if (it instanceof Node) return it;
-      return doc.createTextNode(it !== void 0 && it !== null ? String(it) : "");
-    });
-  };
   var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
     if (!targetEl) return;
     const doc = win.document;
     const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
     const id = currentThis._swcId;
-    try {
-      if (typeof res === "string") {
-        const processed = SwcUtils.projectProcessHtml(id, res, doc);
-        if (processed !== void 0) res = processed;
-      } else if (res) {
-        SwcUtils.projectProcessHtml(id, res, doc);
-      }
-    } catch (e) {
-    }
-    if (pos === "innerHtml") {
-      targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
-      return;
-    }
-    if (pos === "innerText") {
-      if (targetEl.innerText !== void 0) {
-        targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
-      }
-      return;
-    }
-    const stateContext = { ...hostSet };
-    findAllStateMetadata(currentThis).forEach((it) => {
-      stateContext[it.name] = currentThis[it.propertyKey];
-    });
-    new ElementApply(currentThis, { id: currentThis._swcId }).apply({ target: "noInitialized", context: stateContext, bind: currentThis });
+    const nodes = [];
+    if (typeof res === "string" && pos === "innerHtml") {
+      const t = win.document.createElement("template");
+      t.innerHTML = res;
+      nodes.push(...Array.from(t.content.childNodes));
+    } else if (typeof res === "string" && pos === "innerText") {
+      nodes.push(win.document.createTextNode(res));
+    }
+    SwcUtils.projectProcessHtml(id, nodes, doc);
     const isShadowRoot = targetEl instanceof win.ShadowRoot;
-    const nodes = normalizeNodes(res, doc);
     if (pos === "replace") {
       if (!isShadowRoot) targetEl.replaceWith(...nodes);
+    } else if (pos === "innerHtml") {
+      targetEl.replaceChildren(...nodes);
+    } else if (pos === "innerText") {
+      targetEl.replaceChildren(...nodes);
     } else if (pos === "replaceChildren") {
       targetEl.replaceChildren(...nodes);
     } else {
       if (pos === "beforeEnd") {
-        console.log("tarbbbbbbbbbbbbbb");
         targetEl.append(...nodes);
       } else if (pos === "afterBegin") targetEl.prepend(...nodes);
       else if (pos === "beforeBegin" && !isShadowRoot) targetEl.before(...nodes);
       else if (pos === "afterEnd" && !isShadowRoot) targetEl.after(...nodes);
     }
+    const stateContext = { ...hostSet };
+    findAllStateMetadata(currentThis).forEach((it) => {
+      stateContext[it.name] = currentThis[it.propertyKey];
+    });
+    new ElementApply(targetEl, { id }).apply({ target: "noInitialized", context: stateContext, bind: currentThis });
+    return nodes;
   };
   function applyNode(selector, options = { position: "replaceChildren" }) {
     return (targetObj, propertyKey, descriptor) => {
@@ -10623,7 +10603,6 @@ var dooboostoreSimpleWebComponent = (() => {
           const targetRoot = applyRoot(this);
           return targetRoot ? targetRoot.querySelector(selector) : null;
         };
-        console.log("fffffffffff");
         const targetEl = getTarget();
         const res = original.apply(this, args);
         const runApply = (target, val) => {
@@ -10633,13 +10612,14 @@ var dooboostoreSimpleWebComponent = (() => {
             applyToDom(this, target, processedVal, pos, currentWin);
           }
         };
+        const fallbackNodes = [];
+        if (targetEl && options.fallback) {
+          const loadingRes = options.fallback.call(this, hostSet);
+          fallbackNodes.push(...applyToDom(this, targetEl, loadingRes, options.position || "beforeEnd", currentWin));
+        }
         if (res instanceof Promise) {
-          if (targetEl && options.fallback) {
-            const loadingRes = options.fallback.call(this, hostSet);
-            applyToDom(this, targetEl, loadingRes, options.position || "beforeEnd", currentWin);
-          }
           return res.then((finalRes) => {
-            console.log("amnkj");
+            fallbackNodes.forEach((it) => it.remove());
             if (finalRes !== void 0 && targetEl) runApply(targetEl, finalRes);
             return finalRes;
           });
@@ -10650,91 +10630,103 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  var findAllApplyNodeMetadata = (target) => {
-    const result = /* @__PURE__ */ new Map();
-    const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
-    maps.forEach((map) => {
-      if (map instanceof Map) {
-        map.forEach((v, k) => result.set(k, v));
-      }
-    });
-    return result;
-  };
   function applyNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "replaceChildren" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...option, ...opt });
   }
-  function applyNodeThisReplaceChildren(targetOrOptions, propertyKey, descriptor) {
+  function replaceChildrenNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "replaceChildren" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyNodeThisReplaceChildrenLightDom(targetOrOptions, propertyKey, descriptor) {
-    const options = { position: "replaceChildren", root: "light" };
-    if (propertyKey !== void 0) return applyNode("$this", options)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...options });
-  }
-  function applyNodeThisBeforeEnd(targetOrOptions, propertyKey, descriptor) {
+  function beforeEndNodeThis(targetOrOptions, propertyKey, descriptor) {
     const options = { position: "beforeEnd" };
     if (propertyKey !== void 0) return applyNode("$this", options)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...options });
   }
-  function applyNodeThisBeforeEndLightDom(targetOrOptions, propertyKey, descriptor) {
+  function beforeEndLightNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "beforeEnd", root: "light" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyNodeThisBeforeEndShadow(targetOrOptions, propertyKey, descriptor) {
+  function beforeEndShadowNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "beforeEnd", root: "shadow" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyNodeThisAfterBegin(targetOrOptions, propertyKey, descriptor) {
+  function afterBeginNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "afterBegin" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyNodeThisAfterBeginLightDom(targetOrOptions, propertyKey, descriptor) {
+  function afterBeginLightNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "afterBegin", root: "light" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyThisInnerHtmlNode(targetOrOptions, propertyKey, descriptor) {
+  function innerHtmlNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "innerHtml" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyThisInnerHtmlNodeLightDom(targetOrOptions, propertyKey, descriptor) {
+  function innerTextNodeThis(targetOrOptions, propertyKey, descriptor) {
+    const option = { position: "innerText" };
+    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
+    const opt = targetOrOptions || {};
+    return applyNode("$this", { ...opt, ...option });
+  }
+  function innerHtmlLightNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "innerHtml", root: "light" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyThisReplaceChildrenNodeLightDom(targetOrOptions, propertyKey, descriptor) {
+  function replaceChildrenLightNodeThis(targetOrOptions, propertyKey, descriptor) {
     const option = { position: "replaceChildren", root: "light" };
     if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
     const opt = targetOrOptions || {};
     return applyNode("$this", { ...opt, ...option });
   }
-  function applyNodeReplaceChildren(selector, options = {}) {
+  function replaceChildrenNode(selector, options = {}) {
     return applyNode(selector, { ...options, position: "replaceChildren" });
   }
-  function applyNodeInnerHtml(selector, options = {}) {
+  function innerHtmlNode(selector, options = {}) {
     return applyNode(selector, { ...options, position: "innerHtml" });
   }
-  function applyNodeInnerText(selector, options = {}) {
+  function innerHtmlLightNode(selector, options = {}) {
+    return applyNode(selector, { ...options, position: "innerHtml", root: "light" });
+  }
+  function innerHtmlShadowNode(selector, options = {}) {
+    return applyNode(selector, { ...options, position: "innerHtml", root: "shadow" });
+  }
+  function innerTextNode(selector, options = {}) {
     return applyNode(selector, { ...options, position: "innerText" });
   }
+  function innerTextLightNode(selector, options = {}) {
+    return applyNode(selector, { ...options, position: "innerText", root: "light" });
+  }
+  function innerTextShadowNode(selector, options = {}) {
+    return applyNode(selector, { ...options, position: "innerText", root: "shadow" });
+  }
+  var findAllApplyNodeMetadata = (target) => {
+    const result = /* @__PURE__ */ new Map();
+    const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
+    maps.forEach((map) => {
+      if (map instanceof Map) {
+        map.forEach((v, k) => result.set(k, v));
+      }
+    });
+    return result;
+  };
 
   // src/decorators/applyClass.ts
   var CLASS_METADATA_KEY = Symbol.for("simple-web-component:class");
@@ -10987,89 +10979,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return result;
   };
 
-  // src/decorators/setProperty.ts
-  var PROPERTY_SET_METADATA_KEY = Symbol.for("simple-web-component:property-set");
-  var setProperty = (selector, propertyNameOrOptions, options = {}) => {
-    return (target, propertyKey, descriptor) => {
-      const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(PROPERTY_SET_METADATA_KEY, constructor);
-      if (!metaList) {
-        metaList = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(PROPERTY_SET_METADATA_KEY, metaList, constructor);
-      }
-      let propertyName = typeof propertyNameOrOptions === "string" ? propertyNameOrOptions : void 0;
-      let finalOptions = options;
-      if (typeof propertyNameOrOptions === "object" && propertyNameOrOptions !== null) {
-        finalOptions = propertyNameOrOptions;
-      }
-      metaList.set(propertyKey, {
-        propertyKey,
-        selector,
-        options: { ...finalOptions, name: propertyName }
-      });
-      const original = descriptor.value;
-      descriptor.value = function(...args) {
-        ensureInit(this);
-        const res = original.apply(this, args);
-        const handleResult = (resolvedValue) => {
-          if (resolvedValue !== void 0) {
-            const win = this.ownerDocument?.defaultView || window;
-            const host = this;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-            const r = finalOptions.root || "auto";
-            const targetEls = [];
-            const applyRoot = (t) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-            if (selector === "$this" || !selector) applyRoot(host);
-            else if (selector === "$host") applyRoot(hostSet.$host);
-            else if (selector === "$parentHost") applyRoot(hostSet.$parentHost);
-            else if (selector === "$appHost") applyRoot(hostSet.$appHost);
-            else if (selector === "$firstHost") applyRoot(hostSet.$firstHost);
-            else if (selector === "$lastHost") applyRoot(hostSet.$lastHost);
-            else if (selector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
-            else if (selector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
-            else if (selector === "$hosts") hostSet.$hosts.forEach(applyRoot);
-            else if (selector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
-            else {
-              const targetRoot = r === "auto" ? host.shadowRoot || host : r === "shadow" ? host.shadowRoot : host;
-              if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...Array.from(found));
-              }
-            }
-            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;
-              }
-            });
-          }
-          return resolvedValue;
-        };
-        if (res instanceof Promise) {
-          return res.then(handleResult);
-        } else {
-          return handleResult(res);
-        }
-      };
-    };
-  };
-  var setPropertyThis = (propertyNameOrOptions, options = {}) => {
-    return setProperty("$this", propertyNameOrOptions, 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) {
@@ -11204,6 +11113,109 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor);
   };
 
+  // src/decorators/applySlot.ts
+  var APPLY_SLOT_METADATA_KEY = Symbol.for("simple-web-component:apply-slot");
+  var applyToDom2 = (swcId, id, pos, nodes) => {
+    const nodeSlot = new NodeSlot(void 0, swcId);
+    if (pos === "replaceChildrenText" || pos === "replaceChildren" || pos === "replaceChildrenHtml") {
+      nodeSlot.replaceChildren(id, ...nodes);
+    } else if (pos === "appendHtml" || pos === "append" || pos === "appendText") {
+      nodeSlot.append(id, ...nodes);
+    } else if (pos === "prependHtml" || pos === "prepend" || pos === "prependText") {
+      nodeSlot.prepend(id, ...nodes);
+    } else if (pos === "clear") {
+      nodeSlot.clear(id);
+    }
+  };
+  function applySlot(targetId, opt) {
+    return (targetObj, propertyKey, descriptor) => {
+      const options = { position: "replaceChildren", ...opt };
+      const constructor = targetObj.constructor;
+      let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor);
+      if (!metaList) {
+        metaList = [];
+        ReflectUtils.defineMetadata(APPLY_SLOT_METADATA_KEY, metaList, constructor);
+      }
+      metaList.push({ propertyKey, targetId, options });
+      const original = descriptor.value;
+      descriptor.value = function(...args) {
+        ensureInit(this);
+        const conf = getElementConfig(this);
+        const currentWin = conf.window;
+        const swcId = this._swcId;
+        const currentDoc = currentWin.document;
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+        const pos = options.position;
+        const resToNodes = (res2) => {
+          const nodes = [];
+          if (typeof res2 === "string" && (pos === "replaceChildrenHtml" || pos === "appendHtml" || pos === "prependHtml")) {
+            const t = currentWin.document.createElement("template");
+            t.innerHTML = res2;
+            nodes.push(...Array.from(t.content.childNodes));
+          } else if (typeof res2 === "string" && (pos === "replaceChildrenText" || pos === "prependText" || pos === "appendText")) {
+            nodes.push(currentWin.document.createTextNode(res2));
+          } else if (typeof res2 === "object") {
+            nodes.push(res2);
+          }
+          SwcUtils.projectProcessHtml(swcId, nodes, currentDoc);
+          return nodes;
+        };
+        const fallbackNodes = [];
+        if (options.fallback) {
+          const res2 = options.fallback.call(this, hostSet);
+          const nodes = resToNodes(res2);
+          fallbackNodes.push(...nodes);
+          applyToDom2(swcId, targetId, options.position, nodes);
+        }
+        let res = original.apply(this, args);
+        if (res instanceof Promise) {
+          return res.then((asyncRes) => {
+            const nodes = resToNodes(asyncRes);
+            fallbackNodes.forEach((it) => it.remove());
+            applyToDom2(swcId, targetId, options.position, nodes);
+          });
+        } else {
+          const nodes = resToNodes(res);
+          applyToDom2(swcId, targetId, options.position, nodes);
+        }
+      };
+    };
+  }
+  function clearSlot(targetId) {
+    return applySlot(targetId, { position: "clear" });
+  }
+  function prependHtmlSlot(targetId) {
+    return applySlot(targetId, { position: "prependHtml" });
+  }
+  function prependSlot(targetId) {
+    return applySlot(targetId, { position: "prepend" });
+  }
+  function prependTextSlot(targetId) {
+    return applySlot(targetId, { position: "prependText" });
+  }
+  function appendHtmlSlot(targetId) {
+    return applySlot(targetId, { position: "appendHtml" });
+  }
+  function appendTextSlot(targetId) {
+    return applySlot(targetId, { position: "appendText" });
+  }
+  function appendSlot(targetId) {
+    return applySlot(targetId, { position: "append" });
+  }
+  function replaceChildrenHtmlSlot(targetId) {
+    return applySlot(targetId, { position: "replaceChildrenHtml" });
+  }
+  function replaceChildrenSlot(targetId) {
+    return applySlot(targetId, { position: "replaceChildren" });
+  }
+  function replaceChildrenTextSlot(targetId) {
+    return applySlot(targetId, { position: "replaceChildrenText" });
+  }
+  var findAllApplySlotMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
+  };
+
   // ../simple-boot/dist/esm/index.js
   var import_reflect_metadata = __toESM(require_Reflect(), 1);
 
@@ -11351,9 +11363,9 @@ var dooboostoreSimpleWebComponent = (() => {
     }
   };
   var MetaDataPropertyAtomic = class extends MetaDataAtomic {
-    constructor(target, metaData, property, parameter) {
+    constructor(target, metaData, property2, parameter) {
       super(target, metaData);
-      this.property = property;
+      this.property = property2;
       this.parameter = parameter;
     }
     call(...parameter) {