@dooboostore/simple-web-component 1.0.22 → 1.0.24

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

@@ -5715,30 +5715,6 @@ var Expression;
   })(Path = Expression2.Path || (Expression2.Path = {}));
 })(Expression || (Expression = {}));
 
-// src/decorators/onConnectedInnerHtml.ts
-var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-function onConnectedInnerHtml(arg1, arg2, arg3) {
-  const decorator = (options, target, propertyKey) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
-  if (arg2) {
-    return decorator({}, arg1, arg2);
-  }
-  return (target, propertyKey) => {
-    decorator(arg1 || {}, target, propertyKey);
-  };
-}
-var getOnConnectedInnerHtmlMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-};
-
 // src/decorators/addEventListener.ts
 var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
 function addEventListener(selectorOrTarget, type, options = {}) {
@@ -5769,6 +5745,7 @@ var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-d
 var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-before-adopted");
 var ON_AFTER_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-after-adopted");
 var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:on-add-event-listener");
+var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
 var ATTRIBUTE_CHANGED_WILDCARD = "*";
 function createLifecycleDecorator(metadataKey) {
   return (target, propertyKey) => {
@@ -5792,10 +5769,31 @@ var onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
 var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
 var onAdopted = onAfterAdopted;
 var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+function onConnectedInnerHtml(arg1, arg2, arg3) {
+  const decorator = (options, target, propertyKey) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+  if (arg2) {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    decorator(arg1 || {}, target, propertyKey);
+  };
+}
 var findAllLifecycleMetadata = (target, metadataKey) => {
   const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
   return results.length > 0 ? results : void 0;
 };
+var getOnConnectedInnerHtmlMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+};
 
 // src/decorators/attribute.ts
 var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
@@ -5899,7 +5897,6 @@ function attribute(selector, options = {}) {
       },
       set(nv) {
         const targetType = options.type || designType;
-        console.log("---set", propertyKey, targetType, nv, this, this.__swc_syncing_init);
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
@@ -5927,8 +5924,27 @@ function attribute(selector, options = {}) {
 var findAllAttributeMetadata = (target) => {
   return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, target).flat();
 };
-function attributeHost(attrName, options = {}) {
-  return attribute(":host", { ...options, name: attrName });
+function attributeHost(targetOrAttrOrOptions, propertyKeyOrOptions) {
+  if (propertyKeyOrOptions !== void 0 && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+    const fieldName = String(propertyKeyOrOptions);
+    return attribute(":host", { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+  }
+  if (typeof targetOrAttrOrOptions === "string") {
+    const attrName = targetOrAttrOrOptions;
+    const options = typeof propertyKeyOrOptions === "object" ? propertyKeyOrOptions : {};
+    return attribute(":host", { ...options, name: attrName });
+  } else if (typeof targetOrAttrOrOptions === "object") {
+    const options = targetOrAttrOrOptions;
+    return (target, propertyKey) => {
+      const fieldName = String(propertyKey);
+      return attribute(":host", { ...options, name: fieldName })(target, propertyKey);
+    };
+  } else {
+    return (target, propertyKey) => {
+      const fieldName = String(propertyKey);
+      return attribute(":host", { name: fieldName })(target, propertyKey);
+    };
+  }
 }
 
 // src/decorators/changedAttributeHost.ts
@@ -5982,11 +5998,11 @@ function setAttribute(selector, name, options = {}) {
         const applyRoot = (t) => {
           if (!t) return;
           if (r === "auto") {
-            targetEls.push(t.shadowRoot || t);
-            return;
+            targetEls.push(t);
+          } else {
+            if (r === "light" || r === "all") targetEls.push(t);
+            if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
           }
-          if (r === "light" || r === "all") targetEls.push(t);
-          if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
         };
         if (selector === ":window") targetEls.push(currentWin);
         else if (selector === ":document") targetEls.push(currentWin.document);
@@ -6068,32 +6084,83 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
         const currentDoc = currentWin.document;
-        let targetEl = null;
-        if (selector === ":host" || !selector) {
-          targetEl = this;
+        const pos = options.position || "beforeEnd";
+        const r = options.root || "auto";
+        const applyRoot = (t) => {
+          if (!t || !(t instanceof HTMLElement))
+            return t;
+          if (r === "auto")
+            return t.shadowRoot || t;
+          if (r === "shadow")
+            return t.shadowRoot;
+          if (r === "light")
+            return t;
+          if (r === "all")
+            return t.shadowRoot || t;
+          return t;
+        };
+        const hostSet = SwcUtils.getHostSet(this);
+        if (pos === "remove") {
+          if (res) {
+            if (selector === ":host" || !selector) {
+              if (r === "shadow" && this.shadowRoot) {
+                this.shadowRoot.replaceChildren();
+              } else {
+                this.remove();
+              }
+            } else {
+              const targetRoot = applyRoot(this);
+              if (targetRoot) {
+                const targets = targetRoot.querySelectorAll(selector);
+                targets.forEach((el) => el.remove());
+              }
+            }
+          }
         } else {
-          targetEl = (this.shadowRoot || this).querySelector(selector);
-        }
-        if (targetEl) {
-          const nodes = normalizeNodes(res, currentDoc);
-          const pos = options.position || "beforeEnd";
-          if (pos === "replace") {
-            targetEl.replaceWith(...nodes);
-          } else if (pos === "replaceChildren") {
-            targetEl.replaceChildren(...nodes);
-          } else if (pos === "innerHtml") {
-            targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
-          } else if (pos === "innerText") {
-            targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+          let targetEl = null;
+          if (selector === ":host") {
+            targetEl = applyRoot(this);
+          } else if (selector === ":parentHost") {
+            targetEl = applyRoot(hostSet.$parentHost);
+          } else if (selector === ":appHost") {
+            targetEl = applyRoot(hostSet.$appHost);
+          } else if (selector === ":firstHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastHost") {
+            targetEl = applyRoot(hostSet.$lastHost);
+          } else if (selector === ":firstAppHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastAppHost") {
+            targetEl = applyRoot(hostSet.$lastAppHost);
           } else {
-            if (pos === "beforeEnd")
-              targetEl.append(...nodes);
-            else if (pos === "afterBegin")
-              targetEl.prepend(...nodes);
-            else if (pos === "beforeBegin")
-              targetEl.before(...nodes);
-            else if (pos === "afterEnd")
-              targetEl.after(...nodes);
+            const targetRoot = applyRoot(this);
+            targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
+          }
+          if (targetEl) {
+            const isShadowRoot = targetEl instanceof ShadowRoot;
+            const nodes = normalizeNodes(res, currentDoc);
+            if (pos === "replace") {
+              if (!isShadowRoot) {
+                targetEl.replaceWith(...nodes);
+              }
+            } else if (pos === "replaceChildren") {
+              targetEl.replaceChildren(...nodes);
+            } else if (pos === "innerHtml") {
+              targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
+            } else if (pos === "innerText") {
+              if (targetEl.innerText !== void 0) {
+                targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+              }
+            } else {
+              if (pos === "beforeEnd")
+                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);
+            }
           }
         }
       }
@@ -6111,8 +6178,107 @@ var findAllApplyNodeMetadata = (target) => {
   });
   return result;
 };
-function applyNodeHost(options = { position: "beforeEnd" }) {
-  return applyNode(":host", options);
+function applyNodeHost(targetOrOptions, propertyKey, descriptor) {
+  console.log("vvvvv");
+  if (propertyKey !== void 0 && typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+    return applyNode(":host", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    const options = targetOrOptions;
+    return applyNode(":host", { ...options, position: options.position || "beforeEnd" });
+  } else {
+    return applyNode(":host", { position: "beforeEnd" });
+  }
+}
+function applyBeforeBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeBegin" });
+}
+function applyAfterBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterBegin" });
+}
+function applyBeforeEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeEnd" });
+}
+function applyAfterEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterEnd" });
+}
+function applyReplaceNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replace" });
+}
+function applyReplaceChildrenNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replaceChildren" });
+}
+function applyInnerHtmlNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerHtml" });
+}
+function applyInnerTextNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerText" });
+}
+function applyRemoveNode(selector, options) {
+  return applyNode(selector, { ...options, position: "remove" });
+}
+function applyBeforeBeginNodeHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeBegin" });
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...targetOrOptions || {}, position: "beforeBegin" });
+}
+function applyAfterBeginNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterBegin" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterBegin" });
+}
+function applyBeforeEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "beforeEnd" });
+}
+function applyAfterEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterEnd" });
+}
+function applyReplaceNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replace" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replace" });
+}
+function applyReplaceChildrenNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replaceChildren" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replaceChildren" });
+}
+function applyInnerHtmlNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerHtml" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerHtml" });
+}
+function applyInnerTextNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerText" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerText" });
+}
+function applyRemoveNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "remove" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "remove" });
 }
 
 // src/decorators/query.ts
@@ -6214,8 +6380,76 @@ var getQueryMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
 };
-function queryHost(options) {
-  return query(":host", options);
+function queryHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":host", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":host", targetOrOptions);
+  } else {
+    return query(":host", {});
+  }
+}
+var host = queryHost;
+function parentHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":parentHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":parentHost", targetOrOptions);
+  } else {
+    return query(":parentHost", {});
+  }
+}
+function appHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":appHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":appHost", targetOrOptions);
+  } else {
+    return query(":appHost", {});
+  }
+}
+function firstHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":firstHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":firstHost", targetOrOptions);
+  } else {
+    return query(":firstHost", {});
+  }
+}
+function lastHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":lastHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":lastHost", targetOrOptions);
+  } else {
+    return query(":lastHost", {});
+  }
+}
+function firstAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":firstAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":firstAppHost", targetOrOptions);
+  } else {
+    return query(":firstAppHost", {});
+  }
+}
+function lastAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":lastAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":lastAppHost", targetOrOptions);
+  } else {
+    return query(":lastAppHost", {});
+  }
 }
 
 // src/decorators/queryAll.ts
@@ -6314,14 +6548,82 @@ var getQueryAllMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
 };
-function queryAllHost(options) {
-  return queryAll(":host", options);
+function queryAllHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":host", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":host", targetOrOptions);
+  } else {
+    return queryAll(":host", {});
+  }
+}
+var allHost = queryAllHost;
+function allParentHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":parentHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":parentHost", targetOrOptions);
+  } else {
+    return queryAll(":parentHost", {});
+  }
+}
+function allAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":appHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":appHost", targetOrOptions);
+  } else {
+    return queryAll(":appHost", {});
+  }
+}
+function allFirstHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":firstHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":firstHost", targetOrOptions);
+  } else {
+    return queryAll(":firstHost", {});
+  }
+}
+function allLastHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":lastHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":lastHost", targetOrOptions);
+  } else {
+    return queryAll(":lastHost", {});
+  }
+}
+function allFirstAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":firstAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":firstAppHost", targetOrOptions);
+  } else {
+    return queryAll(":firstAppHost", {});
+  }
+}
+function allLastAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":lastAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":lastAppHost", targetOrOptions);
+  } else {
+    return queryAll(":lastAppHost", {});
+  }
 }
 
 // src/decorators/classList.ts
 var CLASS_LIST_METADATA_KEY = Symbol("simple-web-component:class-list");
 function createClassListDecorator(action) {
-  return (selector) => {
+  return (selector, options = {}) => {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor);
@@ -6329,19 +6631,52 @@ function createClassListDecorator(action) {
         metaList = /* @__PURE__ */ new Map();
         ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
       }
-      metaList.set(propertyKey, { propertyKey, selector, action });
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
       const original = descriptor.value;
       descriptor.value = async function(...args) {
         ensureInit2(this);
         const res = await original.apply(this, args);
         if (res !== void 0) {
+          const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
-          let targetEl = null;
-          if (selector === ":host" || !selector) targetEl = this;
-          else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-          else if (selector === ":appHost") targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || this).querySelector(selector);
-          if (targetEl) {
+          const targetEls = [];
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === "auto") {
+              targetEls.push(t);
+            } else {
+              if (r === "light" || r === "all") targetEls.push(t);
+              if ((r === "shadow" || r === "all") && t.shadowRoot) {
+              }
+            }
+          };
+          if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+          else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+          else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+          else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+          else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+          else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+          else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ":host" || !selector) applyRoot(this);
+          else {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            } else if (r === "all") {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = this.querySelectorAll(selector);
+              if (sFound) targetEls.push(...Array.from(sFound));
+              if (lFound) targetEls.push(...Array.from(lFound));
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               let classes = "";
               if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6369,23 +6704,53 @@ function createClassListDecorator(action) {
               const classes = Array.isArray(res) ? res.map(String) : [String(res)];
               classes.forEach((c) => targetEl.classList.toggle(c));
             }
-          }
+          });
         }
         return res;
       };
     };
   };
 }
-var setClassList = createClassListDecorator("set");
-var updateClassList = createClassListDecorator("update");
-var addClassList = createClassListDecorator("add");
-var removeClassList = createClassListDecorator("remove");
-var toggleClassList = createClassListDecorator("toggle");
-var setClassListHost = createClassListDecorator("set").bind(null, ":host");
-var updateClassListHost = createClassListDecorator("update").bind(null, ":host");
-var addClassListHost = createClassListDecorator("add").bind(null, ":host");
-var removeClassListHost = createClassListDecorator("remove").bind(null, ":host");
-var toggleClassListHost = createClassListDecorator("toggle").bind(null, ":host");
+var setClassList = (selector, options = {}) => createClassListDecorator("set")(selector, options);
+var updateClassList = (selector, options = {}) => createClassListDecorator("update")(selector, options);
+var addClassList = (selector, options = {}) => createClassListDecorator("add")(selector, options);
+var removeClassList = (selector, options = {}) => createClassListDecorator("remove")(selector, options);
+var toggleClassList = (selector, options = {}) => createClassListDecorator("toggle")(selector, options);
+function setClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("set")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("set")(":host", targetOrOptions || {});
+}
+function updateClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("update")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("update")(":host", targetOrOptions || {});
+}
+function addClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("add")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("add")(":host", targetOrOptions || {});
+}
+function removeClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("remove")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("remove")(":host", targetOrOptions || {});
+}
+function toggleClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("toggle")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("toggle")(":host", targetOrOptions || {});
+}
 var findAllClassListMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6400,7 +6765,7 @@ var findAllClassListMetadata = (target) => {
 // src/decorators/style.ts
 var STYLE_METADATA_KEY = Symbol("simple-web-component:style");
 function createStyleDecorator(action) {
-  return (selector) => {
+  return (selector, options = {}) => {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor);
@@ -6408,19 +6773,52 @@ function createStyleDecorator(action) {
         metaList = /* @__PURE__ */ new Map();
         ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
       }
-      metaList.set(propertyKey, { propertyKey, selector, action });
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
       const original = descriptor.value;
       descriptor.value = async function(...args) {
         ensureInit2(this);
         const res = await original.apply(this, args);
         if (res !== void 0) {
+          const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
-          let targetEl = null;
-          if (selector === ":host" || !selector) targetEl = this;
-          else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-          else if (selector === ":appHost") targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || this).querySelector(selector);
-          if (targetEl) {
+          const targetEls = [];
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === "auto") {
+              targetEls.push(t);
+            } else {
+              if (r === "light" || r === "all") targetEls.push(t);
+              if ((r === "shadow" || r === "all") && t.shadowRoot) {
+              }
+            }
+          };
+          if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+          else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+          else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+          else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+          else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+          else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+          else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ":host" || !selector) applyRoot(this);
+          else {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            } else if (r === "all") {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = this.querySelectorAll(selector);
+              if (sFound) targetEls.push(...Array.from(sFound));
+              if (lFound) targetEls.push(...Array.from(lFound));
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...Array.from(found));
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               targetEl.style.cssText = "";
               if (typeof res === "object" && res !== null) {
@@ -6436,16 +6834,37 @@ function createStyleDecorator(action) {
               const props = Array.isArray(res) ? res : [res];
               props.forEach((p) => targetEl.style.removeProperty(String(p)));
             }
-          }
+          });
         }
         return res;
       };
     };
   };
 }
-var setStyle = createStyleDecorator("set");
-var updateStyle = createStyleDecorator("update");
-var removeStyle = createStyleDecorator("remove");
+var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
+function setStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("set")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("set")(":host", targetOrOptions || {});
+}
+var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
+function updateStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("update")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("update")(":host", targetOrOptions || {});
+}
+var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
+function removeStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("remove")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("remove")(":host", targetOrOptions || {});
+}
 var findAllStyleMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -6459,6 +6878,131 @@ var findAllStyleMetadata = (target) => {
 
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
+var htmlFragment = (html, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const template = d.createElement("template");
+  template.innerHTML = html.trim();
+  return template.content;
+};
+var textNode = (text, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  return d.createTextNode(text !== void 0 && text !== null ? String(text) : "");
+};
+var commentNode = (comment, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  return d.createComment(comment !== void 0 && comment !== null ? String(comment) : "");
+};
+var createElement = (tagName, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement(tagName);
+  if (options?.html) el.innerHTML = options.html;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlDivElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("div");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlSpanElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("span");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlButtonElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("button");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlUlElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("ul");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlLiElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("li");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlAElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("a");
+  el.innerHTML = html.trim();
+  if (options?.href) el.href = options.href;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlPElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("p");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlHeadingElement = (level, html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement(`h${level}`);
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlSectionElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("section");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlArticleElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("article");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
 var SwcUtils;
 ((SwcUtils2) => {
   SwcUtils2.getHelperSet = (win) => {
@@ -6521,7 +7065,7 @@ var SwcUtils;
   };
   SwcUtils2.getAppHosts = (el) => {
     const hosts = (0, SwcUtils2.getHosts)(el);
-    return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
+    return hosts.filter((host2) => host2.tagName.toLowerCase() === "swc-app" || host2.getAttribute("is")?.startsWith("swc-app-"));
   };
   SwcUtils2.getAppHost = (el) => {
     const appHosts = (0, SwcUtils2.getAppHosts)(el);
@@ -6778,9 +7322,9 @@ var handleGlobalSwcEvent = async (event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host = SwcUtils.findNearestSwcHost(node);
-      if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
-        await host.__swc_executeAttributeEvent(node, attrName, script, event);
+      const host2 = SwcUtils.findNearestSwcHost(node);
+      if (host2 && host2.isConnected && typeof host2.__swc_executeAttributeEvent === "function") {
+        await host2.__swc_executeAttributeEvent(node, attrName, script, event);
         event.__swc_handled = true;
         break;
       }
@@ -7978,69 +8522,6 @@ var ValidUtils2;
     return /Mobi/i.test(targetWindow.navigator.userAgent);
   };
 })(ValidUtils2 || (ValidUtils2 = {}));
-
-// src/utils/TemplateUtils.ts
-var TemplateUtils;
-((TemplateUtils2) => {
-  TemplateUtils2.htmlFragment = (strings, ...values) => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-    const template = document.createElement("template");
-    template.innerHTML = raw.trim();
-    return template.content;
-  };
-  TemplateUtils2.textNode = (strings, ...values) => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-    return document.createTextNode(raw);
-  };
-  TemplateUtils2.createElement = (info, attrs = {}) => {
-    const el = document.createElement(info.tagName);
-    if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
-    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
-    return el;
-  };
-  const createTagFunction = (tagName) => {
-    return (strings, ...values) => {
-      const el = document.createElement(tagName);
-      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-      return el;
-    };
-  };
-  TemplateUtils2.htmlDivElement = createTagFunction("div");
-  TemplateUtils2.htmlSpanElement = createTagFunction("span");
-  TemplateUtils2.htmlButtonElement = createTagFunction("button");
-  TemplateUtils2.htmlUlElement = createTagFunction("ul");
-  TemplateUtils2.htmlLiElement = createTagFunction("li");
-  TemplateUtils2.htmlInputElement = createTagFunction("input");
-  TemplateUtils2.htmlAElement = createTagFunction("a");
-  TemplateUtils2.htmlPElement = createTagFunction("p");
-  TemplateUtils2.htmlH1Element = createTagFunction("h1");
-  TemplateUtils2.htmlH2Element = createTagFunction("h2");
-  TemplateUtils2.htmlH3Element = createTagFunction("h3");
-  TemplateUtils2.htmlH4Element = createTagFunction("h4");
-  TemplateUtils2.htmlH5Element = createTagFunction("h5");
-  TemplateUtils2.htmlH6Element = createTagFunction("h6");
-  TemplateUtils2.htmlSectionElement = createTagFunction("section");
-  TemplateUtils2.htmlArticleElement = createTagFunction("article");
-})(TemplateUtils || (TemplateUtils = {}));
-var htmlFragment = TemplateUtils.htmlFragment;
-var textNode = TemplateUtils.textNode;
-var createElement = TemplateUtils.createElement;
-var htmlDivElement = TemplateUtils.htmlDivElement;
-var htmlSpanElement = TemplateUtils.htmlSpanElement;
-var htmlButtonElement = TemplateUtils.htmlButtonElement;
-var htmlUlElement = TemplateUtils.htmlUlElement;
-var htmlLiElement = TemplateUtils.htmlLiElement;
-var htmlInputElement = TemplateUtils.htmlInputElement;
-var htmlAElement = TemplateUtils.htmlAElement;
-var htmlPElement = TemplateUtils.htmlPElement;
-var htmlH1Element = TemplateUtils.htmlH1Element;
-var htmlH2Element = TemplateUtils.htmlH2Element;
-var htmlH3Element = TemplateUtils.htmlH3Element;
-var htmlH4Element = TemplateUtils.htmlH4Element;
-var htmlH5Element = TemplateUtils.htmlH5Element;
-var htmlH6Element = TemplateUtils.htmlH6Element;
-var htmlSectionElement = TemplateUtils.htmlSectionElement;
-var htmlArticleElement = TemplateUtils.htmlArticleElement;
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   APPLY_NODE_METADATA_KEY,
@@ -8069,16 +8550,42 @@ export {
   STYLE_METADATA_KEY,
   SWC_NOT_FOUND,
   SwcUtils,
-  TemplateUtils,
   addClassList,
   addClassListHost,
   addEventListener,
   addEventListenerHost,
+  allAppHost,
+  allFirstAppHost,
+  allFirstHost,
+  allHost,
+  allLastAppHost,
+  allLastHost,
+  allParentHost,
+  appHost,
+  applyAfterBeginNode,
+  applyAfterBeginNodeHost,
+  applyAfterEndNode,
+  applyAfterEndNodeHost,
+  applyBeforeBeginNode,
+  applyBeforeBeginNodeHost,
+  applyBeforeEndNode,
+  applyBeforeEndNodeHost,
+  applyInnerHtmlNode,
+  applyInnerHtmlNodeHost,
+  applyInnerTextNode,
+  applyInnerTextNodeHost,
   applyNode,
   applyNodeHost,
+  applyRemoveNode,
+  applyRemoveNodeHost,
+  applyReplaceChildrenNode,
+  applyReplaceChildrenNodeHost,
+  applyReplaceNode,
+  applyReplaceNodeHost,
   attribute,
   attributeHost,
   changedAttributeHost,
+  commentNode,
   createElement,
   elementDefine,
   emitCustomEvent,
@@ -8091,6 +8598,8 @@ export {
   findAllLifecycleMetadata,
   findAllSetAttributeMetadata,
   findAllStyleMetadata,
+  firstAppHost,
+  firstHost,
   getAddEventListenerMetadata,
   getChangedAttributeMetadata,
   getElementConfig,
@@ -8099,23 +8608,20 @@ export {
   getQueryAllMetadata,
   getQueryMetadata,
   getSetAttributeMetadata,
+  host,
   htmlAElement,
   htmlArticleElement,
   htmlButtonElement,
   htmlDivElement,
   htmlFragment,
-  htmlH1Element,
-  htmlH2Element,
-  htmlH3Element,
-  htmlH4Element,
-  htmlH5Element,
-  htmlH6Element,
-  htmlInputElement,
+  htmlHeadingElement,
   htmlLiElement,
   htmlPElement,
   htmlSectionElement,
   htmlSpanElement,
   htmlUlElement,
+  lastAppHost,
+  lastHost,
   onAddEventListener,
   onAdopted,
   onAfterAdopted,
@@ -8128,6 +8634,7 @@ export {
   onConnectedInnerHtml,
   onConstructor,
   onDisconnected,
+  parentHost,
   query,
   queryAll,
   queryAllHost,
@@ -8135,18 +8642,21 @@ export {
   removeClassList,
   removeClassListHost,
   removeStyle,
+  removeStyleHost,
   resolveTargetEls,
   setAttribute,
   setAttributeHost,
   setClassList,
   setClassListHost,
   setStyle,
+  setStyleHost,
   textNode,
   toggleClassList,
   toggleClassListHost,
   updateClassList,
   updateClassListHost,
-  updateStyle
+  updateStyle,
+  updateStyleHost
 };
 /*! Bundled license information: