@dooboostore/simple-web-component 1.0.16 → 1.0.18

package/dist/cjs/utils/Utils.js

@@ -23,8 +23,27 @@ __export(Utils_exports, {
 module.exports = __toCommonJS(Utils_exports);
 var import_elementDefine = require("../decorators/elementDefine");
 const SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-class SwcUtils {
-  static getValueByPath(obj, path, rootName) {
+var SwcUtils;
+((SwcUtils2) => {
+  SwcUtils2.getHelperSet = (win) => {
+    const doc = win.document;
+    return {
+      $d: doc,
+      $w: win,
+      $q: (sel, root) => (root ?? doc).querySelector(sel),
+      $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
+      $qi: (id, root) => (root ?? doc).getElementById(id)
+    };
+  };
+  SwcUtils2.getHelperAndHostSet = (win, el) => {
+    const helperSet = (0, SwcUtils2.getHelperSet)(win);
+    const hostSet = (0, SwcUtils2.getHostSet)(el);
+    return {
+      ...helperSet,
+      ...hostSet
+    };
+  };
+  SwcUtils2.getValueByPath = (obj, path, rootName) => {
     if (!obj || !path) return SWC_NOT_FOUND;
     const parts = path.split(".");
     let current = obj;
@@ -33,49 +52,66 @@ class SwcUtils {
       current = current[part];
     }
     return current;
-  }
-  static findNearestSwcHost(el) {
-    let current = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
-    current = current?.parentElement || current?.getRootNode()?.host;
-    while (current) {
+  };
+  SwcUtils2.findNearestSwcHost = (el) => {
+    if (el.__swc_host) return el.__swc_host;
+    let current = el.parentElement || el.getRootNode?.()?.host;
+    while (current && current !== document && current !== window) {
+      if (current.__swc_host) return current.__swc_host;
       if ((0, import_elementDefine.getElementConfig)(current)) return current;
-      current = current.parentElement || current?.getRootNode()?.host;
+      current = current.parentElement || current.getRootNode?.()?.host;
     }
     return void 0;
-  }
-  /**
-   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
-   */
-  static findAllSwcHosts(el) {
+  };
+  SwcUtils2.findAllSwcHosts = (el) => {
     const hosts = [];
-    let current = this.findNearestSwcHost(el);
+    let current = (0, SwcUtils2.findNearestSwcHost)(el);
     while (current) {
       hosts.push(current);
-      current = this.findNearestSwcHost(current);
+      current = (0, SwcUtils2.findNearestSwcHost)(current);
     }
     return hosts.reverse();
-  }
-  static getHosts(el) {
-    return [...this.findAllSwcHosts(el), el];
-  }
-  static getHost(el) {
-    return el;
-  }
-  static getAppHosts(el) {
-    const hosts = this.getHosts(el);
+  };
+  SwcUtils2.getHosts = (el) => {
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    if ((0, import_elementDefine.getElementConfig)(el)) return [...ancestors, el];
+    return ancestors;
+  };
+  SwcUtils2.getHost = (el) => {
+    if ((0, import_elementDefine.getElementConfig)(el)) return el;
+    return (0, SwcUtils2.findNearestSwcHost)(el);
+  };
+  SwcUtils2.getAppHosts = (el) => {
+    const hosts = (0, SwcUtils2.getHosts)(el);
     return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
-  }
-  static getAppHost(el) {
-    const appHosts = this.getAppHosts(el);
+  };
+  SwcUtils2.getAppHost = (el) => {
+    const appHosts = (0, SwcUtils2.getAppHosts)(el);
     const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
     return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
-  }
-  static getHostSet(el) {
-    const ancestors = this.findAllSwcHosts(el);
-    const $host = el;
-    const $hosts = [...ancestors, $host];
-    const $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
-    const $firstHost = ancestors.length > 0 ? ancestors[0] : null;
+  };
+  SwcUtils2.getHostSet = (el) => {
+    const isSwc = !!(0, import_elementDefine.getElementConfig)(el);
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    let $host;
+    let $parentHost;
+    if (isSwc) {
+      $host = el;
+      $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
+    } else {
+      $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : el;
+      $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
+    }
+    const $hosts = isSwc ? [...ancestors, el] : ancestors;
+    const $firstHost = $hosts.length > 0 ? $hosts[0] : null;
+    const loopContext = {};
+    let curr = el;
+    while (curr && curr !== document.documentElement) {
+      if (curr.__swc_loop_context) {
+        Object.assign(loopContext, curr.__swc_loop_context);
+      }
+      curr = curr.parentElement || curr.getRootNode().host;
+    }
     const $appHosts = $hosts.filter((h) => h.tagName.toLowerCase() === "swc-app" || h.getAttribute("is")?.startsWith("swc-app-"));
     const $appHost = $appHosts.length > 0 ? $appHosts[$appHosts.length - 1] === el ? $appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null : $appHosts[$appHosts.length - 1] : null;
     const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
@@ -88,8 +124,9 @@ class SwcUtils {
       $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost: $appHost
+      $lastAppHost: $appHost,
+      ...loopContext
     };
-  }
-}
+  };
+})(SwcUtils || (SwcUtils = {}));
 //# sourceMappingURL=Utils.js.map

package/dist/cjs/utils/Utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/Utils.ts"],
-  "sourcesContent": ["import { SwcAppInterface, HostSet } from '../types';\nimport { getElementConfig } from '../decorators/elementDefine';\n\nexport const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');\n\nexport class SwcUtils {\n  static getValueByPath(obj: any, path: string, rootName: string) {\n    if (!obj || !path) return SWC_NOT_FOUND;\n\n    const parts = path.split('.');\n    let current = obj;\n\n    for (const part of parts) {\n      if (current === null || current === undefined) return SWC_NOT_FOUND;\n      current = current[part];\n    }\n    return current;\n  }\n\n  static findNearestSwcHost(el: HTMLElement | Node): HTMLElement | undefined {\n    let current: any = el instanceof Node && !(el instanceof HTMLElement) ? (el as any).host : el;\n    current = current?.parentElement || (current?.getRootNode() as any)?.host;\n\n    while (current) {\n      if (getElementConfig(current)) return current as HTMLElement;\n      current = current.parentElement || (current?.getRootNode() as any)?.host;\n    }\n    return undefined;\n  }\n\n  /**\n   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.\n   */\n  static findAllSwcHosts(el: HTMLElement | Node): HTMLElement[] {\n    const hosts: HTMLElement[] = [];\n    let current = this.findNearestSwcHost(el);\n    while (current) {\n      hosts.push(current);\n      current = this.findNearestSwcHost(current);\n    }\n    return hosts.reverse();\n  }\n\n  static getHosts(el: HTMLElement): HTMLElement[] {\n    return [...this.findAllSwcHosts(el), el];\n  }\n\n  static getHost(el: HTMLElement): HTMLElement | undefined {\n    return el;\n  }\n\n  static getAppHosts(el: HTMLElement): SwcAppInterface[] {\n    const hosts = this.getHosts(el);\n    return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];\n  }\n\n  static getAppHost(el: HTMLElement): SwcAppInterface | undefined {\n    const appHosts = this.getAppHosts(el);\n    const appHostsWithoutSelf = appHosts.filter(h => h !== el);\n    // Nearest app host is the last one in [root, ..., parent]\n    return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : undefined;\n  }\n\n  static getHostSet(el: HTMLElement): HostSet {\n    const ancestors = this.findAllSwcHosts(el); // [root, ..., parent]\n    const $host = el;\n    const $hosts = [...ancestors, $host]; // [root, ..., parent, self]\n    const $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;\n    const $firstHost = ancestors.length > 0 ? ancestors[0] : null;\n\n    const $appHosts = $hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];\n    const $appHost = $appHosts.length > 0 ? ($appHosts[$appHosts.length - 1] === el ? ($appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null) : $appHosts[$appHosts.length - 1]) : null;\n    const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;\n\n    return {\n      $host,\n      $parentHost,\n      $hosts,\n      $firstHost,\n      $lastHost: $parentHost,\n      $appHost,\n      $appHosts,\n      $firstAppHost,\n      $lastAppHost: $appHost\n    };\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAAiC;AAE1B,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,SAAS;AAAA,EACpB,OAAO,eAAe,KAAU,MAAc,UAAkB;AAC9D,QAAI,CAAC,OAAO,CAAC,KAAM,QAAO;AAE1B,UAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,QAAI,UAAU;AAEd,eAAW,QAAQ,OAAO;AACxB,UAAI,YAAY,QAAQ,YAAY,OAAW,QAAO;AACtD,gBAAU,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,mBAAmB,IAAiD;AACzE,QAAI,UAAe,cAAc,QAAQ,EAAE,cAAc,eAAgB,GAAW,OAAO;AAC3F,cAAU,SAAS,iBAAkB,SAAS,YAAY,GAAW;AAErE,WAAO,SAAS;AACd,cAAI,uCAAiB,OAAO,EAAG,QAAO;AACtC,gBAAU,QAAQ,iBAAkB,SAAS,YAAY,GAAW;AAAA,IACtE;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,gBAAgB,IAAuC;AAC5D,UAAM,QAAuB,CAAC;AAC9B,QAAI,UAAU,KAAK,mBAAmB,EAAE;AACxC,WAAO,SAAS;AACd,YAAM,KAAK,OAAO;AAClB,gBAAU,KAAK,mBAAmB,OAAO;AAAA,IAC3C;AACA,WAAO,MAAM,QAAQ;AAAA,EACvB;AAAA,EAEA,OAAO,SAAS,IAAgC;AAC9C,WAAO,CAAC,GAAG,KAAK,gBAAgB,EAAE,GAAG,EAAE;AAAA,EACzC;AAAA,EAEA,OAAO,QAAQ,IAA0C;AACvD,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,YAAY,IAAoC;AACrD,UAAM,QAAQ,KAAK,SAAS,EAAE;AAC9B,WAAO,MAAM,OAAO,UAAQ,KAAK,QAAQ,YAAY,MAAM,aAAa,KAAK,aAAa,IAAI,GAAG,WAAW,UAAU,CAAC;AAAA,EACzH;AAAA,EAEA,OAAO,WAAW,IAA8C;AAC9D,UAAM,WAAW,KAAK,YAAY,EAAE;AACpC,UAAM,sBAAsB,SAAS,OAAO,OAAK,MAAM,EAAE;AAEzD,WAAO,oBAAoB,SAAS,IAAI,oBAAoB,oBAAoB,SAAS,CAAC,IAAI;AAAA,EAChG;AAAA,EAEA,OAAO,WAAW,IAA0B;AAC1C,UAAM,YAAY,KAAK,gBAAgB,EAAE;AACzC,UAAM,QAAQ;AACd,UAAM,SAAS,CAAC,GAAG,WAAW,KAAK;AACnC,UAAM,cAAc,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI;AAC7E,UAAM,aAAa,UAAU,SAAS,IAAI,UAAU,CAAC,IAAI;AAEzD,UAAM,YAAY,OAAO,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,aAAa,EAAE,aAAa,IAAI,GAAG,WAAW,UAAU,CAAC;AAC1H,UAAM,WAAW,UAAU,SAAS,IAAK,UAAU,UAAU,SAAS,CAAC,MAAM,KAAM,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI,OAAQ,UAAU,UAAU,SAAS,CAAC,IAAK;AACvL,UAAM,gBAAgB,UAAU,SAAS,IAAI,UAAU,CAAC,IAAI;AAE5D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["import { SwcAppInterface, HostSet, HelperSet, HelperHostSet } from '../types';\nimport { getElementConfig } from '../decorators/elementDefine';\n\nexport const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');\n\nexport namespace SwcUtils {\n  export const getHelperSet = (win: Window): HelperSet => {\n    const doc: Document = win.document;\n    return {\n      $d: doc,\n      $w: win,\n      $q: (sel: string, root?: Element | Document | ShadowRoot) => (root ?? doc).querySelector(sel),\n      $qa: (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? doc).querySelectorAll(sel)) as HTMLElement[],\n      $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id) as HTMLElement\n    } as const;\n  };\n\n  export const getHelperAndHostSet = (win: Window, el: HTMLElement): HelperHostSet => {\n    const helperSet = getHelperSet(win);\n    const hostSet = getHostSet(el);\n    return {\n      ...helperSet,\n      ...hostSet\n    };\n  };\n\n  export const getValueByPath = (obj: any, path: string, rootName: string) => {\n    if (!obj || !path) return SWC_NOT_FOUND;\n\n    const parts = path.split('.');\n    let current = obj;\n\n    for (const part of parts) {\n      if (current === null || current === undefined) return SWC_NOT_FOUND;\n      current = current[part];\n    }\n    return current;\n  };\n\n  /**\n   * Finds the nearest logical SWC host for an element.\n   * Checks __swc_host property first, then climbs the DOM tree.\n   */\n  export const findNearestSwcHost = (el: HTMLElement | Node): HTMLElement | undefined => {\n    if ((el as any).__swc_host) return (el as any).__swc_host;\n\n    let current: any = el.parentElement || (el.getRootNode?.() as any)?.host;\n    while (current && current !== document && current !== window) {\n      if (current.__swc_host) return current.__swc_host;\n      if (getElementConfig(current)) return current as HTMLElement;\n      current = current.parentElement || (current.getRootNode?.() as any)?.host;\n    }\n    return undefined;\n  };\n\n  /**\n   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.\n   */\n  export const findAllSwcHosts = (el: HTMLElement | Node): HTMLElement[] => {\n    const hosts: HTMLElement[] = [];\n    let current = findNearestSwcHost(el);\n    while (current) {\n      hosts.push(current);\n      // To find the next ancestor, we must start searching from the PARENT of the found host\n      current = findNearestSwcHost(current);\n    }\n    return hosts.reverse();\n  };\n\n  export const getHosts = (el: HTMLElement): HTMLElement[] => {\n    const ancestors = findAllSwcHosts(el);\n    if (getElementConfig(el)) return [...ancestors, el];\n    return ancestors;\n  };\n\n  export const getHost = (el: HTMLElement): HTMLElement | undefined => {\n    if (getElementConfig(el)) return el;\n    return findNearestSwcHost(el);\n  };\n\n  export const getAppHosts = (el: HTMLElement): SwcAppInterface[] => {\n    const hosts = getHosts(el);\n    return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];\n  };\n\n  export const getAppHost = (el: HTMLElement): SwcAppInterface | undefined => {\n    const appHosts = getAppHosts(el);\n    const appHostsWithoutSelf = appHosts.filter(h => h !== el);\n    return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : undefined;\n  };\n\n  export const getHostSet = (el: HTMLElement): HostSet => {\n    const isSwc = !!getElementConfig(el);\n    const ancestors = findAllSwcHosts(el); // [root, ..., parent]\n\n    let $host: HTMLElement;\n    let $parentHost: HTMLElement | null;\n\n    if (isSwc) {\n      $host = el;\n      $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;\n    } else {\n      $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : el;\n      $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;\n    }\n\n    const $hosts = isSwc ? [...ancestors, el] : ancestors;\n    const $firstHost = $hosts.length > 0 ? $hosts[0] : null;\n\n    // Collect loop contexts\n    const loopContext: Record<string, any> = {};\n    let curr: any = el;\n    while (curr && curr !== document.documentElement) {\n      if (curr.__swc_loop_context) {\n        Object.assign(loopContext, curr.__swc_loop_context);\n      }\n      curr = curr.parentElement || (curr.getRootNode() as any).host;\n    }\n\n    const $appHosts = $hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];\n    const $appHost = $appHosts.length > 0 ? ($appHosts[$appHosts.length - 1] === el ? ($appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null) : $appHosts[$appHosts.length - 1]) : null;\n    const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;\n\n    return {\n      $host,\n      $parentHost,\n      $hosts,\n      $firstHost,\n      $lastHost: $parentHost,\n      $appHost,\n      $appHosts,\n      $firstAppHost,\n      $lastAppHost: $appHost,\n      ...loopContext\n    } as any;\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAAiC;AAE1B,MAAM,gBAAgB,OAAO,eAAe;AAE5C,IAAU;AAAA,CAAV,CAAUA,cAAV;AACE,EAAMA,UAAA,eAAe,CAAC,QAA2B;AACtD,UAAM,MAAgB,IAAI;AAC1B,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI,CAAC,KAAa,UAA4C,QAAQ,KAAK,cAAc,GAAG;AAAA,MAC5F,KAAK,CAAC,KAAa,SAA2C,MAAM,MAAM,QAAQ,KAAK,iBAAiB,GAAG,CAAC;AAAA,MAC5G,KAAK,CAAC,IAAY,UAAkC,QAAQ,KAAK,eAAe,EAAE;AAAA,IACpF;AAAA,EACF;AAEO,EAAMA,UAAA,sBAAsB,CAAC,KAAa,OAAmC;AAClF,UAAM,gBAAYA,UAAA,cAAa,GAAG;AAClC,UAAM,cAAUA,UAAA,YAAW,EAAE;AAC7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAEO,EAAMA,UAAA,iBAAiB,CAAC,KAAU,MAAc,aAAqB;AAC1E,QAAI,CAAC,OAAO,CAAC,KAAM,QAAO;AAE1B,UAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,QAAI,UAAU;AAEd,eAAW,QAAQ,OAAO;AACxB,UAAI,YAAY,QAAQ,YAAY,OAAW,QAAO;AACtD,gBAAU,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AAMO,EAAMA,UAAA,qBAAqB,CAAC,OAAoD;AACrF,QAAK,GAAW,WAAY,QAAQ,GAAW;AAE/C,QAAI,UAAe,GAAG,iBAAkB,GAAG,cAAc,GAAW;AACpE,WAAO,WAAW,YAAY,YAAY,YAAY,QAAQ;AAC5D,UAAI,QAAQ,WAAY,QAAO,QAAQ;AACvC,cAAI,uCAAiB,OAAO,EAAG,QAAO;AACtC,gBAAU,QAAQ,iBAAkB,QAAQ,cAAc,GAAW;AAAA,IACvE;AACA,WAAO;AAAA,EACT;AAKO,EAAMA,UAAA,kBAAkB,CAAC,OAA0C;AACxE,UAAM,QAAuB,CAAC;AAC9B,QAAI,cAAUA,UAAA,oBAAmB,EAAE;AACnC,WAAO,SAAS;AACd,YAAM,KAAK,OAAO;AAElB,oBAAUA,UAAA,oBAAmB,OAAO;AAAA,IACtC;AACA,WAAO,MAAM,QAAQ;AAAA,EACvB;AAEO,EAAMA,UAAA,WAAW,CAAC,OAAmC;AAC1D,UAAM,gBAAYA,UAAA,iBAAgB,EAAE;AACpC,YAAI,uCAAiB,EAAE,EAAG,QAAO,CAAC,GAAG,WAAW,EAAE;AAClD,WAAO;AAAA,EACT;AAEO,EAAMA,UAAA,UAAU,CAAC,OAA6C;AACnE,YAAI,uCAAiB,EAAE,EAAG,QAAO;AACjC,eAAOA,UAAA,oBAAmB,EAAE;AAAA,EAC9B;AAEO,EAAMA,UAAA,cAAc,CAAC,OAAuC;AACjE,UAAM,YAAQA,UAAA,UAAS,EAAE;AACzB,WAAO,MAAM,OAAO,UAAQ,KAAK,QAAQ,YAAY,MAAM,aAAa,KAAK,aAAa,IAAI,GAAG,WAAW,UAAU,CAAC;AAAA,EACzH;AAEO,EAAMA,UAAA,aAAa,CAAC,OAAiD;AAC1E,UAAM,eAAWA,UAAA,aAAY,EAAE;AAC/B,UAAM,sBAAsB,SAAS,OAAO,OAAK,MAAM,EAAE;AACzD,WAAO,oBAAoB,SAAS,IAAI,oBAAoB,oBAAoB,SAAS,CAAC,IAAI;AAAA,EAChG;AAEO,EAAMA,UAAA,aAAa,CAAC,OAA6B;AACtD,UAAM,QAAQ,CAAC,KAAC,uCAAiB,EAAE;AACnC,UAAM,gBAAYA,UAAA,iBAAgB,EAAE;AAEpC,QAAI;AACJ,QAAI;AAEJ,QAAI,OAAO;AACT,cAAQ;AACR,oBAAc,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI;AAAA,IACzE,OAAO;AACL,cAAQ,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI;AACjE,oBAAc,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI;AAAA,IACzE;AAEA,UAAM,SAAS,QAAQ,CAAC,GAAG,WAAW,EAAE,IAAI;AAC5C,UAAM,aAAa,OAAO,SAAS,IAAI,OAAO,CAAC,IAAI;AAGnD,UAAM,cAAmC,CAAC;AAC1C,QAAI,OAAY;AAChB,WAAO,QAAQ,SAAS,SAAS,iBAAiB;AAChD,UAAI,KAAK,oBAAoB;AAC3B,eAAO,OAAO,aAAa,KAAK,kBAAkB;AAAA,MACpD;AACA,aAAO,KAAK,iBAAkB,KAAK,YAAY,EAAU;AAAA,IAC3D;AAEA,UAAM,YAAY,OAAO,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,aAAa,EAAE,aAAa,IAAI,GAAG,WAAW,UAAU,CAAC;AAC1H,UAAM,WAAW,UAAU,SAAS,IAAK,UAAU,UAAU,SAAS,CAAC,MAAM,KAAM,UAAU,SAAS,IAAI,UAAU,UAAU,SAAS,CAAC,IAAI,OAAQ,UAAU,UAAU,SAAS,CAAC,IAAK;AACvL,UAAM,gBAAgB,UAAU,SAAS,IAAI,UAAU,CAAC,IAAI;AAE5D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,EACF;AAAA,GAlIe;",
+  "names": ["SwcUtils"]
 }

package/dist/esm/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  delegate?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  selector: string;\n  type: string;\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\n/**\n * @addEventListener decorator to bind events to elements.\n * Usage: @addEventListener('.btn', 'click') onClick() { ... }\n * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }\n */\nexport function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ selector, type, options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAoBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAOxF,SAAS,iBAAiB,UAAkB,MAAc,UAAmC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,aAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,UAAU,MAAM,SAAS,YAAY,CAAC;AAAA,EACzD;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  delegate?: boolean;\n  removeOnDisconnected?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  selector: string;\n  type: string;\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\n/**\n * @addEventListener decorator to bind events to elements.\n * Usage: @addEventListener('.btn', 'click') onClick() { ... }\n * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }\n */\nexport function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ selector, type, options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAqBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAOxF,SAAS,iBAAiB,UAAkB,MAAc,UAAmC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,aAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,UAAU,MAAM,SAAS,YAAY,CAAC;AAAA,EACzD;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/esm/decorators/appendChild.js

@@ -0,0 +1,29 @@
+import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
+const APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+function appendChild(selector, options = { position: "lastChild" }) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, { propertyKey, selector, options });
+  };
+}
+const findAllAppendChildMetadata = (target) => {
+  const result = /* @__PURE__ */ new Map();
+  const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+  maps.forEach((map) => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+export {
+  APPEND_CHILD_METADATA_KEY,
+  appendChild,
+  findAllAppendChildMetadata
+};
+//# sourceMappingURL=appendChild.js.map

package/dist/esm/decorators/appendChild.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/appendChild.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport type AppendChildPosition = 'firstChild' | 'lastChild' | 'nextSibling' | 'previousSibling';\n\nexport interface AppendChildOptions {\n  position?: AppendChildPosition;\n}\n\nexport interface AppendChildMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  options: AppendChildOptions;\n}\n\nexport const APPEND_CHILD_METADATA_KEY = Symbol('simple-web-component:append-child');\n\n/**\n * @appendChild decorator to surgically add nodes to a target element.\n * Usage: @appendChild('#list') addItem() { return '<li>New Item</li>'; }\n */\nexport function appendChild(selector: string, options: AppendChildOptions = { position: 'lastChild' }): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor) as Map<string | symbol, AppendChildMetadata>;\n    if (!meta) {\n      meta = new Map<string | symbol, AppendChildMetadata>();\n      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);\n    }\n    meta.set(propertyKey, { propertyKey, selector, options });\n  };\n}\n\nexport const findAllAppendChildMetadata = (target: any): Map<string | symbol, AppendChildMetadata> => {\n  const result = new Map<string | symbol, AppendChildMetadata>();\n  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, AppendChildMetadata>>(APPEND_CHILD_METADATA_KEY, target);\n  maps.forEach(map => {\n    if (map instanceof Map) {\n      map.forEach((v, k) => result.set(k, v));\n    }\n  });\n  return result;\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AActB,MAAM,4BAA4B,OAAO,mCAAmC;AAM5E,SAAS,YAAY,UAAkB,UAA8B,EAAE,UAAU,YAAY,GAAoB;AACtH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,aAAa,eAAe,2BAA2B,WAAW;AAC7E,QAAI,CAAC,MAAM;AACT,aAAO,oBAAI,IAA0C;AACrD,mBAAa,eAAe,2BAA2B,MAAM,WAAW;AAAA,IAC1E;AACA,SAAK,IAAI,aAAa,EAAE,aAAa,UAAU,QAAQ,CAAC;AAAA,EAC1D;AACF;AAEO,MAAM,6BAA6B,CAAC,WAA2D;AACpG,QAAM,SAAS,oBAAI,IAA0C;AAC7D,QAAM,OAAO,aAAa,gBAA2D,2BAA2B,MAAM;AACtH,OAAK,QAAQ,SAAO;AAClB,QAAI,eAAe,KAAK;AACtB,UAAI,QAAQ,CAAC,GAAG,MAAM,OAAO,IAAI,GAAG,CAAC,CAAC;AAAA,IACxC;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/decorators/elementDefine.js

@@ -1,15 +1,19 @@
 import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
-import { getInnerHtmlMetadataList } from "./innerHtml.js";
+import { FunctionUtils } from "@dooboostore/core/function/FunctionUtils";
+import { getOnConnectedInnerHtmlMetadata } from "./onConnectedInnerHtml.js";
 import { getAddEventListenerMetadata } from "./addEventListener.js";
 import { ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata } from "./lifecycles.js";
 import { getEmitCustomEventMetadataList } from "./emitCustomEvent.js";
 import { findAllAttributeChangedMetadata } from "./changedAttribute.js";
 import { findAllSetAttributeMetadata } from "./setAttribute.js";
+import { findAllReplaceChildrenMetadata } from "./replaceChildren.js";
+import { findAllAppendChildMetadata } from "./appendChild.js";
 import { SwcUtils } from "../utils/Utils.js";
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from "../config/config.js";
 import { SituationTypeContainer, SituationTypeContainers } from "@dooboostore/simple-boot/decorators/inject/Inject";
 import { InjectSituationType } from "../types.js";
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+const globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
 function buildEnv(configWindow) {
   const win = configWindow || (typeof window !== "undefined" ? window : void 0);
   const doc = win?.document;
@@ -18,13 +22,7 @@ function buildEnv(configWindow) {
     if (win?.[cls])
       builtInTagMap.set(win[cls], tag);
   }
-  const domHelpers = {
-    $d: doc,
-    $w: win,
-    $q: (sel, root) => (root ?? doc).querySelector(sel),
-    $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
-    $qi: (id, root) => (root ?? doc).getElementById(id)
-  };
+  const domHelpers = SwcUtils.getHelperSet(win);
   return { win, doc, builtInTagMap, domHelpers };
 }
 const getHandlers = (inst) => {
@@ -36,8 +34,6 @@ const elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
   config.window = win;
-  const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS);
-  const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map((k) => SWC_DOM_HELPERS[k]);
   let extendsTagName = config.extends;
   if (!extendsTagName) {
     let proto = constructor;
@@ -53,19 +49,19 @@ const elementDefine = (inConfig) => (constructor) => {
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const setAttrMap = findAllSetAttributeMetadata(constructor);
+  const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
+  const appendChildMap = findAllAppendChildMetadata(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([...config.observedAttributes ?? [], ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
-  const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
+  const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
   const NewClass = class extends constructor {
     _executeSwcScript(attrName, hostSet, extraArgs = {}) {
       const script = this.getAttribute(attrName);
       if (script) {
         try {
           const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
-          const argNames = Object.keys(args);
-          const argValues = Object.values(args);
-          new Function(...argNames, script).apply(this, argValues);
+          FunctionUtils.execute({ script, context: this, args });
         } catch (e) {
           console.error(`[SWC] Failed to execute ${attrName}:`, e);
         }
@@ -107,9 +103,13 @@ const elementDefine = (inConfig) => (constructor) => {
         el.removeEventListener(eventName, oldHandler);
       const handler = (event) => {
         const hostSet = SwcUtils.getHostSet(el);
-        const argNames = Object.keys(hostSet);
-        const argValues = Object.values(hostSet);
-        new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, event.detail, ...argValues, ...SWC_DOM_HELPER_VALS());
+        const args = {
+          event,
+          $data: event.detail,
+          ...hostSet,
+          ...SWC_DOM_HELPERS
+        };
+        FunctionUtils.execute({ script, context: el, args });
       };
       el.addEventListener(eventName, handler);
       handlers.set(attrName, handler);
@@ -118,9 +118,10 @@ const elementDefine = (inConfig) => (constructor) => {
       super(...args);
       this._swcId = Math.random().toString(36).substring(2, 11);
       this._emitHandlers = /* @__PURE__ */ new Map();
+      this._boundListeners = [];
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-constructor", hostSet);
-      if (innerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
+      if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
@@ -128,6 +129,9 @@ const elementDefine = (inConfig) => (constructor) => {
       return mergedObservedAttributes;
     }
     async connectedCallback() {
+      const conf = getElementConfig(this);
+      const currentWin = conf?.window || window;
+      const currentDoc = currentWin.document;
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-before-connected", hostSet);
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
@@ -137,9 +141,9 @@ const elementDefine = (inConfig) => (constructor) => {
       }
       if (typeof this.initCore === "function")
         this.initCore();
-      if (innerHtmlList.length > 0) {
+      if (connectedInnerHtmlList.length > 0) {
         let sContent = "", lContent = "";
-        for (const meta of innerHtmlList) {
+        for (const meta of connectedInnerHtmlList) {
           const res = await this[meta.propertyKey]();
           if (res !== void 0) {
             if (meta.options.useShadow)
@@ -153,17 +157,88 @@ const elementDefine = (inConfig) => (constructor) => {
         if (lContent)
           this.innerHTML = lContent;
       }
+      const createDelegationHandler = (delegateHost) => (event) => {
+        if (event.__swc_handled)
+          return;
+        const path = event.composedPath();
+        const type = event.type;
+        const attrName = `swc-on-${type}`;
+        for (const node of path) {
+          if (node === delegateHost)
+            break;
+          if (!(node instanceof HTMLElement))
+            continue;
+          const script = node.getAttribute?.(attrName);
+          if (script && !getElementConfig(node)) {
+            const host = SwcUtils.findNearestSwcHost(node);
+            if (host) {
+              const childHostSet = SwcUtils.getHostSet(node);
+              const args = {
+                event,
+                $data: event.detail,
+                ...childHostSet,
+                ...SWC_DOM_HELPERS
+              };
+              FunctionUtils.execute({ script, context: node, args });
+              event.__swc_handled = true;
+              break;
+            }
+          }
+        }
+      };
+      DOM_EVENT_NAMES.forEach((type) => {
+        const handler = createDelegationHandler(this);
+        this.addEventListener(type, handler);
+        this._boundListeners.push({ target: this, type, handler });
+      });
+      const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
+      if (!hasParentHost) {
+        const root = this.getRootNode();
+        if (!globalDelegatedRoots.has(root)) {
+          DOM_EVENT_NAMES.forEach((type) => {
+            const handler = createDelegationHandler(root);
+            root.addEventListener(type, handler);
+          });
+          globalDelegatedRoots.add(root);
+        }
+      }
       addEventListenerList.forEach((meta) => {
         const { selector, type, options } = meta;
-        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
-        if (delegate && selector && selector !== ":host") {
+        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate, removeOnDisconnected } = options;
+        const opts = { capture, once, passive };
+        const bindTargets = [];
+        if (selector === ":window") {
+          bindTargets.push(currentWin);
+        } else if (selector === ":document") {
+          bindTargets.push(currentDoc);
+        } else if (selector === ":parentHost") {
+          if (hostSet.$parentHost)
+            bindTargets.push(hostSet.$parentHost);
+        } else if (selector === ":appHost") {
+          if (hostSet.$appHost)
+            bindTargets.push(hostSet.$appHost);
+        } else if (selector === ":firstHost") {
+          if (hostSet.$firstHost)
+            bindTargets.push(hostSet.$firstHost);
+        } else if (selector === ":lastHost") {
+          if (hostSet.$lastHost)
+            bindTargets.push(hostSet.$lastHost);
+        } else if (selector === ":firstAppHost") {
+          if (hostSet.$firstAppHost)
+            bindTargets.push(hostSet.$firstAppHost);
+        } else if (selector === ":lastAppHost") {
+          if (hostSet.$lastAppHost)
+            bindTargets.push(hostSet.$lastAppHost);
+        } else if (!selector || selector === ":host") {
+          bindTargets.push(this);
+        } else if (delegate) {
           const bindRoots = [];
           const r = root || "auto";
-          if (r === "auto") {
+          if (r === "auto")
             bindRoots.push(this.shadowRoot || this);
-          } else if (r === "light") {
+          else if (r === "light")
             bindRoots.push(this);
-          } else if (r === "shadow") {
+          else if (r === "shadow") {
             if (this.shadowRoot)
               bindRoots.push(this.shadowRoot);
           } else if (r === "all") {
@@ -171,62 +246,61 @@ const elementDefine = (inConfig) => (constructor) => {
             if (this.shadowRoot)
               bindRoots.push(this.shadowRoot);
           }
-          bindRoots.forEach((bindRoot) => {
+          bindRoots.forEach((br) => {
             const handler = (event) => {
-              const target = event.target;
-              const matchedEl = target.closest(selector);
-              if (matchedEl && bindRoot.contains(matchedEl)) {
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
                 if (stopPropagation)
                   event.stopPropagation();
                 if (stopImmediatePropagation)
                   event.stopImmediatePropagation();
                 if (preventDefault)
                   event.preventDefault();
-                const hostSet2 = SwcUtils.getHostSet(this);
-                this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2, matchedEl]);
+                const currentHostSet = SwcUtils.getHostSet(this);
+                this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
               }
             };
-            bindRoot.addEventListener(type, handler, { capture, once, passive });
+            br.addEventListener(type, handler, opts);
+            const self = this;
+            if (removeOnDisconnected === true || br !== self && br !== self.shadowRoot) {
+              this._boundListeners.push({ target: br, type, handler, options: opts });
+            }
           });
         } else {
-          const targetEls = [];
-          if (!selector || selector === ":host") {
-            targetEls.push(this);
-          } else {
-            const searchRoots = [];
-            const r = root || "auto";
-            if (r === "auto") {
-              searchRoots.push(this.shadowRoot || this);
-            } else if (r === "light") {
-              searchRoots.push(this);
-            } else if (r === "shadow") {
-              if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
-            } else if (r === "all") {
-              searchRoots.push(this);
-              if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
-            }
-            searchRoots.forEach((sr) => {
-              const found = sr.querySelectorAll(selector);
-              found.forEach((el) => targetEls.push(el));
-            });
+          const searchRoots = [];
+          const r = root || "auto";
+          if (r === "auto")
+            searchRoots.push(this.shadowRoot || this);
+          else if (r === "light")
+            searchRoots.push(this);
+          else if (r === "shadow") {
+            if (this.shadowRoot)
+              searchRoots.push(this.shadowRoot);
+          } else if (r === "all") {
+            searchRoots.push(this);
+            if (this.shadowRoot)
+              searchRoots.push(this.shadowRoot);
           }
-          targetEls.forEach((el) => {
-            const handler = (event) => {
-              if (stopPropagation)
-                event.stopPropagation();
-              if (stopImmediatePropagation)
-                event.stopImmediatePropagation();
-              if (preventDefault)
-                event.preventDefault();
-              const hostSet2 = SwcUtils.getHostSet(this);
-              this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
-            };
-            const opts = { capture, once, passive };
-            el.addEventListener(type, handler, opts);
+          searchRoots.forEach((sr) => {
+            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
           });
         }
+        bindTargets.forEach((target) => {
+          const handler = (event) => {
+            if (stopPropagation)
+              event.stopPropagation();
+            if (stopImmediatePropagation)
+              event.stopImmediatePropagation();
+            if (preventDefault)
+              event.preventDefault();
+            const currentHostSet = SwcUtils.getHostSet(this);
+            this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet]);
+          };
+          target.addEventListener(type, handler, opts);
+          if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
+            this._boundListeners.push({ target, type, handler, options: opts });
+          }
+        });
       });
       if (super.connectedCallback)
         await super.connectedCallback();
@@ -244,6 +318,8 @@ const elementDefine = (inConfig) => (constructor) => {
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
       if (bMethods)
         bMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+      this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
+      this._boundListeners = [];
       if (super.disconnectedCallback)
         super.disconnectedCallback();
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -315,6 +391,79 @@ const elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  replaceChildrenMap.forEach((selector, methodName) => {
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            targetEl.replaceChildren(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
+  appendChildMap.forEach((meta, methodName) => {
+    const { selector, options } = meta;
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            const pos = options.position || "lastChild";
+            if (pos === "lastChild")
+              targetEl.append(...normalizedNodes);
+            else if (pos === "firstChild")
+              targetEl.prepend(...normalizedNodes);
+            else if (pos === "nextSibling")
+              targetEl.after(...normalizedNodes);
+            else if (pos === "previousSibling")
+              targetEl.before(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {