@dooboostore/simple-web-component 1.0.50 → 1.0.51

package/dist/esm/decorators/elementDefine.js

@@ -16,16 +16,18 @@ import { InjectSituationType } from "../types/index.js";
 import { ConvertUtils, ElementApply } from "@dooboostore/core-web";
 import { isSSR } from "../elements/SwcAppMixin.js";
 import { findAllStateMetadata } from "./state.js";
+import { findAllAroundMetadata } from "./around.js";
 import { findAllPropertyMetadata } from "./applyProperty.js";
-import { MessageSubscribeLifeCycler } from "./subscribeSwcAppMessageWhileConnected.js";
-import { RouteSubscribeLifeCycler } from "./subscribeSwcAppRouteChangeWhileConnected.js";
+import { MessageSubscribeLifeCycler } from "./subscribeSwcAppMessage.js";
+import { RouteSubscribeLifeCycler } from "./subscribeSwcAppRouteChange.js";
 import { SetIntervalLifeCycler } from "./setInterval.js";
 import { SetTimeoutLifeCycler } from "./setTimeout.js";
 import { RequestAnimationFrameLifeCycler } from "./requestAnimationFrame.js";
 import { EventMediaLifeCycler } from "./eventMedia.js";
+import { FetchLifeCycler } from "./fetch.js";
 const ELEMENT_CONFIG_KEY = Symbol.for("simple-web-component:element-config");
 const getElementConfig = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
+  const constructor = typeof target === "function" ? target : target.constructor;
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 const ensureInit = (inst) => {
@@ -33,7 +35,7 @@ const ensureInit = (inst) => {
     inst._swcId = inst?.getAttribute?.("swc-use-ssr") ?? "s" + Math.random().toString(36).substring(2, 11).toLowerCase();
     inst._emitHandlers = /* @__PURE__ */ new Map();
     inst.__swc_initialized = true;
-    const target = inst instanceof Function ? inst : inst.constructor;
+    const target = typeof inst === "function" ? inst : inst.constructor;
     const attributeAllList = findAllAttributeMetadata(target).filter((it) => it.type === "property");
     if (attributeAllList) {
       attributeAllList.forEach((meta) => {
@@ -55,15 +57,40 @@ const ensureInit = (inst) => {
     const propertyAllList = findAllPropertyMetadata(target).filter((it) => it.type === "property");
     if (propertyAllList) {
       propertyAllList.forEach((meta) => {
+        let proto = Object.getPrototypeOf(inst);
+        let hasGetter = false;
+        while (proto && proto !== Object.prototype) {
+          const d = Object.getOwnPropertyDescriptor(proto, meta.propertyKey);
+          if (d) {
+            hasGetter = typeof d.get === "function";
+            break;
+          }
+          proto = Object.getPrototypeOf(proto);
+        }
+        if (!hasGetter) return;
         delete inst[meta.propertyKey];
       });
     }
     const stateAllList = findAllStateMetadata(target);
     if (stateAllList) {
       stateAllList.forEach((meta) => {
-        const initUserData = inst[meta.propertyKey];
-        delete inst[meta.propertyKey];
-        inst[meta.propertyKey] = initUserData;
+        const own = Object.getOwnPropertyDescriptor(inst, meta.propertyKey);
+        if (own && "value" in own) {
+          const initUserData = own.value;
+          delete inst[meta.propertyKey];
+          inst[meta.propertyKey] = initUserData;
+        }
+      });
+    }
+    const aroundAllList = findAllAroundMetadata(target);
+    if (aroundAllList) {
+      aroundAllList.forEach((meta) => {
+        const own = Object.getOwnPropertyDescriptor(inst, meta.propertyKey);
+        if (own && "value" in own) {
+          const initUserData = own.value;
+          delete inst[meta.propertyKey];
+          inst[meta.propertyKey] = initUserData;
+        }
       });
     }
     const hostSet = SwcUtils.getHostSet(inst);
@@ -83,7 +110,7 @@ const handleGlobalSwcEvent = async (event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host = SwcUtils.findNearestSwcHostIncludingSelf(node);
+      const host = SwcUtils.findNearestSwcAncestorHost(node);
       if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
         await host.__swc_executeAttributeEvent(node, attrName, script, event);
         event.__swc_handled = true;
@@ -114,8 +141,7 @@ const setupPrototype = (proto, win) => {
     const script = this.getAttribute(attrName);
     if (script) {
       try {
-        const conf = getElementConfig(this);
-        const currentWin = this._resolveWindow(conf);
+        const currentWin = SwcUtils.resolveWindow(this);
         const helpers = SwcUtils.getHelperSet(currentWin);
         const args = { ...hostSet, ...helpers, ...extraArgs, $el: this, $root: this.getRootNode() };
         FunctionUtils.execute({ script, context: this, args });
@@ -124,20 +150,10 @@ const setupPrototype = (proto, win) => {
       }
     }
   };
-  proto._resolveWindow = function(localConfig) {
-    ensureInit(this);
-    if (localConfig?.window) return localConfig.window;
-    const ancestors = SwcUtils.findAllSwcHostsIncludingSelf(this);
-    for (let i = ancestors.length - 1; i >= 0; i--) {
-      const aConf = getElementConfig(ancestors[i]);
-      if (aConf?.window) return aConf.window;
-    }
-    return getElementConfig(this).window ?? (typeof window !== "undefined" ? window : void 0);
-  };
   proto._invokeLifecycleMethod = function(methodName, hostSet, extraArgs = []) {
     ensureInit(this);
     if (typeof this[methodName] !== "function") return;
-    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(win, this);
+    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(this);
     const app = useHostSet?.$appHost?.simpleApplication;
     const helperSetValue = SwcUtils.getHelperSet(win);
     const helperHostSetValue = { ...helperSetValue, ...useHostSet, $this: this };
@@ -155,7 +171,7 @@ const setupPrototype = (proto, win) => {
       const firstCheckMaker = ({ target, targetKey }, token, idx) => {
         const saves = getParameterMetadata(target, targetKey);
         const found = saves.find((s) => s.index === idx);
-        return found ? kindValues[found.kind] : void 0;
+        return found ? kindValues[found.kind] ?? null : void 0;
       };
       return app.simstanceManager.executeBindParameterSim(
         {
@@ -187,8 +203,7 @@ const setupPrototype = (proto, win) => {
     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 currentWin = SwcUtils.resolveWindow(this);
       const helpers = SwcUtils.getHelperSet(currentWin);
       const args = {
         event,
@@ -206,8 +221,7 @@ const setupPrototype = (proto, win) => {
   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 currentWin = SwcUtils.resolveWindow(this);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
     const detail = event.detail;
     const args = {
@@ -223,6 +237,8 @@ const setupPrototype = (proto, win) => {
     await FunctionUtils.execute({ script, context: el, args });
   };
 };
+const SWC_ORIGINAL_CALLBACK = Symbol.for("simple-web-component:original-callback");
+const userCallback = (fn) => typeof fn === "function" && SWC_ORIGINAL_CALLBACK in fn ? fn[SWC_ORIGINAL_CALLBACK] : fn;
 const elementDefine = (name, config = {}) => (constructor) => {
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
   const metadata = { ...config, name, window: win };
@@ -249,30 +265,60 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const originalStaticObservedAttributes = constructor.observedAttributes ?? [];
   const proto = constructor.prototype;
   setupPrototype(proto, win);
-  let helperHostSet = null;
+  const connectedHelperHostSet = (inst) => inst.__swc_helperHostSet ?? SwcUtils.getHelperAndHostSet(inst);
   const eventCycler = new EventListenerLifeCycler();
+  const resizeCycler = new ResizeObserverLifeCycler();
+  const intersectionCycler = new IntersectionObserverLifeCycler();
+  const mutationCycler = new MutationObserverLifeCycler();
   const cyclers = [
     eventCycler,
     new ChangedAttributeLifeCycler(),
     new EmitCustomEventLifeCycler(),
-    new ResizeObserverLifeCycler(),
-    new IntersectionObserverLifeCycler(),
-    new MutationObserverLifeCycler(),
+    resizeCycler,
+    intersectionCycler,
+    mutationCycler,
     new MessageSubscribeLifeCycler(),
     new RouteSubscribeLifeCycler(),
     new SetIntervalLifeCycler(),
     new SetTimeoutLifeCycler(),
     new RequestAnimationFrameLifeCycler(),
-    new EventMediaLifeCycler()
+    new EventMediaLifeCycler(),
+    new FetchLifeCycler()
   ];
   const cyclerObservedAttributes = cyclers.flatMap((c) => c.getObservedAttributeNames?.(constructor) ?? []);
   const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...cyclerObservedAttributes, ...attributeApplyNames, ...hostAttributes, ...swcLifecycleAttributes, ...swcOnEvents])];
-  const buildObservers = async (helperHostSet2) => {
-    const inst = helperHostSet2.$this;
-    const observers = [];
-    let resizeObserverSet = [];
-    let mutationObserverSet = [];
-    let intersectionObserverSet = [];
+  const newObserverState = () => ({
+    observers: [],
+    roCallbacks: /* @__PURE__ */ new Set(),
+    roObserved: /* @__PURE__ */ new WeakSet(),
+    resizeDelegates: [],
+    intersectionDelegates: [],
+    moCallbacks: /* @__PURE__ */ new Set(),
+    moTargets: /* @__PURE__ */ new Map()
+  });
+  const mergeMutationInit = (existing, next) => {
+    if (!existing) return next;
+    const mergedFilter = existing.attributeFilter || next.attributeFilter ? [.../* @__PURE__ */ new Set([...existing.attributeFilter ?? [], ...next.attributeFilter ?? []])] : void 0;
+    return {
+      childList: existing.childList || next.childList,
+      attributes: existing.attributes || next.attributes,
+      characterData: existing.characterData || next.characterData,
+      subtree: existing.subtree || next.subtree,
+      attributeOldValue: existing.attributeOldValue || next.attributeOldValue,
+      characterDataOldValue: existing.characterDataOldValue || next.characterDataOldValue,
+      attributeFilter: mergedFilter
+    };
+  };
+  const forDelegateMatches = (n, selector, fn) => {
+    if (n.nodeType !== 1) return;
+    const el = n;
+    const isThis = selector === "$this" || selector === "";
+    if (isThis || el.matches?.(selector) || el.closest?.(selector)) fn(el);
+    else el.querySelectorAll(selector).forEach(fn);
+  };
+  const buildObservers = async (helperHostSet, scope, st, alive) => {
+    const inst = helperHostSet.$this;
+    const activeCyclers = scope === "self" ? [resizeCycler, mutationCycler] : cyclers;
     const resolveDelegateRoots = (delegateRoot) => {
       const r = delegateRoot || "auto";
       const roots = [];
@@ -285,202 +331,139 @@ const elementDefine = (name, config = {}) => (constructor) => {
       }
       return roots;
     };
-    for (const c of cyclers) {
-      const result = await c.onConnected?.(helperHostSet2, resizeObserverSet);
+    let resizeObserverSet = [];
+    let mutationObserverSet = [];
+    let intersectionObserverSet = [];
+    for (const c of activeCyclers) {
+      const result = await c.onConnected?.(helperHostSet, resizeObserverSet, scope);
+      if (!alive()) return;
       if (!result) continue;
       if (result.resizeObserverSet?.length) resizeObserverSet = [...resizeObserverSet, ...result.resizeObserverSet];
       if (result.mutationObserverSet?.length) mutationObserverSet = [...mutationObserverSet, ...result.mutationObserverSet];
       if (result.intersectionObserverSet?.length) intersectionObserverSet = [...intersectionObserverSet, ...result.intersectionObserverSet];
     }
-    const resizeDelegates = (resizeObserverSet ?? []).filter((t) => t.delegate && typeof t.target === "string");
-    let resizeObserve;
-    let resizeUnobserve;
-    const resizeObserved = /* @__PURE__ */ new WeakSet();
-    if (resizeObserverSet?.length) {
-      const roCallbacks = [...new Set(resizeObserverSet.map((e) => e.callback))];
-      const ro = new win.ResizeObserver((entries, obs) => {
-        for (const cb of roCallbacks) cb(entries, obs);
-      });
+    const resizeObserve = (el, opts) => {
+      if (!st.ro || st.roObserved.has(el)) return;
+      st.ro.observe(el, opts);
+      st.roObserved.add(el);
+    };
+    const resizeUnobserve = (el) => {
+      if (!st.ro || !st.roObserved.has(el)) return;
+      st.ro.unobserve(el);
+      st.roObserved.delete(el);
+    };
+    const newResizeDelegates = [];
+    if (resizeObserverSet.length) {
+      if (!st.ro) {
+        st.ro = new win.ResizeObserver((entries, obs) => {
+          for (const cb of st.roCallbacks) cb(entries, obs);
+        });
+        st.observers.push(st.ro);
+      }
       for (const e of resizeObserverSet) {
-        if (e.delegate) continue;
+        st.roCallbacks.add(e.callback);
+        if (e.delegate) {
+          if (typeof e.target === "string") newResizeDelegates.push(e);
+          continue;
+        }
         if (typeof e.target === "string") {
-          const scope = resolveDelegateRoots(e.delegateRoot);
-          for (const sr of scope) {
-            sr.querySelectorAll(e.target).forEach((el) => {
-              if (!resizeObserved.has(el)) {
-                ro.observe(el, e.options);
-                resizeObserved.add(el);
-              }
-            });
-          }
+          for (const r of resolveDelegateRoots(e.delegateRoot)) r.querySelectorAll(e.target).forEach((el) => resizeObserve(el, e.options));
           continue;
         }
-        ro.observe(e.target, e.options);
-        if (e.target instanceof Element) resizeObserved.add(e.target);
+        st.ro.observe(e.target, e.options);
+        if (e.target instanceof Element) st.roObserved.add(e.target);
       }
-      resizeObserve = (el, opts) => {
-        if (resizeObserved.has(el)) return;
-        ro.observe(el, opts);
-        resizeObserved.add(el);
-      };
-      resizeUnobserve = (el) => {
-        if (!resizeObserved.has(el)) return;
-        ro.unobserve(el);
-        resizeObserved.delete(el);
-      };
-      observers.push(ro);
+      st.resizeDelegates.push(...newResizeDelegates);
     }
-    const intersectionDelegates = [];
+    const newIntersectionDelegates = [];
     for (const group of intersectionObserverSet) {
       const ioCallbacks = [...new Set(group.observeTargets.map((e) => e.callback))];
       const io = new win.IntersectionObserver((entries, obs) => {
         for (const cb of ioCallbacks) cb(entries, obs);
       }, group.options);
       const ioObserved = /* @__PURE__ */ new WeakSet();
+      const observe = (el) => {
+        if (ioObserved.has(el)) return;
+        io.observe(el);
+        ioObserved.add(el);
+      };
+      const unobserve = (el) => {
+        if (!ioObserved.has(el)) return;
+        io.unobserve(el);
+        ioObserved.delete(el);
+      };
       for (const e of group.observeTargets) {
         if (e.delegate) {
-          const target = e.target;
-          const observe = (el) => {
-            if (ioObserved.has(el)) return;
-            io.observe(el);
-            ioObserved.add(el);
-          };
-          const unobserve = (el) => {
-            if (!ioObserved.has(el)) return;
-            io.unobserve(el);
-            ioObserved.delete(el);
-          };
-          intersectionDelegates.push({ target, delegateRoot: e.delegateRoot, observe, unobserve });
+          newIntersectionDelegates.push({ target: e.target, delegateRoot: e.delegateRoot, observe, unobserve });
           continue;
         }
         if (typeof e.target === "string") {
-          const scope = resolveDelegateRoots(e.delegateRoot);
-          for (const sr of scope) {
-            sr.querySelectorAll(e.target).forEach((el) => {
-              if (!ioObserved.has(el)) {
-                io.observe(el);
-                ioObserved.add(el);
-              }
-            });
-          }
+          for (const r of resolveDelegateRoots(e.delegateRoot)) r.querySelectorAll(e.target).forEach(observe);
           continue;
         }
-        io.observe(e.target);
-        if (e.target instanceof Element) ioObserved.add(e.target);
+        observe(e.target);
       }
-      observers.push(io);
+      st.observers.push(io);
     }
-    const handleResizeDelegate = (n, observe) => {
-      if (!resizeObserve || !resizeUnobserve || n.nodeType !== 1) return;
-      const el = n;
-      for (const d of resizeDelegates) {
-        const isThis = d.target === "$this" || d.target === "";
-        const matchesSel = (node) => {
-          if (!node || node.nodeType !== 1) return false;
-          if (isThis) return true;
-          return node.matches?.(d.target) || !!node.closest?.(d.target);
-        };
-        if (matchesSel(el)) {
-          observe ? resizeObserve(el, d.options) : resizeUnobserve(el);
-        } else if (!isThis) {
-          el.querySelectorAll(d.target).forEach((sub) => {
-            observe ? resizeObserve(sub, d.options) : resizeUnobserve(sub);
-          });
-        }
-      }
-    };
-    const handleIntersectionDelegate = (n, observe) => {
-      if (n.nodeType !== 1) return;
-      const el = n;
-      for (const d of intersectionDelegates) {
-        const isThis = d.target === "$this" || d.target === "";
-        const matchesSel = (node) => {
-          if (!node || node.nodeType !== 1) return false;
-          if (isThis) return true;
-          return node.matches?.(d.target) || !!node.closest?.(d.target);
-        };
-        if (matchesSel(el)) {
-          observe ? d.observe(el) : d.unobserve(el);
-        } else if (!isThis) {
-          el.querySelectorAll(d.target).forEach((sub) => {
-            observe ? d.observe(sub) : d.unobserve(sub);
-          });
-        }
+    st.intersectionDelegates.push(...newIntersectionDelegates);
+    if (mutationObserverSet.length || newResizeDelegates.length || newIntersectionDelegates.length) {
+      if (!st.mo) {
+        st.mo = new win.MutationObserver((mutations, obs) => {
+          for (const mut of mutations) {
+            for (const [nodes, on] of [[mut.addedNodes, true], [mut.removedNodes, false]]) {
+              for (const n of Array.from(nodes)) {
+                for (const d of st.resizeDelegates) forDelegateMatches(n, d.target, (el) => on ? resizeObserve(el, d.options) : resizeUnobserve(el));
+                for (const d of st.intersectionDelegates) forDelegateMatches(n, d.target, (el) => on ? d.observe(el) : d.unobserve(el));
+              }
+            }
+          }
+          for (const cb of st.moCallbacks) cb(mutations, obs);
+        });
+        st.observers.push(st.mo);
       }
-    };
-    if (mutationObserverSet?.length || resizeDelegates.length > 0 || intersectionDelegates.length > 0) {
-      const callbacks = [...new Set((mutationObserverSet ?? []).map((e) => e.callback))];
-      const mo = new win.MutationObserver((mutations, obs) => {
-        for (const mut of mutations) {
-          Array.from(mut.addedNodes || []).forEach((n) => {
-            handleResizeDelegate(n, true);
-            handleIntersectionDelegate(n, true);
-          });
-          Array.from(mut.removedNodes || []).forEach((n) => {
-            handleResizeDelegate(n, false);
-            handleIntersectionDelegate(n, false);
-          });
-        }
-        for (const cb of callbacks) cb(mutations, obs);
-      });
-      const moObserveTargets = /* @__PURE__ */ new Map();
-      const mergeMutationInit = (existing, next) => {
-        if (!existing) return next;
-        const mergedFilter = existing.attributeFilter || next.attributeFilter ? [.../* @__PURE__ */ new Set([...existing.attributeFilter ?? [], ...next.attributeFilter ?? []])] : void 0;
-        return {
-          childList: existing.childList || next.childList,
-          attributes: existing.attributes || next.attributes,
-          characterData: existing.characterData || next.characterData,
-          subtree: existing.subtree || next.subtree,
-          attributeOldValue: existing.attributeOldValue || next.attributeOldValue,
-          characterDataOldValue: existing.characterDataOldValue || next.characterDataOldValue,
-          attributeFilter: mergedFilter
-        };
-      };
       const addObserveTarget = (target, options) => {
-        moObserveTargets.set(target, mergeMutationInit(moObserveTargets.get(target), options));
+        st.moTargets.set(target, mergeMutationInit(st.moTargets.get(target), options));
       };
-      for (const e of mutationObserverSet ?? []) {
+      for (const e of mutationObserverSet) {
+        st.moCallbacks.add(e.callback);
         if (e.delegate) continue;
         const init = e.options ?? { childList: true };
         if (typeof e.target === "string") {
-          const scope = resolveDelegateRoots(e.delegateRoot);
-          for (const sr of scope) {
-            sr.querySelectorAll(e.target).forEach((el) => addObserveTarget(el, init));
-          }
+          for (const r of resolveDelegateRoots(e.delegateRoot)) r.querySelectorAll(e.target).forEach((el) => addObserveTarget(el, init));
           continue;
         }
         addObserveTarget(e.target, init);
       }
-      for (const d of resizeDelegates) {
+      for (const d of [...newResizeDelegates, ...newIntersectionDelegates]) {
         for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
       }
-      for (const d of intersectionDelegates) {
-        for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
-      }
-      for (const [target, options] of moObserveTargets) {
-        mo.observe(target, options);
-      }
-      observers.push(mo);
+      for (const [target, options] of st.moTargets) st.mo.observe(target, options);
     }
-    inst.__swc_observers = observers;
+    inst.__swc_observers = st.observers;
   };
-  const originalConnected = proto.connectedCallback;
+  const originalConnected = userCallback(proto.connectedCallback);
   proto.connectedCallback = async function() {
     ensureInit(this);
-    helperHostSet = SwcUtils.getHelperAndHostSet(win, this);
+    const helperHostSet = SwcUtils.getHelperAndHostSet(this);
+    this.__swc_helperHostSet = helperHostSet;
     const appHost = helperHostSet.$appHost;
     const useSsr = isSSR(this);
+    const gen = this.__swc_connectGen = (this.__swc_connectGen ?? 0) + 1;
+    const alive = () => this.__swc_connectGen === gen;
+    const obsState = newObserverState();
     try {
       if (appHost && typeof appHost._connected === "function") {
         await appHost._connected(this);
+        if (!alive()) return;
       } else if (appHost && typeof appHost) {
         appHost._connected_safari_and_standby ?? (appHost._connected_safari_and_standby = []);
         appHost._connected_safari_and_standby.push(this);
       }
       const conf = getElementConfig(this);
-      const currentWin = this._resolveWindow(conf);
-      for (const m of findAllOnConnectedBeforeMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      for (const m of findAllOnConnectedBeforeMetadata(this)) {
+        await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        if (!alive()) return;
+      }
       this._executeSwcScript("swc-on-before-connected", helperHostSet);
       const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
       const shadowMode = conf?.useShadow || targetConnectedList.find((it) => it.options.useShadow)?.options.useShadow;
@@ -488,6 +471,8 @@ const elementDefine = (name, config = {}) => (constructor) => {
         const mode = shadowMode === true ? "open" : shadowMode;
         this.attachShadow({ mode });
       }
+      await buildObservers(helperHostSet, "self", obsState, alive);
+      if (!alive()) return;
       const stateContext = { ...helperHostSet };
       findAllStateMetadata(this).forEach((it) => {
         stateContext[it.name] = this[it.propertyKey];
@@ -495,8 +480,39 @@ const elementDefine = (name, config = {}) => (constructor) => {
       const shadowChildren = [];
       const lightChildren = [];
       if (targetConnectedList.length > 0) {
+        const toNodes = (value) => {
+          if (!value) return [];
+          if (typeof value === "string") {
+            const htmlTemplateElement = doc.createElement("template");
+            htmlTemplateElement.innerHTML = value;
+            return Array.from(htmlTemplateElement.content.childNodes);
+          }
+          if (Array.isArray(value)) return value;
+          return [value];
+        };
+        const shownFallbacks = [];
+        const removeFallbacks = () => shownFallbacks.splice(0).forEach((n) => n.remove());
         for (const meta of targetConnectedList) {
+          const useShadowRoot = meta.options.useShadow || conf?.useShadow;
+          if (meta.options.fallback) {
+            const fb = typeof meta.options.fallback === "function" ? meta.options.fallback(helperHostSet) : meta.options.fallback;
+            const fallbackNodes = toNodes(fb);
+            const parent = useShadowRoot ? this.shadowRoot : this;
+            if (fallbackNodes.length && parent) {
+              try {
+                const processed = SwcUtils.projectProcessHtml(this._swcId, fallbackNodes, doc);
+                parent.append(...processed);
+                shownFallbacks.push(...processed);
+              } catch (e) {
+                console.error("[ElementDefine] fallback setting error:", e);
+              }
+            }
+          }
           let res = await this._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
+          if (!alive()) {
+            removeFallbacks();
+            return;
+          }
           if (typeof res === "string") {
             const htmlTemplateElement = doc.createElement("template");
             htmlTemplateElement.innerHTML = res;
@@ -511,6 +527,7 @@ const elementDefine = (name, config = {}) => (constructor) => {
             }
           }
         }
+        removeFallbacks();
         try {
           if (this.shadowRoot) {
             const applyShadowChildren = SwcUtils.projectProcessHtml(this._swcId, shadowChildren, doc);
@@ -534,22 +551,30 @@ const elementDefine = (name, config = {}) => (constructor) => {
         });
         globalDelegatedRoots.add(root);
       }
-      await buildObservers(SwcUtils.getHelperAndHostSet(win, this));
+      await buildObservers(helperHostSet, "rest", obsState, alive);
+      if (!alive()) return;
       if (originalConnected) await originalConnected.apply(this);
-      for (const m of findAllOnConnectedAfterMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      if (!alive()) return;
+      for (const m of findAllOnConnectedAfterMetadata(this)) {
+        await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        if (!alive()) return;
+      }
       this._executeSwcScript("swc-on-connected", helperHostSet);
       this._executeSwcScript("swc-on-after-connected", helperHostSet);
       this.__swc_connected = true;
     } finally {
-      for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      const aborted = !alive();
+      if (!aborted) for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       if (appHost && typeof appHost._connectedDone === "function") {
-        await appHost._connectedDone(this);
+        await appHost._connectedDone(this, { aborted });
       }
     }
   };
-  const originalDisconnected = proto.disconnectedCallback;
+  const originalDisconnected = userCallback(proto.disconnectedCallback);
   proto.disconnectedCallback = function() {
-    const appHost = helperHostSet?.$appHost;
+    this.__swc_connectGen = (this.__swc_connectGen ?? 0) + 1;
+    const helperHostSet = connectedHelperHostSet(this);
+    const appHost = helperHostSet.$appHost;
     if (appHost && typeof appHost._disconnected === "function") {
       appHost._disconnected(this);
     }
@@ -571,28 +596,28 @@ const elementDefine = (name, config = {}) => (constructor) => {
     this._executeSwcScript("swc-on-after-disconnected", helperHostSet);
     this.__swc_connected = false;
   };
-  const originalAdopted = proto.adoptedCallback;
+  const originalAdopted = userCallback(proto.adoptedCallback);
   proto.adoptedCallback = function() {
     const hostSet = SwcUtils.getHostSet(this);
     this._executeSwcScript("swc-on-before-adopted", hostSet);
     for (const m of findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
-    for (const c of cyclers) c.onAdopted?.(helperHostSet);
+    for (const c of cyclers) c.onAdopted?.(connectedHelperHostSet(this));
     if (originalAdopted) originalAdopted.apply(this);
     for (const m of findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
     this._executeSwcScript("swc-on-adopted", hostSet);
     this._executeSwcScript("swc-on-after-adopted", hostSet);
   };
-  const originalAttributeChanged = proto.attributeChangedCallback;
+  const originalAttributeChanged = userCallback(proto.attributeChangedCallback);
   proto.attributeChangedCallback = function(name2, old, newVal) {
     if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
-    const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this);
+    const helperAndHostSet = SwcUtils.getHelperAndHostSet(this);
     let processedVal = newVal;
     if (newVal !== null) {
       const ae = new ActionExpression(newVal);
       const expr = ae.getFirstExpression("callReturn");
       if (expr) {
-        const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
-        const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
+        const win2 = SwcUtils.resolveWindow(this);
+        const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(this);
         const script = ConvertUtils.decodeHtmlEntity(expr.script, win2.document);
         try {
           const result = FunctionUtils.executeReturn({
@@ -619,6 +644,10 @@ const elementDefine = (name, config = {}) => (constructor) => {
     get: () => mergedObservedAttributes,
     configurable: true
   });
+  proto.connectedCallback[SWC_ORIGINAL_CALLBACK] = originalConnected;
+  proto.disconnectedCallback[SWC_ORIGINAL_CALLBACK] = originalDisconnected;
+  proto.adoptedCallback[SWC_ORIGINAL_CALLBACK] = originalAdopted;
+  proto.attributeChangedCallback[SWC_ORIGINAL_CALLBACK] = originalAttributeChanged;
   ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, metadata, constructor);
   const registry = metadata.customElementRegistry || win?.customElements;
   if (registry && !registry.get(metadata.name)) {