@dooboostore/simple-web-component 1.0.21 → 1.0.23

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 = {}) {
@@ -5756,8 +5732,12 @@ var getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };
+function addEventListenerHost(type, options) {
+  return addEventListener(":host", type, options);
+}
 
 // src/decorators/lifecycles.ts
+var ON_CONSTRUCTOR_METADATA_KEY = Symbol("simple-web-component:on-constructor");
 var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-connected");
 var ON_AFTER_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-connected");
 var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-disconnected");
@@ -5765,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) => {
@@ -5777,6 +5758,7 @@ function createLifecycleDecorator(metadataKey) {
     list.push(propertyKey);
   };
 }
+var onConstructor = createLifecycleDecorator(ON_CONSTRUCTOR_METADATA_KEY);
 var onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
 var onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
 var onConnected = onAfterConnected;
@@ -5787,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");
@@ -5857,6 +5860,20 @@ function attribute(selector, options = {}) {
       ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
     metaList.push({ propertyKey, selector, options, privateKey });
+    const applySetAttribute = (inst, targets, attrName, nv) => {
+      targets.forEach((it) => {
+        console.log("----->", it);
+        if (it && typeof it.setAttribute === "function") {
+          if (nv === null) {
+            it.removeAttribute(attrName);
+          } else {
+            it.setAttribute(attrName, String(nv));
+          }
+        } else {
+          inst[privateKey] = nv;
+        }
+      });
+    };
     Object.defineProperty(target, propertyKey, {
       get() {
         const attrName = options.name || String(propertyKey);
@@ -5883,19 +5900,21 @@ function attribute(selector, options = {}) {
         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);
-        targets.forEach((it) => {
-          console.log("----->", it);
-          if (it && typeof it.setAttribute === "function") {
-            if (nv === null) {
-              it.removeAttribute(attrName);
-            } else {
-              it.setAttribute(attrName, String(nv));
-            }
+        if (this.__swc_syncing_init) {
+          if (options.connectedInitialize === true) {
+            const targets2 = resolveTargetEls(this, selector, options, currentWin);
+            applySetAttribute(this, targets2, attrName, nv);
           } else {
             this[privateKey] = nv;
           }
-        });
+          return;
+        }
+        if (!this.__swc_connected) {
+          this[privateKey] = nv;
+          return;
+        }
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        applySetAttribute(this, targets, attrName, nv);
       },
       enumerable: true,
       configurable: true
@@ -5905,10 +5924,13 @@ 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 });
+}
 
-// src/decorators/changedAttribute.ts
+// src/decorators/changedAttributeHost.ts
 var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
-function changedAttribute(attributeName) {
+function changedAttributeHost(attributeName) {
   return (target, propertyKey) => {
     const constructor = target.constructor;
     let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -6012,62 +6034,12 @@ var findAllSetAttributeMetadata = (target) => {
   });
   return result;
 };
-
-// src/decorators/replaceChildren.ts
-var REPLACE_CHILDREN_METADATA_KEY = Symbol("simple-web-component:replace-children");
-function replaceChildren(selector) {
-  return (target, propertyKey, descriptor) => {
-    const constructor = target.constructor;
-    let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-    if (!meta) {
-      meta = /* @__PURE__ */ new Map();
-      ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
-    }
-    meta.set(propertyKey, selector);
-    const original = descriptor.value;
-    descriptor.value = async function(...args) {
-      ensureInit2(this);
-      const res = await original.apply(this, args);
-      if (res !== void 0) {
-        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;
-        } else {
-          targetEl = (this.shadowRoot || this).querySelector(selector);
-        }
-        if (targetEl) {
-          if (typeof res === "string") {
-            targetEl.textContent = res;
-          } else {
-            const nodes = Array.isArray(res) ? res.map((n) => typeof n === "string" ? currentDoc.createTextNode(n) : n) : [res];
-            targetEl.replaceChildren(...nodes);
-          }
-        }
-      }
-      return res;
-    };
-  };
+function setAttributeHost(name, options) {
+  return setAttribute(":host", name, options);
 }
-var getReplaceChildrenMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-};
-var findAllReplaceChildrenMetadata = (target) => {
-  const result = /* @__PURE__ */ new Map();
-  const maps = ReflectUtils.findAllMetadata(REPLACE_CHILDREN_METADATA_KEY, target);
-  maps.forEach((map) => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};
 
-// src/decorators/appendChild.ts
-var APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+// src/decorators/applyNode.ts
+var APPLY_NODE_METADATA_KEY = Symbol("simple-web-component:apply-node");
 var normalizeNodes = (res, doc) => {
   const items = Array.isArray(res) ? res : [res];
   return items.map((it) => {
@@ -6076,13 +6048,13 @@ var normalizeNodes = (res, doc) => {
     return doc.createTextNode(it !== void 0 && it !== null ? String(it) : "");
   });
 };
-function appendChild(selector, options = { position: "beforeEnd" }) {
+function applyNode(selector, options = { position: "beforeEnd" }) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+    let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor);
     if (!metaList) {
       metaList = /* @__PURE__ */ new Map();
-      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, metaList, constructor);
+      ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
     }
     metaList.set(propertyKey, { propertyKey, selector, options });
     const original = descriptor.value;
@@ -6093,28 +6065,70 @@ function appendChild(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 getTargetRoot = () => {
+          if (r === "shadow")
+            return this.shadowRoot;
+          if (r === "light")
+            return this;
+          if (r === "all")
+            return this.shadowRoot || this;
+          return this.shadowRoot || this;
+        };
+        if (pos === "remove") {
+          if (res) {
+            if (selector === ":host" || !selector) {
+              if (r === "shadow" && this.shadowRoot) {
+                this.shadowRoot.replaceChildren();
+              } else {
+                this.remove();
+              }
+            } else {
+              const targetRoot = getTargetRoot();
+              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 (typeof res === "string") {
-            targetEl.insertAdjacentText(pos, res);
-          } else if (Array.isArray(res) && res.every((n) => typeof n === "string")) {
-            targetEl.insertAdjacentText(pos, res.join(""));
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            if (r === "shadow") {
+              targetEl = this.shadowRoot;
+            } else {
+              targetEl = this;
+            }
           } 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 = getTargetRoot();
+            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);
+            }
           }
         }
       }
@@ -6122,9 +6136,9 @@ function appendChild(selector, options = { position: "beforeEnd" }) {
     };
   };
 }
-var findAllAppendChildMetadata = (target) => {
+var findAllApplyNodeMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
-  const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+  const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
   maps.forEach((map) => {
     if (map instanceof Map) {
       map.forEach((v, k) => result.set(k, v));
@@ -6132,6 +6146,27 @@ var findAllAppendChildMetadata = (target) => {
   });
   return result;
 };
+function applyNodeHost(options = { position: "beforeEnd" }) {
+  return applyNode(":host", options);
+}
+var applyBeforeBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeBegin" });
+var applyAfterBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterBegin" });
+var applyBeforeEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeEnd" });
+var applyAfterEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterEnd" });
+var applyReplaceNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replace" });
+var applyReplaceChildrenNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replaceChildren" });
+var applyInnerHtmlNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerHtml" });
+var applyInnerTextNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerText" });
+var applyRemoveNode = (selector, options = {}) => applyNode(selector, { ...options, position: "remove" });
+var applyBeforeBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeBegin" });
+var applyAfterBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterBegin" });
+var applyBeforeEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeEnd" });
+var applyAfterEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterEnd" });
+var applyReplaceNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replace" });
+var applyReplaceChildrenNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replaceChildren" });
+var applyInnerHtmlNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerHtml" });
+var applyInnerTextNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerText" });
+var applyRemoveNodeHost = (options = {}) => applyNode(":host", { ...options, position: "remove" });
 
 // src/decorators/query.ts
 var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
@@ -6232,6 +6267,9 @@ 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);
+}
 
 // src/decorators/queryAll.ts
 var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
@@ -6329,11 +6367,14 @@ 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);
+}
 
 // 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);
@@ -6341,19 +6382,39 @@ 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 = [];
+          if (selector === ":host" || !selector) {
+            targetEls.push(this);
+          } else if (selector === ":parentHost") {
+            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
+          } else if (selector === ":appHost") {
+            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
+          } else {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "all") {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = this.querySelectorAll(selector);
+              if (sFound) targetEls.push(...sFound);
+              if (lFound) targetEls.push(...lFound);
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               let classes = "";
               if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6381,18 +6442,23 @@ 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 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);
+var setClassListHost = (options = {}) => createClassListDecorator("set")(":host", options);
+var updateClassListHost = (options = {}) => createClassListDecorator("update")(":host", options);
+var addClassListHost = (options = {}) => createClassListDecorator("add")(":host", options);
+var removeClassListHost = (options = {}) => createClassListDecorator("remove")(":host", options);
+var toggleClassListHost = (options = {}) => createClassListDecorator("toggle")(":host", options);
 var findAllClassListMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6407,7 +6473,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);
@@ -6415,19 +6481,39 @@ 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 = [];
+          if (selector === ":host" || !selector) {
+            targetEls.push(this);
+          } else if (selector === ":parentHost") {
+            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
+          } else if (selector === ":appHost") {
+            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
+          } else {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "all") {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = this.querySelectorAll(selector);
+              if (sFound) targetEls.push(...sFound);
+              if (lFound) targetEls.push(...lFound);
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               targetEl.style.cssText = "";
               if (typeof res === "object" && res !== null) {
@@ -6443,16 +6529,19 @@ 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);
+var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
+var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
+var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
 var findAllStyleMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -6582,9 +6671,6 @@ function emitCustomEvent(selectorOrTarget, type, options = {}) {
   return (targetObj, propertyKey, descriptor) => {
     const constructor = targetObj.constructor;
     const fullOptions = { ...options, type };
-    if (!fullOptions.attributeName) {
-      fullOptions.attributeName = `swc-on-${type}`;
-    }
     if (fullOptions.bubbles === void 0) fullOptions.bubbles = true;
     if (fullOptions.composed === void 0) fullOptions.composed = true;
     let list = ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
@@ -6649,6 +6735,9 @@ var getEmitCustomEventMetadataList = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
 };
+function emitCustomEventHost(type, options) {
+  return emitCustomEvent(":host", type, options);
+}
 
 // src/config/config.ts
 var HTML_TAG_ENTRIES = [
@@ -6769,6 +6858,10 @@ var ensureInit2 = (inst) => {
     inst.__swc_initialized = true;
     const hostSet = SwcUtils.getHostSet(inst);
     inst._executeSwcScript?.("swc-on-constructor", hostSet);
+    const cMethods = findAllLifecycleMetadata(inst, ON_CONSTRUCTOR_METADATA_KEY);
+    if (cMethods) {
+      for (const m of cMethods) inst._invokeLifecycleMethod(m, hostSet);
+    }
   }
 };
 var globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
@@ -6867,7 +6960,9 @@ var setupPrototype = (proto) => {
     const oldHandler = handlers.get(attrName);
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
     const handler = async (event) => {
-      const hostSet = SwcUtils.getHostSet(el);
+      console.log("execute handler", event);
+      const parent = SwcUtils.findNearestSwcHost(el);
+      const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
       const currentWin = this._resolveWindow(conf);
       const helpers = SwcUtils.getHelperSet(currentWin);
@@ -6886,13 +6981,18 @@ var setupPrototype = (proto) => {
   };
   proto.__swc_executeAttributeEvent = async function(el, attrName, script, event) {
     ensureInit2(this);
-    const hostSet = SwcUtils.getHostSet(el);
+    console.log("execute handler2", event);
+    const parent = SwcUtils.findNearestSwcHost(el);
+    const hostSet = SwcUtils.getHostSet(parent || el);
     const conf = getElementConfig(this);
     const currentWin = this._resolveWindow(conf);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
+    const detail = event.detail;
     const args = {
       event,
-      $data: event.detail,
+      $event: event,
+      $data: detail,
+      $detail: detail,
       ...hostSet,
       ...currentHelpers,
       $el: el,
@@ -6919,12 +7019,14 @@ var elementDefine = (name, config = {}) => (constructor) => {
     metadata.extends = extendsTagName;
   }
   const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
+  const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === ":host" || meta.selector === "");
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+  const addHostEventListenerList = addEventListenerList.filter((meta) => meta.selector === ":host" || meta.selector === "");
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const attributeList = findAllAttributeMetadata(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 mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map((it) => it.name), ...attributeList.map((it) => it.options.name || String(it.propertyKey)), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
+  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map((it) => it.name), ...attributeList.map((it) => it.options.name || String(it.propertyKey)), ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
   const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
   const proto = constructor.prototype;
   setupPrototype(proto);
@@ -6944,25 +7046,15 @@ var elementDefine = (name, config = {}) => (constructor) => {
     }
     attributeList.forEach((meta) => {
       const attrName = meta.options.name || String(meta.propertyKey);
-      if (meta.options.connectedInitialize) {
-        const memoryVal = this[meta.privateKey];
-        if (memoryVal !== void 0) {
-          this.__swc_syncing_init = true;
-          try {
+      if (meta.options.connectedInitialize === true) {
+        this.__swc_syncing_init = true;
+        try {
+          const memoryVal = this[meta.privateKey];
+          if (memoryVal !== void 0) {
             this[meta.propertyKey] = memoryVal;
-          } finally {
-            this.__swc_syncing_init = false;
-          }
-        }
-      } else if (meta.selector === ":host" || !meta.selector) {
-        const domVal = this.getAttribute(attrName);
-        if (domVal !== null) {
-          this.__swc_syncing_init = true;
-          try {
-            this[meta.propertyKey] = domVal;
-          } finally {
-            this.__swc_syncing_init = false;
           }
+        } finally {
+          this.__swc_syncing_init = false;
         }
       }
     });
@@ -6985,7 +7077,62 @@ var elementDefine = (name, config = {}) => (constructor) => {
       });
       globalDelegatedRoots.add(root);
     }
+    const delegateListeners = [];
+    const nonDelegateListeners = [];
     addEventListenerList.forEach((meta) => {
+      if (meta.options.delegate && meta.selector !== ":window" && meta.selector !== ":document" && meta.selector !== ":parentHost" && meta.selector !== ":appHost" && meta.selector !== ":firstHost" && meta.selector !== ":lastHost" && meta.selector !== ":firstAppHost" && meta.selector !== ":lastAppHost" && meta.selector !== ":hosts" && meta.selector !== ":appHosts" && meta.selector !== ":host" && meta.selector !== "") {
+        delegateListeners.push(meta);
+      } else {
+        nonDelegateListeners.push(meta);
+      }
+    });
+    const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
+    delegateListeners.forEach((meta) => {
+      const r = meta.options.root || "auto";
+      const rootKey = `${meta.type}:${r}`;
+      if (!delegatesByTypeAndRoot.has(rootKey)) {
+        delegatesByTypeAndRoot.set(rootKey, []);
+      }
+      delegatesByTypeAndRoot.get(rootKey).push(meta);
+    });
+    delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
+      const [type, rStr] = typeRootKey.split(":");
+      const r = rStr === "auto" ? "auto" : rStr;
+      const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+      const bindRoots = [];
+      if (r === "auto") bindRoots.push(this.shadowRoot || this);
+      else if (r === "light") bindRoots.push(this);
+      else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
+      else if (r === "all") {
+        bindRoots.push(this);
+        if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+      }
+      bindRoots.forEach((br) => {
+        const sortedMetaList = [...metaList].sort((a, b) => {
+          const aStop = a.options.stopPropagation ? 1 : 0;
+          const bStop = b.options.stopPropagation ? 1 : 0;
+          return bStop - aStop;
+        });
+        const unifiedHandler = async (event) => {
+          for (const meta of sortedMetaList) {
+            const { selector, options } = meta;
+            const matchedEl = event.target.closest(selector);
+            if (matchedEl && br.contains(matchedEl)) {
+              if (options.stopPropagation) event.stopPropagation();
+              if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+              if (options.preventDefault) event.preventDefault();
+              const currentHostSet = SwcUtils.getHostSet(this);
+              const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+              await this[meta.propertyKey](event, currentHostSet, matchedEl, args);
+              if (event.cancelBubble) break;
+            }
+          }
+        };
+        br.addEventListener(type, unifiedHandler, opts);
+        this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+      });
+    });
+    nonDelegateListeners.forEach((meta) => {
       const { selector, type, options } = meta;
       const opts = { capture: options.capture, once: options.once, passive: options.passive };
       const bindTargets = [];
@@ -7010,33 +7157,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
       else if (selector === ":hosts") hostSet.$hosts.forEach(applyRootOption);
       else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRootOption);
       else if (selector === ":host" || !selector) applyRootOption(this);
-      else if (options.delegate) {
-        const bindRoots = [];
-        if (r === "auto") bindRoots.push(this.shadowRoot || this);
-        else if (r === "light") bindRoots.push(this);
-        else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-        else if (r === "all") {
-          bindRoots.push(this);
-          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-        }
-        bindRoots.forEach((br) => {
-          const handler = async (event) => {
-            const matchedEl = event.target.closest(selector);
-            if (matchedEl && br.contains(matchedEl)) {
-              if (options.stopPropagation) event.stopPropagation();
-              if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-              if (options.preventDefault) event.preventDefault();
-              const currentHostSet = SwcUtils.getHostSet(this);
-              const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-              await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl, args]);
-            }
-          };
-          br.addEventListener(type, handler, opts);
-          if (options.removeOnDisconnected === true || br !== this && br !== this.shadowRoot) {
-            this._boundListeners.push({ target: br, type, handler, options: opts });
-          }
-        });
-      } else {
+      else {
         const searchRoots = [];
         if (r === "auto") searchRoots.push(this.shadowRoot || this);
         else if (r === "light") searchRoots.push(this);
@@ -7056,7 +7177,7 @@ var elementDefine = (name, config = {}) => (constructor) => {
           if (options.preventDefault) event.preventDefault();
           const currentHostSet = SwcUtils.getHostSet(this);
           const args = { event, ...currentHostSet, $el: t, $root: t };
-          await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+          await this[meta.propertyKey](event, currentHostSet, args);
         };
         t.addEventListener(type, handler, opts);
         if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
@@ -7064,6 +7185,22 @@ var elementDefine = (name, config = {}) => (constructor) => {
         }
       });
     });
+    addHostEventListenerList.forEach((meta) => {
+      const { type, options } = meta;
+      const opts = { capture: options.capture, once: options.once, passive: options.passive };
+      const handler = async (event) => {
+        if (options.stopPropagation) event.stopPropagation();
+        if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+        if (options.preventDefault) event.preventDefault();
+        const currentHostSet = SwcUtils.getHostSet(this);
+        const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
+        await this[meta.propertyKey](event, currentHostSet, args);
+      };
+      this.addEventListener(type, handler, opts);
+      if (options.removeOnDisconnected === true) {
+        this._boundListeners.push({ target: this, type, handler, options: opts });
+      }
+    });
     if (originalConnected) originalConnected.apply(this);
     const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
     if (aMethods) {
@@ -7113,17 +7250,20 @@ var elementDefine = (name, config = {}) => (constructor) => {
   const originalAttributeChanged = proto.attributeChangedCallback;
   proto.attributeChangedCallback = function(name2, old, newVal) {
     if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
+    const hSet = SwcUtils.getHostSet(this);
     if (name2.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name2)) {
       if (newVal !== null) {
-        const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name2);
-        const eventName = customEventMeta ? customEventMeta.type : name2.substring(7);
+        const eventName = name2.substring(7);
         this._bindAttributeEvent(this, name2, newVal, eventName);
       }
     }
+    const hostCustomEventMeta = emitHostCustomEventList.find((it) => it.options.attributeName === name2);
+    if (hostCustomEventMeta && newVal !== null) {
+      this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
+    }
     const mKeys = attrChangeMap.get(name2);
     if (mKeys && Array.isArray(mKeys)) {
-      const hSet = SwcUtils.getHostSet(this);
-      for (const key of mKeys) this._invokeLifecycleMethod(key, hSet, [newVal, old, name2]);
+      for (const key of mKeys) this[key](newVal, old, name2, hSet);
     }
   };
   Object.defineProperty(constructor, "observedAttributes", {
@@ -7948,6 +8088,10 @@ var TemplateUtils;
     const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
     return document.createTextNode(raw);
   };
+  TemplateUtils2.commentNode = (strings, ...values) => {
+    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
+    return document.createComment(raw);
+  };
   TemplateUtils2.createElement = (info, attrs = {}) => {
     const el = document.createElement(info.tagName);
     if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
@@ -7980,6 +8124,7 @@ var TemplateUtils;
 })(TemplateUtils || (TemplateUtils = {}));
 var htmlFragment = TemplateUtils.htmlFragment;
 var textNode = TemplateUtils.textNode;
+var commentNode = TemplateUtils.commentNode;
 var createElement = TemplateUtils.createElement;
 var htmlDivElement = TemplateUtils.htmlDivElement;
 var htmlSpanElement = TemplateUtils.htmlSpanElement;
@@ -7999,7 +8144,7 @@ var htmlSectionElement = TemplateUtils.htmlSectionElement;
 var htmlArticleElement = TemplateUtils.htmlArticleElement;
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
-  APPEND_CHILD_METADATA_KEY,
+  APPLY_NODE_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
   ATTRIBUTE_METADATA_KEY,
   BROWSER_GLOBALS,
@@ -8008,6 +8153,7 @@ export {
   ELEMENT_CONFIG_KEY,
   EMIT_CUSTOM_EVENT_METADATA_KEY,
   HTML_TAG_ENTRIES,
+  INNER_HTML_METADATA_KEY,
   InjectSituationType,
   ON_ADD_EVENT_LISTENER_METADATA_KEY,
   ON_AFTER_ADOPTED_METADATA_KEY,
@@ -8017,38 +8163,61 @@ export {
   ON_BEFORE_ADOPTED_METADATA_KEY,
   ON_BEFORE_CONNECTED_METADATA_KEY,
   ON_BEFORE_DISCONNECTED_METADATA_KEY,
+  ON_CONSTRUCTOR_METADATA_KEY,
   QUERY_ALL_METADATA_KEY,
   QUERY_METADATA_KEY,
-  REPLACE_CHILDREN_METADATA_KEY,
   SET_ATTRIBUTE_METADATA_KEY,
   STYLE_METADATA_KEY,
   SWC_NOT_FOUND,
   SwcUtils,
   TemplateUtils,
   addClassList,
+  addClassListHost,
   addEventListener,
-  appendChild,
+  addEventListenerHost,
+  applyAfterBeginNode,
+  applyAfterBeginNodeHost,
+  applyAfterEndNode,
+  applyAfterEndNodeHost,
+  applyBeforeBeginNode,
+  applyBeforeBeginNodeHost,
+  applyBeforeEndNode,
+  applyBeforeEndNodeHost,
+  applyInnerHtmlNode,
+  applyInnerHtmlNodeHost,
+  applyInnerTextNode,
+  applyInnerTextNodeHost,
+  applyNode,
+  applyNodeHost,
+  applyRemoveNode,
+  applyRemoveNodeHost,
+  applyReplaceChildrenNode,
+  applyReplaceChildrenNodeHost,
+  applyReplaceNode,
+  applyReplaceNodeHost,
   attribute,
-  changedAttribute,
+  attributeHost,
+  changedAttributeHost,
+  commentNode,
   createElement,
   elementDefine,
   emitCustomEvent,
+  emitCustomEventHost,
   ensureInit2 as ensureInit,
-  findAllAppendChildMetadata,
+  findAllApplyNodeMetadata,
   findAllAttributeChangedMetadata,
   findAllAttributeMetadata,
   findAllClassListMetadata,
   findAllLifecycleMetadata,
-  findAllReplaceChildrenMetadata,
   findAllSetAttributeMetadata,
   findAllStyleMetadata,
   getAddEventListenerMetadata,
   getChangedAttributeMetadata,
   getElementConfig,
   getEmitCustomEventMetadataList,
+  getOnConnectedInnerHtmlMetadata,
   getQueryAllMetadata,
   getQueryMetadata,
-  getReplaceChildrenMetadata,
   getSetAttributeMetadata,
   htmlAElement,
   htmlArticleElement,
@@ -8077,20 +8246,30 @@ export {
   onBeforeDisconnected,
   onConnected,
   onConnectedInnerHtml,
+  onConstructor,
   onDisconnected,
   query,
   queryAll,
+  queryAllHost,
+  queryHost,
   removeClassList,
+  removeClassListHost,
   removeStyle,
-  replaceChildren,
+  removeStyleHost,
   resolveTargetEls,
   setAttribute,
+  setAttributeHost,
   setClassList,
+  setClassListHost,
   setStyle,
+  setStyleHost,
   textNode,
   toggleClassList,
+  toggleClassListHost,
   updateClassList,
-  updateStyle
+  updateClassListHost,
+  updateStyle,
+  updateStyleHost
 };
 /*! Bundled license information: