@dooboostore/simple-web-component 1.0.18 → 1.0.21

package/dist/esm/decorators/elementDefine.js

@@ -1,492 +1,401 @@
-import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
-import { FunctionUtils } from "@dooboostore/core/function/FunctionUtils";
+import { ReflectUtils } from "@dooboostore/core";
+import { FunctionUtils } from "@dooboostore/core";
 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 { findAllAttributeMetadata } from "./attribute.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 getElementConfig = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
+};
+const ensureInit = (inst) => {
+  if (!inst.__swc_initialized) {
+    inst._swcId = Math.random().toString(36).substring(2, 11);
+    inst._emitHandlers = /* @__PURE__ */ new Map();
+    inst._boundListeners = [];
+    inst.__swc_initialized = true;
+    const hostSet = SwcUtils.getHostSet(inst);
+    inst._executeSwcScript?.("swc-on-constructor", hostSet);
+  }
+};
 const globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
+const handleGlobalSwcEvent = async (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 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);
+        event.__swc_handled = true;
+        break;
+      }
+    }
+  }
+};
 function buildEnv(configWindow) {
   const win = configWindow || (typeof window !== "undefined" ? window : void 0);
   const doc = win?.document;
   const builtInTagMap = /* @__PURE__ */ new Map();
   for (const [cls, tag] of HTML_TAG_ENTRIES) {
-    if (win?.[cls])
-      builtInTagMap.set(win[cls], tag);
+    if (win?.[cls]) builtInTagMap.set(win[cls], tag);
   }
   const domHelpers = SwcUtils.getHelperSet(win);
   return { win, doc, builtInTagMap, domHelpers };
 }
 const getHandlers = (inst) => {
-  if (!inst.__swc_attributeEventHandlers)
-    inst.__swc_attributeEventHandlers = /* @__PURE__ */ new Map();
+  if (!inst.__swc_attributeEventHandlers) inst.__swc_attributeEventHandlers = /* @__PURE__ */ new Map();
   return inst.__swc_attributeEventHandlers;
 };
-const elementDefine = (inConfig) => (constructor) => {
-  const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
+const setupPrototype = (proto) => {
+  if (proto.__swc_proto_setup) return;
+  proto.__swc_proto_setup = true;
+  proto._executeSwcScript = function(attrName, hostSet, extraArgs = {}) {
+    ensureInit(this);
+    const script = this.getAttribute(attrName);
+    if (script) {
+      try {
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow(conf);
+        const helpers = SwcUtils.getHelperSet(currentWin);
+        const args = { ...hostSet, ...helpers, ...extraArgs, $el: this, $root: this.getRootNode() };
+        FunctionUtils.execute({ script, context: this, args });
+      } catch (e) {
+        console.error(`[SWC] Failed to execute ${attrName}:`, e);
+      }
+    }
+  };
+  proto._resolveWindow = function(localConfig) {
+    ensureInit(this);
+    if (localConfig?.window) return localConfig.window;
+    const ancestors = SwcUtils.findAllSwcHosts(this);
+    for (let i = ancestors.length - 1; i >= 0; i--) {
+      const aConf = getElementConfig(ancestors[i]);
+      if (aConf?.window) return aConf.window;
+    }
+    return typeof window !== "undefined" ? window : void 0;
+  };
+  proto._invokeLifecycleMethod = function(methodName, hostSet, extraArgs = []) {
+    ensureInit(this);
+    if (typeof this[methodName] !== "function") return;
+    const app = hostSet.$appHost?.simpleApplication;
+    if (app) {
+      const otherStorage = /* @__PURE__ */ new Map();
+      const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: hostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: hostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: hostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: hostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+      otherStorage.set(SituationTypeContainers, situations);
+      return app.simstanceManager.executeBindParameterSimPromise(
+        {
+          target: this,
+          targetKey: methodName,
+          inputParameters: extraArgs
+        },
+        otherStorage
+      );
+    } else {
+      return this[methodName](...extraArgs);
+    }
+  };
+  proto._bindAttributeEvent = function(el, attrName, script, eventName) {
+    ensureInit(this);
+    if (!eventName) {
+      if (!attrName.startsWith("swc-on-")) return;
+      eventName = attrName.substring(7);
+    }
+    const elHandlers = getHandlers(this);
+    let handlers = elHandlers.get(el);
+    if (!handlers) {
+      handlers = /* @__PURE__ */ new Map();
+      elHandlers.set(el, handlers);
+    }
+    const oldHandler = handlers.get(attrName);
+    if (oldHandler) el.removeEventListener(eventName, oldHandler);
+    const handler = async (event) => {
+      const hostSet = SwcUtils.getHostSet(el);
+      const conf = getElementConfig(this);
+      const currentWin = this._resolveWindow(conf);
+      const helpers = SwcUtils.getHelperSet(currentWin);
+      const args = {
+        event,
+        $data: event.detail,
+        ...hostSet,
+        ...helpers,
+        $el: el,
+        $root: this.getRootNode()
+      };
+      await FunctionUtils.execute({ script, context: el, args });
+    };
+    el.addEventListener(eventName, handler);
+    handlers.set(attrName, handler);
+  };
+  proto.__swc_executeAttributeEvent = async function(el, attrName, script, event) {
+    ensureInit(this);
+    const hostSet = SwcUtils.getHostSet(el);
+    const conf = getElementConfig(this);
+    const currentWin = this._resolveWindow(conf);
+    const currentHelpers = SwcUtils.getHelperSet(currentWin);
+    const args = {
+      event,
+      $data: event.detail,
+      ...hostSet,
+      ...currentHelpers,
+      $el: el,
+      $root: this.getRootNode()
+    };
+    await FunctionUtils.execute({ script, context: el, args });
+  };
+};
+const elementDefine = (name, config = {}) => (constructor) => {
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
-  config.window = win;
-  let extendsTagName = config.extends;
+  const metadata = { ...config, name, window: win };
+  if (!metadata.window) {
+    throw new Error("window is required");
+  }
+  let extendsTagName = metadata.extends;
   if (!extendsTagName) {
-    let proto = constructor;
-    while (proto && proto !== HTMLElement && proto !== Function.prototype) {
-      extendsTagName = BUILT_IN_TAG_MAP.get(proto);
-      if (extendsTagName)
-        break;
-      proto = Object.getPrototypeOf(proto);
+    let proto2 = constructor;
+    const BaseHTMLElement = win.HTMLElement;
+    while (proto2 && proto2 !== BaseHTMLElement && proto2 !== Function.prototype) {
+      extendsTagName = BUILT_IN_TAG_MAP.get(proto2);
+      if (extendsTagName) break;
+      proto2 = Object.getPrototypeOf(proto2);
     }
-    config.extends = extendsTagName;
+    metadata.extends = extendsTagName;
   }
   const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
-  const setAttrMap = findAllSetAttributeMetadata(constructor);
-  const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
-  const appendChildMap = findAllAppendChildMetadata(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([...config.observedAttributes ?? [], ...attrChangeMap.keys(), ...setAttrMap.keys(), ...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)), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
   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 };
-          FunctionUtils.execute({ script, context: this, args });
-        } catch (e) {
-          console.error(`[SWC] Failed to execute ${attrName}:`, e);
-        }
-      }
-    }
-    async _invokeLifecycleMethod(methodName, hostSet, extraArgs = []) {
-      if (typeof this[methodName] !== "function")
-        return;
-      const app = hostSet.$appHost?.simpleApplication;
-      if (app) {
-        const otherStorage = /* @__PURE__ */ new Map();
-        const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: hostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: hostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: hostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: hostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
-        otherStorage.set(SituationTypeContainers, situations);
-        return app.simstanceManager.executeBindParameterSimPromise({
-          target: this,
-          targetKey: methodName,
-          inputParameters: extraArgs
-        }, otherStorage);
-      } else {
-        return this[methodName](...extraArgs);
-      }
-    }
-    _bindAttributeEvent(el, attrName, script, eventName) {
-      if (!eventName) {
-        if (!attrName.startsWith("swc-on-"))
-          return;
-        eventName = attrName.substring(7);
-      }
-      if (swcLifecycleAttributes.includes(attrName))
-        return;
-      const elHandlers = getHandlers(this);
-      let handlers = elHandlers.get(el);
-      if (!handlers) {
-        handlers = /* @__PURE__ */ new Map();
-        elHandlers.set(el, handlers);
-      }
-      const oldHandler = handlers.get(attrName);
-      if (oldHandler)
-        el.removeEventListener(eventName, oldHandler);
-      const handler = (event) => {
-        const hostSet = SwcUtils.getHostSet(el);
-        const args = {
-          event,
-          $data: event.detail,
-          ...hostSet,
-          ...SWC_DOM_HELPERS
-        };
-        FunctionUtils.execute({ script, context: el, args });
-      };
-      el.addEventListener(eventName, handler);
-      handlers.set(attrName, handler);
-    }
-    constructor(...args) {
-      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 (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
-        this.attachShadow({ mode: "open" });
-      }
+  const proto = constructor.prototype;
+  setupPrototype(proto);
+  const originalConnected = proto.connectedCallback;
+  proto.connectedCallback = function() {
+    ensureInit(this);
+    if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
     }
-    static get observedAttributes() {
-      return mergedObservedAttributes;
+    const conf = getElementConfig(this);
+    const currentWin = this._resolveWindow(conf);
+    const hostSet = SwcUtils.getHostSet(this);
+    this._executeSwcScript("swc-on-before-connected", hostSet);
+    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+    if (bMethods) {
+      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
     }
-    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);
-      if (bMethods) {
-        for (const m of bMethods)
-          await this._invokeLifecycleMethod(m, hostSet);
-      }
-      if (typeof this.initCore === "function")
-        this.initCore();
-      if (connectedInnerHtmlList.length > 0) {
-        let sContent = "", lContent = "";
-        for (const meta of connectedInnerHtmlList) {
-          const res = await this[meta.propertyKey]();
-          if (res !== void 0) {
-            if (meta.options.useShadow)
-              sContent += res;
-            else
-              lContent += res;
+    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 {
+            this[meta.propertyKey] = memoryVal;
+          } finally {
+            this.__swc_syncing_init = false;
           }
         }
-        if (this.shadowRoot)
-          this.shadowRoot.innerHTML = sContent;
-        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;
-            }
+      } 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;
           }
         }
-      };
-      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);
+      }
+    });
+    if (connectedInnerHtmlList.length > 0) {
+      let sContent = "", lContent = "";
+      for (const meta of connectedInnerHtmlList) {
+        const res = this[meta.propertyKey]();
+        if (res !== void 0) {
+          if (meta.options.useShadow) sContent += res;
+          else lContent += res;
         }
       }
-      addEventListenerList.forEach((meta) => {
-        const { selector, type, options } = meta;
-        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")
-            bindRoots.push(this.shadowRoot || this);
-          else if (r === "light")
-            bindRoots.push(this);
-          else if (r === "shadow") {
-            if (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 = (event) => {
-              const matchedEl = event.target.closest(selector);
-              if (matchedEl && br.contains(matchedEl)) {
-                if (stopPropagation)
-                  event.stopPropagation();
-                if (stopImmediatePropagation)
-                  event.stopImmediatePropagation();
-                if (preventDefault)
-                  event.preventDefault();
-                const currentHostSet = SwcUtils.getHostSet(this);
-                this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
-              }
-            };
-            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 });
-            }
-          });
+      if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+      if (lContent) this.innerHTML = lContent;
+    }
+    const root = this.getRootNode();
+    if (!globalDelegatedRoots.has(root)) {
+      DOM_EVENT_NAMES.forEach((type) => {
+        root.addEventListener(type, handleGlobalSwcEvent);
+      });
+      globalDelegatedRoots.add(root);
+    }
+    addEventListenerList.forEach((meta) => {
+      const { selector, type, options } = meta;
+      const opts = { capture: options.capture, once: options.once, passive: options.passive };
+      const bindTargets = [];
+      const r = options.root || "auto";
+      const applyRootOption = (target) => {
+        if (!target) return;
+        if (r === "auto") {
+          bindTargets.push(target.shadowRoot || target);
         } 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) => {
-            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
-          });
+          if (r === "light" || r === "all") bindTargets.push(target);
+          if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
         }
-        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]);
+      };
+      if (selector === ":window") bindTargets.push(currentWin);
+      else if (selector === ":document") bindTargets.push(currentWin.document);
+      else if (selector === ":parentHost") applyRootOption(hostSet.$parentHost);
+      else if (selector === ":appHost") applyRootOption(hostSet.$appHost);
+      else if (selector === ":firstHost") applyRootOption(hostSet.$firstHost);
+      else if (selector === ":lastHost") applyRootOption(hostSet.$lastHost);
+      else if (selector === ":firstAppHost") applyRootOption(hostSet.$firstAppHost);
+      else if (selector === ":lastAppHost") applyRootOption(hostSet.$lastAppHost);
+      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]);
+            }
           };
-          target.addEventListener(type, handler, opts);
-          if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
-            this._boundListeners.push({ target, type, handler, options: opts });
+          br.addEventListener(type, handler, opts);
+          if (options.removeOnDisconnected === true || br !== this && br !== this.shadowRoot) {
+            this._boundListeners.push({ target: br, type, handler, options: opts });
           }
         });
-      });
-      if (super.connectedCallback)
-        await super.connectedCallback();
-      const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-      if (aMethods) {
-        for (const m of aMethods)
-          await this._invokeLifecycleMethod(m, hostSet);
+      } else {
+        const searchRoots = [];
+        if (r === "auto") searchRoots.push(this.shadowRoot || this);
+        else if (r === "light") searchRoots.push(this);
+        else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
+        else if (r === "all") {
+          searchRoots.push(this);
+          if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+        }
+        searchRoots.forEach((sr) => {
+          sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
+        });
       }
-      this._executeSwcScript("swc-on-connected", hostSet);
-      this._executeSwcScript("swc-on-after-connected", hostSet);
+      bindTargets.forEach((t) => {
+        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: t, $root: t };
+          await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+        };
+        t.addEventListener(type, handler, opts);
+        if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
+          this._boundListeners.push({ target: t, type, handler, options: opts });
+        }
+      });
+    });
+    if (originalConnected) originalConnected.apply(this);
+    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+    if (aMethods) {
+      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
     }
-    disconnectedCallback() {
-      const hostSet = SwcUtils.getHostSet(this);
-      this._executeSwcScript("swc-on-before-disconnected", hostSet);
-      const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-      if (bMethods)
-        bMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+    this._executeSwcScript("swc-on-connected", hostSet);
+    this._executeSwcScript("swc-on-after-connected", hostSet);
+    this.__swc_connected = true;
+  };
+  const originalDisconnected = proto.disconnectedCallback;
+  proto.disconnectedCallback = function() {
+    const hostSet = SwcUtils.getHostSet(this);
+    this._executeSwcScript("swc-on-before-disconnected", hostSet);
+    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+    if (bMethods) {
+      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
+    }
+    if (this._boundListeners) {
       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);
-      if (aMethods)
-        aMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
-      this._executeSwcScript("swc-on-disconnected", hostSet);
-      this._executeSwcScript("swc-on-after-disconnected", hostSet);
-    }
-    adoptedCallback() {
-      const hostSet = SwcUtils.getHostSet(this);
-      this._executeSwcScript("swc-on-before-adopted", hostSet);
-      const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-      if (bMethods)
-        bMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
-      if (super.adoptedCallback)
-        super.adoptedCallback();
-      const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-      if (aMethods)
-        aMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
-      this._executeSwcScript("swc-on-adopted", hostSet);
-      this._executeSwcScript("swc-on-after-adopted", hostSet);
     }
-    attributeChangedCallback(name, old, newVal) {
-      if (super.attributeChangedCallback)
-        super.attributeChangedCallback(name, old, newVal);
-      if (name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name)) {
-        if (newVal !== null) {
-          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
-          const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
-          this._bindAttributeEvent(this, name, newVal, eventName);
-        }
-      }
-      const mKeys = attrChangeMap.get(name);
-      if (mKeys && Array.isArray(mKeys)) {
-        const hSet = SwcUtils.getHostSet(this);
-        mKeys.forEach((key) => this._invokeLifecycleMethod(key, hSet, [newVal, old, name]));
-      }
+    if (originalDisconnected) originalDisconnected.apply(this);
+    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+    if (aMethods) {
+      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
     }
+    this._executeSwcScript("swc-on-disconnected", hostSet);
+    this._executeSwcScript("swc-on-after-disconnected", hostSet);
+    this.__swc_connected = false;
   };
-  setAttrMap.forEach((methodName, attrName) => {
-    const original = NewClass.prototype[methodName];
-    if (typeof original === "function") {
-      NewClass.prototype[methodName] = function(...args) {
-        const res = original.apply(this, args);
-        if (res !== void 0) {
-          if (res === null)
-            this.removeAttribute(attrName);
-          else
-            this.setAttribute(attrName, String(res));
-        }
-        return res;
-      };
+  const originalAdopted = proto.adoptedCallback;
+  proto.adoptedCallback = function() {
+    const hostSet = SwcUtils.getHostSet(this);
+    this._executeSwcScript("swc-on-before-adopted", hostSet);
+    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+    if (bMethods) {
+      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
     }
-  });
-  emitCustomEventList.forEach((meta) => {
-    const { propertyKey, options } = meta;
-    const original = NewClass.prototype[propertyKey];
-    if (typeof original === "function") {
-      NewClass.prototype[propertyKey] = function(...args) {
-        const detail = original.apply(this, args);
-        const event = new CustomEvent(options.type, {
-          detail,
-          bubbles: options.bubbles,
-          composed: options.composed,
-          cancelable: options.cancelable
-        });
-        this.dispatchEvent(event);
-        return detail;
-      };
+    if (originalAdopted) originalAdopted.apply(this);
+    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+    if (aMethods) {
+      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
     }
-  });
-  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;
-      };
+    this._executeSwcScript("swc-on-adopted", hostSet);
+    this._executeSwcScript("swc-on-after-adopted", hostSet);
+  };
+  const originalAttributeChanged = proto.attributeChangedCallback;
+  proto.attributeChangedCallback = function(name2, old, newVal) {
+    if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
+    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);
+        this._bindAttributeEvent(this, name2, newVal, eventName);
+      }
     }
-  });
-  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 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]);
     }
+  };
+  Object.defineProperty(constructor, "observedAttributes", {
+    get: () => mergedObservedAttributes,
+    configurable: true
   });
-  const originalProto = constructor.prototype;
-  const newProto = NewClass.prototype;
-  Object.getOwnPropertyNames(originalProto).forEach((name) => {
-    if (name === "constructor")
-      return;
-    const keys = Reflect.getMetadataKeys(originalProto, name);
-    keys.forEach((key) => Reflect.defineMetadata(key, Reflect.getMetadata(key, originalProto, name), newProto, name));
-  });
-  ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
-  ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, constructor);
-  const registry = config.customElementRegistry || win?.customElements;
-  if (registry && !registry.get(config.name)) {
-    registry.define(config.name, NewClass, config.extends ? { extends: config.extends } : void 0);
+  ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, metadata, constructor);
+  const registry = metadata.customElementRegistry || win?.customElements;
+  if (registry && !registry.get(metadata.name)) {
+    registry.define(metadata.name, constructor, metadata.extends ? { extends: metadata.extends } : void 0);
   }
-  return NewClass;
-};
-const getElementConfig = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
+  return constructor;
 };
 export {
   ELEMENT_CONFIG_KEY,
   elementDefine,
+  ensureInit,
   getElementConfig
 };
 //# sourceMappingURL=elementDefine.js.map