@dooboostore/simple-web-component 1.0.47 → 1.0.48

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

@@ -1134,6 +1134,7 @@ var dooboostoreSimpleWebComponent = (() => {
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
     HTML_TAG_ENTRIES: () => HTML_TAG_ENTRIES,
     InjectSituationType: () => InjectSituationType2,
+    MUTATION_OBSERVER_METADATA_KEY: () => MUTATION_OBSERVER_METADATA_KEY,
     ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
     ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
     ON_AFTER_CONNECTED_METADATA_KEY: () => ON_AFTER_CONNECTED_METADATA_KEY,
@@ -1150,6 +1151,7 @@ var dooboostoreSimpleWebComponent = (() => {
     PUBLISH_SWC_APP_MESSAGE_METADATA_KEY: () => PUBLISH_SWC_APP_MESSAGE_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
+    RESIZE_OBSERVER_METADATA_KEY: () => RESIZE_OBSERVER_METADATA_KEY,
     STATE_METADATA_KEY: () => STATE_METADATA_KEY,
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
     SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY: () => SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY,
@@ -1171,12 +1173,15 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcUtils: () => SwcUtils,
     addClass: () => addClass,
     addEventListener: () => addEventListener,
+    addEventListenerAllDom: () => addEventListenerAllDom,
     addEventListenerAppHost: () => addEventListenerAppHost,
     addEventListenerDelegate: () => addEventListenerDelegate,
     addEventListenerDelegateAllDom: () => addEventListenerDelegateAllDom,
     addEventListenerDelegateLightDom: () => addEventListenerDelegateLightDom,
     addEventListenerDelegateShadowDom: () => addEventListenerDelegateShadowDom,
     addEventListenerDocument: () => addEventListenerDocument,
+    addEventListenerLightDom: () => addEventListenerLightDom,
+    addEventListenerShadowDom: () => addEventListenerShadowDom,
     addEventListenerThis: () => addEventListenerThis,
     addEventListenerWindow: () => addEventListenerWindow,
     appendHtmlSlot: () => appendHtmlSlot,
@@ -1215,10 +1220,17 @@ var dooboostoreSimpleWebComponent = (() => {
     emitCustomEvent: () => emitCustomEvent,
     ensureInit: () => ensureInit,
     event: () => event,
+    eventAllDom: () => eventAllDom,
+    eventAppHost: () => eventAppHost,
     eventDelegate: () => eventDelegate,
     eventDelegateAllDom: () => eventDelegateAllDom,
     eventDelegateLightDom: () => eventDelegateLightDom,
     eventDelegateShadowDom: () => eventDelegateShadowDom,
+    eventDocument: () => eventDocument,
+    eventLightDom: () => eventLightDom,
+    eventShadowDom: () => eventShadowDom,
+    eventThis: () => eventThis,
+    eventWindow: () => eventWindow,
     findAllApplyNodeMetadata: () => findAllApplyNodeMetadata,
     findAllApplySlotMetadata: () => findAllApplySlotMetadata,
     findAllAttributeApplyMetadata: () => findAllAttributeApplyMetadata,
@@ -1238,9 +1250,11 @@ var dooboostoreSimpleWebComponent = (() => {
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
+    getMutationObserverMetadata: () => getMutationObserverMetadata,
     getPublishSwcAppMessageMetadata: () => getPublishSwcAppMessageMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
+    getResizeObserverMetadata: () => getResizeObserverMetadata,
     getSubscribeSwcAppMessageWhileConnectedMetadata: () => getSubscribeSwcAppMessageWhileConnectedMetadata,
     getSubscribeSwcAppRouteChangeWhileConnectedMetadata: () => getSubscribeSwcAppRouteChangeWhileConnectedMetadata,
     html: () => html,
@@ -1267,6 +1281,15 @@ var dooboostoreSimpleWebComponent = (() => {
     insertBeforeEndLight: () => insertBeforeEndLight,
     insertBeforeEndShadow: () => insertBeforeEndShadow,
     isSSR: () => isSSR,
+    mutationObserver: () => mutationObserver,
+    mutationObserverAll: () => mutationObserverAll,
+    mutationObserverDelegate: () => mutationObserverDelegate,
+    mutationObserverDelegateAll: () => mutationObserverDelegateAll,
+    mutationObserverDelegateLight: () => mutationObserverDelegateLight,
+    mutationObserverDelegateShadow: () => mutationObserverDelegateShadow,
+    mutationObserverLight: () => mutationObserverLight,
+    mutationObserverShadow: () => mutationObserverShadow,
+    mutationObserverThis: () => mutationObserverThis,
     onAdopted: () => onAdopted,
     onAdoptedAfter: () => onAdoptedAfter,
     onAdoptedBefore: () => onAdoptedBefore,
@@ -1289,6 +1312,9 @@ var dooboostoreSimpleWebComponent = (() => {
     publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
+    queryAllRoots: () => queryAllRoots,
+    queryLight: () => queryLight,
+    queryShadow: () => queryShadow,
     receiveMessage: () => receiveMessage,
     removeClass: () => removeClass,
     removeSSRAttribute: () => removeSSRAttribute,
@@ -1298,6 +1324,15 @@ var dooboostoreSimpleWebComponent = (() => {
     replaceChildrenLight: () => replaceChildrenLight,
     replaceChildrenSlot: () => replaceChildrenSlot,
     replaceChildrenTextSlot: () => replaceChildrenTextSlot,
+    resizeObserver: () => resizeObserver,
+    resizeObserverAll: () => resizeObserverAll,
+    resizeObserverDelegate: () => resizeObserverDelegate,
+    resizeObserverDelegateAll: () => resizeObserverDelegateAll,
+    resizeObserverDelegateLight: () => resizeObserverDelegateLight,
+    resizeObserverDelegateShadow: () => resizeObserverDelegateShadow,
+    resizeObserverLight: () => resizeObserverLight,
+    resizeObserverShadow: () => resizeObserverShadow,
+    resizeObserverThis: () => resizeObserverThis,
     resolveAttributeTargets: () => resolveAttributeTargets,
     resolvePropertyTargets: () => resolvePropertyTargets,
     setAttribute: () => setAttribute,
@@ -10869,15 +10904,27 @@ ${indentStr}}`;
 
   // src/decorators/addEventListener.ts
   var ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:add-event-listener");
-  function addEventListener(selectorOrTarget, type, options = {}) {
+  function addEventListener(selectorOrType, typeOrOptions, maybeOptions) {
     return (targetObj, propertyKey, descriptor) => {
+      let selector;
+      let type;
+      let opts = {};
+      if (typeof typeOrOptions === "string") {
+        selector = selectorOrType;
+        type = typeOrOptions;
+        opts = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        type = selectorOrType;
+        opts = typeOrOptions ?? {};
+      }
       const constructor = targetObj.constructor;
       let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
       if (!listeners) {
         listeners = [];
         ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
       }
-      listeners.push({ propertyKey, selector: selectorOrTarget, type, options });
+      listeners.push({ propertyKey, selector, type, options: opts });
     };
   }
   function addEventListenerDelegateLightDom(selector, type, options) {
@@ -10892,11 +10939,15 @@ ${indentStr}}`;
   function addEventListenerDelegate(selector, type, options) {
     return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: true });
   }
-  var event = addEventListener;
-  var eventDelegateLightDom = addEventListenerDelegateLightDom;
-  var eventDelegateShadowDom = addEventListenerDelegateShadowDom;
-  var eventDelegateAllDom = addEventListenerDelegateAllDom;
-  var eventDelegate = addEventListenerDelegate;
+  function addEventListenerLightDom(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "light" });
+  }
+  function addEventListenerShadowDom(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "shadow" });
+  }
+  function addEventListenerAllDom(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "all" });
+  }
   function addEventListenerThis(type, options) {
     return addEventListener("$this", type, options);
   }
@@ -10909,11 +10960,167 @@ ${indentStr}}`;
   function addEventListenerDocument(type, options) {
     return addEventListener("$document", type, options);
   }
+  var event = addEventListener;
+  var eventDelegateLightDom = addEventListenerDelegateLightDom;
+  var eventDelegateShadowDom = addEventListenerDelegateShadowDom;
+  var eventDelegateAllDom = addEventListenerDelegateAllDom;
+  var eventDelegate = addEventListenerDelegate;
+  var eventLightDom = addEventListenerLightDom;
+  var eventShadowDom = addEventListenerShadowDom;
+  var eventAllDom = addEventListenerAllDom;
+  var eventAppHost = addEventListenerAppHost;
+  var eventWindow = addEventListenerWindow;
+  var eventDocument = addEventListenerDocument;
+  var eventThis = addEventListenerThis;
   var getAddEventListenerMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
   };
 
+  // src/decorators/mutationObserver.ts
+  var MUTATION_OBSERVER_METADATA_KEY = Symbol.for("simple-web-component:mutation-observer");
+  function mutationObserver(selectorOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector = "$this";
+      let options = {};
+      if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+        selector = selectorOrOptions;
+        options = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        options = selectorOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let observers = ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+      if (!observers) {
+        observers = [];
+        ReflectUtils.defineMetadata(MUTATION_OBSERVER_METADATA_KEY, observers, constructor);
+      }
+      observers.push({ propertyKey, selector, options });
+    };
+  }
+  function mutationObserverThis(options) {
+    return mutationObserver("$this", options);
+  }
+  function mutationObserverDelegateLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "light", delegate: true });
+  }
+  function mutationObserverDelegateShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "shadow", delegate: true });
+  }
+  function mutationObserverDelegateAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "all", delegate: true });
+  }
+  function mutationObserverDelegate(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "auto", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "auto", delegate: true });
+  }
+  function mutationObserverLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "light" });
+  }
+  function mutationObserverShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "shadow" });
+  }
+  function mutationObserverAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "all" });
+  }
+  function getMutationObserverMetadata(target) {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+  }
+
+  // src/decorators/resizeObserver.ts
+  var RESIZE_OBSERVER_METADATA_KEY = Symbol.for("simple-web-component:resize-observer");
+  function resizeObserver(selectorOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector = "$this";
+      let options = {};
+      if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+        selector = selectorOrOptions;
+        options = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        options = selectorOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let observers = ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
+      if (!observers) {
+        observers = [];
+        ReflectUtils.defineMetadata(RESIZE_OBSERVER_METADATA_KEY, observers, constructor);
+      }
+      observers.push({ propertyKey, selector, options });
+    };
+  }
+  function resizeObserverThis(options) {
+    return resizeObserver("$this", options);
+  }
+  function resizeObserverDelegateLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "light", delegate: true });
+  }
+  function resizeObserverDelegateShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "shadow", delegate: true });
+  }
+  function resizeObserverDelegateAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "all", delegate: true });
+  }
+  function resizeObserverDelegate(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "auto", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "auto", delegate: true });
+  }
+  function resizeObserverLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "light" });
+  }
+  function resizeObserverShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "shadow" });
+  }
+  function resizeObserverAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "all" });
+  }
+  function getResizeObserverMetadata(target) {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
+  }
+
   // ../core/dist/esm/message/operators/debounceTime.js
   function debounceTime(duration, config) {
     return (source) => {
@@ -14168,6 +14375,15 @@ ${indentStr}}`;
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
   };
+  function queryShadow(selector, options) {
+    return query(selector, { ...options ?? {}, root: "shadow" });
+  }
+  function queryLight(selector, options) {
+    return query(selector, { ...options ?? {}, root: "light" });
+  }
+  function queryAllRoots(selector, options) {
+    return query(selector, { ...options ?? {}, root: "all" });
+  }
 
   // src/decorators/queryAll.ts
   var QUERY_ALL_METADATA_KEY = Symbol.for("simple-web-component:query-all");
@@ -14743,7 +14959,6 @@ ${indentStr}}`;
     if (!inst.__swc_initialized) {
       inst._swcId = inst?.getAttribute?.("swc-use-ssr") ?? "s" + Math.random().toString(36).substring(2, 11).toLowerCase();
       inst._emitHandlers = /* @__PURE__ */ new Map();
-      inst._boundListeners = [];
       inst.__swc_initialized = true;
       const target = inst instanceof Function ? inst : inst.constructor;
       const attributeAllList = findAllAttributeMetadata(target).filter((it) => it.type === "property");
@@ -14945,6 +15160,8 @@ ${indentStr}}`;
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
     const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+    const mutationObserverList = getMutationObserverMetadata(constructor) || [];
+    const resizeObserverList = getResizeObserverMetadata(constructor) || [];
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const attributeList = findAllAttributeMetadata(constructor);
     const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
@@ -14957,9 +15174,18 @@ ${indentStr}}`;
     const proto = constructor.prototype;
     setupPrototype(proto, win);
     let helperHostSet = null;
+    let boundListeners = [];
+    let shadowMutationObserver = null;
+    let lightMutationObserver = null;
+    let resizeObserver2 = null;
+    let resizeObservers = [];
+    let removeObserverCallbacks = [];
     const originalConnected = proto.connectedCallback;
     proto.connectedCallback = async function() {
       ensureInit(this);
+      boundListeners = [];
+      resizeObservers = [];
+      removeObserverCallbacks = [];
       helperHostSet = SwcUtils.getHelperAndHostSet(win, this);
       const appHost = helperHostSet.$appHost;
       const useSsr = isSSR(this);
@@ -15088,7 +15314,13 @@ ${indentStr}}`;
               }
             };
             br.addEventListener(type, unifiedHandler, opts);
-            this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+            const onRemoves = [];
+            for (const m of sortedMetaList) {
+              if (m.options.removeListener) {
+                onRemoves.push({ fn: m.options.removeListener, opts: m.options });
+              }
+            }
+            boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts, onRemoves });
           });
         });
         nonDelegateListeners.forEach((meta) => {
@@ -15188,9 +15420,181 @@ ${indentStr}}`;
               eventSubject.next(event2);
             };
             t.addEventListener(type, wrappedHandler, opts);
-            this._boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription });
+            const onRemoves = options.removeListener ? [{ fn: options.removeListener, opts }] : [];
+            boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription, onRemoves });
           });
         });
+        shadowMutationObserver = null;
+        lightMutationObserver = null;
+        resizeObserver2 = null;
+        if (resizeObserverList.length > 0) {
+          const root2 = this.shadowRoot || this;
+          resizeObserver2 = new ResizeObserver((entries, obs) => {
+            for (const m of resizeObserverList) {
+              let matchedEls = [];
+              if (m.options.delegate && typeof m.selector === "string") {
+                const isThis = m.selector === "$this" || m.selector === "";
+                const matchesSel = (node) => {
+                  if (!node || node.nodeType !== 1) return false;
+                  if (isThis) return true;
+                  const el = node;
+                  return el.matches?.(m.selector) || !!el.closest?.(m.selector);
+                };
+                matchedEls = entries.map((e) => e.target).filter(matchesSel);
+              } else {
+                matchedEls = entries.map((e) => e.target).filter((t) => t && t.nodeType === 1);
+              }
+              if (matchedEls.length === 0) continue;
+              if (m.options.filter) {
+                const helper = SwcUtils.getHelperAndHostSet(currentWin, this);
+                if (!m.options.filter(matchedEls, { currentThis: this, helper })) continue;
+              }
+              const hostSet = SwcUtils.getHostSet(this);
+              this[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root2 });
+            }
+          });
+          resizeObservers.push(resizeObserver2);
+          for (const m of resizeObserverList) {
+            if (m.options.removeObserver) {
+              removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root2, opts: m.options });
+            }
+          }
+        }
+        const shadowMetas = mutationObserverList.filter((m) => {
+          const r = m.options.root || "auto";
+          return this.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+        });
+        const lightMetas = mutationObserverList.filter((m) => {
+          const r = m.options.root || "auto";
+          return r === "light" || r === "all" || !this.shadowRoot && r === "auto";
+        });
+        const setupMutationObserver = (root2, metas, resizeDelegates = []) => {
+          if (metas.length === 0) return null;
+          const initFrom = (o) => {
+            const init = {
+              childList: o.childList,
+              attributes: o.attributes,
+              characterData: o.characterData,
+              subtree: o.subtree,
+              attributeFilter: o.attributeFilter,
+              attributeOldValue: o.attributeOldValue,
+              characterDataOldValue: o.characterDataOldValue
+            };
+            if (!init.childList && !init.attributes && !init.characterData) init.childList = true;
+            return init;
+          };
+          const observer = new MutationObserver((mutations, obs) => {
+            for (const meta of metas) {
+              const { selector, options } = meta;
+              let matchedEls = [];
+              if (options.delegate && typeof selector === "string") {
+                const isThis = selector === "$this" || selector === "";
+                const matchesSel = (node) => {
+                  if (!node || node.nodeType !== 1) return false;
+                  if (isThis) return true;
+                  const el = node;
+                  return el.matches?.(selector) || !!el.closest?.(selector);
+                };
+                matchedEls = mutations.flatMap((m) => {
+                  const els = [];
+                  if (matchesSel(m.target)) els.push(m.target);
+                  Array.from(m.addedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                  Array.from(m.removedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                  return els;
+                });
+              } else if (typeof selector === "string") {
+                const isThis = selector === "$this" || selector === "";
+                const matchesSel = (node) => {
+                  if (!node || node.nodeType !== 1) return false;
+                  if (isThis) return true;
+                  return node.matches?.(selector);
+                };
+                matchedEls = mutations.flatMap((m) => {
+                  const els = [];
+                  if (matchesSel(m.target)) els.push(m.target);
+                  Array.from(m.addedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                  Array.from(m.removedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                  return els;
+                });
+              } else {
+                matchedEls = mutations.map((m) => m.target).filter((t) => t && t.nodeType === 1);
+              }
+              if (matchedEls.length === 0) continue;
+              if (options.filter) {
+                const helper = SwcUtils.getHelperAndHostSet(currentWin, this);
+                if (!options.filter(matchedEls, { currentThis: this, helper })) continue;
+              }
+              const hostSet = SwcUtils.getHostSet(this);
+              this[meta.propertyKey](matchedEls, mutations, obs, { ...hostSet, $root: root2 });
+            }
+            if (resizeDelegates.length > 0 && resizeObserver2) {
+              const handle = (n, observe) => {
+                if (n.nodeType !== 1) return;
+                const el = n;
+                for (const m of resizeDelegates) {
+                  if (typeof m.selector !== "string") continue;
+                  const isThis = m.selector === "$this" || m.selector === "";
+                  const matchesSel = (node) => {
+                    if (!node || node.nodeType !== 1) return false;
+                    if (isThis) return true;
+                    const e = node;
+                    return e.matches?.(m.selector) || !!e.closest?.(m.selector);
+                  };
+                  if (matchesSel(el)) {
+                    if (observe) resizeObserver2.observe(el, m.options.box ? { box: m.options.box } : void 0);
+                    else resizeObserver2.unobserve(el);
+                  } else if (!isThis) {
+                    el.querySelectorAll(m.selector).forEach((sub) => {
+                      if (observe) resizeObserver2.observe(sub, m.options.box ? { box: m.options.box } : void 0);
+                      else resizeObserver2.unobserve(sub);
+                    });
+                  }
+                }
+              };
+              for (const m of mutations) {
+                Array.from(m.addedNodes || []).forEach((n) => handle(n, true));
+                Array.from(m.removedNodes || []).forEach((n) => handle(n, false));
+              }
+            }
+          });
+          const hasDelegate = metas.some((m) => m.options.delegate) || resizeDelegates.some((m) => m.options.delegate);
+          if (hasDelegate) {
+            observer.observe(root2, { childList: true, subtree: true });
+          }
+          const nonDelegateMetas = metas.filter((m) => !m.options.delegate);
+          for (const m of nonDelegateMetas) {
+            const { selector, options } = m;
+            const mInit = initFrom(options);
+            if (typeof selector === "string") {
+              if (selector === "$this" || selector === "") {
+                observer.observe(root2, mInit);
+              } else {
+                root2.querySelectorAll(selector).forEach((el) => observer.observe(el, mInit));
+              }
+            } else if (typeof selector === "function") {
+              observer.observe(root2, mInit);
+            }
+          }
+          return observer;
+        };
+        const shadowResizeDelegateMetas = resizeObserverList.filter((m) => {
+          if (!m.options.delegate) return false;
+          const r = m.options.root || "auto";
+          return this.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+        });
+        const lightResizeDelegateMetas = resizeObserverList.filter((m) => {
+          if (!m.options.delegate) return false;
+          const r = m.options.root || "auto";
+          return r === "light" || r === "all" || !this.shadowRoot && r === "auto";
+        });
+        if (this.shadowRoot) shadowMutationObserver = setupMutationObserver(this.shadowRoot, shadowMetas, shadowResizeDelegateMetas);
+        lightMutationObserver = setupMutationObserver(this, lightMetas, lightResizeDelegateMetas);
+        for (const m of mutationObserverList) {
+          if (m.options.removeObserver) {
+            const rootForM = this.shadowRoot && (m.options.root === "shadow" || m.options.root === "all" || m.options.root === "auto" && this.shadowRoot) ? this.shadowRoot : this;
+            removeObserverCallbacks.push({ fn: m.options.removeObserver, target: rootForM, opts: m.options });
+          }
+        }
         if (originalConnected) await originalConnected.apply(this);
         const aMethods = findAllOnConnectedAfterMetadata(this);
         for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
@@ -15225,15 +15629,44 @@ ${indentStr}}`;
       this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
       for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-      if (this._boundListeners) {
-        this._boundListeners.forEach((l) => {
+      if (boundListeners.length > 0) {
+        boundListeners.forEach((l) => {
           l.target.removeEventListener(l.type, l.handler, l.options);
           if (l.subscription && typeof l.subscription.unsubscribe === "function") {
             l.subscription.unsubscribe();
           }
+          if (Array.isArray(l.onRemoves)) {
+            for (const r of l.onRemoves) {
+              try {
+                r.fn(l.target, r.opts);
+              } catch (e) {
+                console.error("[SWC] removeListener error:", e);
+              }
+            }
+          }
         });
-        this._boundListeners = [];
+        boundListeners = [];
+      }
+      const _obs = [shadowMutationObserver, lightMutationObserver, resizeObserver2, ...resizeObservers];
+      for (const o of _obs) {
+        try {
+          o?.disconnect?.();
+        } catch (e) {
+          console.error("[SWC] observer disconnect error:", e);
+        }
+      }
+      shadowMutationObserver = null;
+      lightMutationObserver = null;
+      resizeObserver2 = null;
+      resizeObservers = [];
+      for (const cb of removeObserverCallbacks) {
+        try {
+          cb.fn(cb.target, cb.opts);
+        } catch (e) {
+          console.error("[SWC] removeObserver error:", e);
+        }
       }
+      removeObserverCallbacks = [];
       new ElementApply(this, { id: this._swcId }).removeAllEventListener();
       if (originalDisconnected) originalDisconnected.apply(this);
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);