@dooboostore/simple-web-component 1.0.38 → 1.0.40

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

@@ -4212,8 +4212,8 @@ var ConvertUtils;
         }
       }
       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;
@@ -4247,10 +4247,10 @@ var ConvertUtils;
   };
   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);
@@ -5993,9 +5993,9 @@ var ReflectUtils;
 // ../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(",") ?? [];
   };
@@ -6414,7 +6414,7 @@ var decorator = (options, target, propertyKey) => {
   }
   list.push({ propertyKey, options });
 };
-function onConnectedShadowDom(optionOrTarget, propertyKey, arg3) {
+function onConnectedShadow(optionOrTarget, propertyKey, arg3) {
   if (propertyKey) {
     return decorator({ useShadow: true }, optionOrTarget, propertyKey);
   }
@@ -6422,7 +6422,7 @@ function onConnectedShadowDom(optionOrTarget, propertyKey, arg3) {
     decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
   };
 }
-function onConnectedLightDom(optionOrTarget, propertyKey, arg3) {
+function onConnectedLight(optionOrTarget, propertyKey, arg3) {
   if (propertyKey) {
     return decorator({ useShadow: false }, optionOrTarget, propertyKey);
   }
@@ -8904,132 +8904,6 @@ var convertAttributeValue = (val, type) => {
   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 = {}) {
@@ -9443,98 +9317,6 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
   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) {
@@ -9542,7 +9324,6 @@ function state(nameOrTarget, propertyKey) {
     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 });
@@ -9592,6 +9373,185 @@ var findAllStateMetadata = (target) => {
   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) => {
@@ -9605,13 +9565,12 @@ var ensureInit = (inst) => {
     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) => {
@@ -9624,9 +9583,9 @@ var ensureInit = (inst) => {
         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];
       });
     }
@@ -9683,24 +9642,6 @@ var getHandlers = (inst) => {
 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);
@@ -9830,8 +9771,8 @@ var elementDefine = (name, config = {}) => (constructor) => {
   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;
@@ -10158,8 +10099,8 @@ var elementDefine = (name, config = {}) => (constructor) => {
   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);
@@ -10169,7 +10110,7 @@ var convertValue2 = (val, type) => {
 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);
@@ -10183,8 +10124,8 @@ var getAttributeValue = (inst, attrName, options) => {
           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);
       }
     }
@@ -10192,7 +10133,9 @@ var getAttributeValue = (inst, attrName, options) => {
   }
   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) => {
@@ -10206,10 +10149,6 @@ var resolveTargetEls = (inst, selector, options, currentWin) => {
   };
   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);
@@ -10219,6 +10158,8 @@ var resolveTargetEls = (inst, selector, options, currentWin) => {
     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);
@@ -10239,133 +10180,168 @@ var resolveTargetEls = (inst, selector, options, currentWin) => {
   }
   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) => {
@@ -10402,7 +10378,6 @@ function applyNode(selector, options = { position: "replaceChildren" }) {
         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) => {
@@ -10412,13 +10387,14 @@ function applyNode(selector, options = { position: "replaceChildren" }) {
           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;
         });
@@ -10429,91 +10405,103 @@ function applyNode(selector, options = { position: "replaceChildren" }) {
     };
   };
 }
-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");
@@ -10766,89 +10754,6 @@ var findAllStyleMetadata = (target) => {
   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) {
@@ -10983,6 +10888,109 @@ var getPublishSwcAppMessageMetadata = (target) => {
   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);
 
@@ -11130,9 +11138,9 @@ var MetaDataAtomic = class {
   }
 };
 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) {
@@ -13605,9 +13613,8 @@ export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   APPLY_NODE_METADATA_KEY,
   APPLY_SLOT_METADATA_KEY,
-  ATTRIBUTE_APPLY_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
-  ATTRIBUTE_FIELD_METADATA_KEY,
+  ATTRIBUTE_METADATA_KEY,
   BROWSER_GLOBALS,
   CLASS_METADATA_KEY,
   DOM_EVENT_NAMES,
@@ -13627,7 +13634,7 @@ export {
   ON_CONNECTED_METADATA_KEY,
   ON_CONNECTED_SWC_APP_METADATA_KEY,
   ON_INITIALIZE_METADATA_KEY,
-  PROPERTY_SET_METADATA_KEY,
+  PROPERTY_METADATA_KEY,
   PUBLISH_SWC_APP_MESSAGE_METADATA_KEY,
   QUERY_ALL_METADATA_KEY,
   QUERY_METADATA_KEY,
@@ -13659,43 +13666,29 @@ export {
   addEventListenerDocument,
   addEventListenerThis,
   addEventListenerWindow,
+  afterBeginLightNodeThis,
+  afterBeginNodeThis,
   allAppHost,
   allParentHost,
+  appendHtmlSlot,
+  appendSlot,
+  appendTextSlot,
   applyAttribute,
-  applyAttributeThis,
   applyClass,
   applyClassThis,
   applyNode,
-  applyNodeInnerHtml,
-  applyNodeInnerText,
-  applyNodeReplaceChildren,
   applyNodeThis,
-  applyNodeThisAfterBegin,
-  applyNodeThisAfterBeginLightDom,
-  applyNodeThisBeforeEnd,
-  applyNodeThisBeforeEndLightDom,
-  applyNodeThisBeforeEndShadow,
-  applyNodeThisReplaceChildren,
-  applyNodeThisReplaceChildrenLightDom,
+  applyProperty,
   applySlot,
-  applySlotAppend,
-  applySlotAppendHtml,
-  applySlotAppendText,
-  applySlotClear,
-  applySlotPrepend,
-  applySlotPrependHtml,
-  applySlotPrependText,
-  applySlotReplaceChildren,
-  applySlotReplaceChildrenHtml,
-  applySlotReplaceChildrenText,
   applyStyle,
   applyStyleThis,
-  applyThisInnerHtmlNode,
-  applyThisInnerHtmlNodeLightDom,
-  applyThisReplaceChildrenNodeLightDom,
   attribute,
   attributeThis,
+  beforeEndLightNodeThis,
+  beforeEndNodeThis,
+  beforeEndShadowNodeThis,
   changedAttributeThis,
+  clearSlot,
   commentNode,
   convertAttributeValue,
   convertValue2 as convertValue,
@@ -13725,6 +13718,8 @@ export {
   findAllOnConnectedAfterMetadata,
   findAllOnConnectedBeforeMetadata,
   findAllOnConnectedMetadata,
+  findAllPropertyApplyMetadata,
+  findAllPropertyMetadata,
   findAllStateMetadata,
   findAllStyleMetadata,
   getAddEventListenerMetadata,
@@ -13749,6 +13744,15 @@ export {
   htmlSectionElement,
   htmlSpanElement,
   htmlUlElement,
+  innerHtmlLightNode,
+  innerHtmlLightNodeThis,
+  innerHtmlNode,
+  innerHtmlNodeThis,
+  innerHtmlShadowNode,
+  innerTextLightNode,
+  innerTextNode,
+  innerTextNodeThis,
+  innerTextShadowNode,
   isSSR,
   onAddEventListener,
   onAdopted,
@@ -13758,13 +13762,18 @@ export {
   onConnectedAfter,
   onConnectedBefore,
   onConnectedCompleted,
-  onConnectedLightDom,
-  onConnectedShadowDom,
+  onConnectedLight,
+  onConnectedShadow,
   onConnectedSwcApp,
   onDisconnected,
   onDisconnectedAfter,
   onDisconnectedBefore,
   onInitialize,
+  prependHtmlSlot,
+  prependSlot,
+  prependTextSlot,
+  property,
+  propertyThis,
   publishSwcAppMessage,
   query,
   queryAll,
@@ -13774,14 +13783,19 @@ export {
   queryHost,
   queryThis,
   queryWindow,
-  removeAttribute,
-  removeAttributeThis,
   removeClass,
   removeClassThis,
   removeSSRAttribute,
   removeStyle,
   removeStyleThis,
-  resolveTargetEls,
+  replaceChildrenHtmlSlot,
+  replaceChildrenLightNodeThis,
+  replaceChildrenNode,
+  replaceChildrenNodeThis,
+  replaceChildrenSlot,
+  replaceChildrenTextSlot,
+  resolveAttributeTargets,
+  resolvePropertyTargets,
   setAttribute,
   setAttributeThis,
   setClass,
@@ -13808,8 +13822,6 @@ export {
   textNode,
   toggleClass,
   toggleClassThis,
-  updateAttribute,
-  updateAttributeThis,
   updateClass,
   updateClassThis,
   updateStyle,