@dooboostore/simple-web-component 1.0.19 → 1.0.22

package/src/decorators/elementDefine.ts

@@ -1,21 +1,18 @@
-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';
 import { getAddEventListenerMetadata } from './addEventListener';
-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';
+import { ON_CONSTRUCTOR_METADATA_KEY, 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';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
-import { findAllAttributeChangedMetadata } from './changedAttribute';
+import { findAllAttributeChangedMetadata } from './changedAttributeHost';
 import { findAllSetAttributeMetadata } from './setAttribute';
-import { findAllReplaceChildrenMetadata } from './replaceChildren';
-import { findAllAppendChildMetadata } from './appendChild';
-import { findAllClassListMetadata } from './classList';
-import { findAllStyleMetadata } from './style';
+import { findAllAttributeMetadata } from './attribute';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
 import { SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { InjectSituationType, HostSet } from '../types';
 
-// --- Core Interfaces & Types (Moved back from base.ts) ---
+// --- Core Interfaces & Types ---
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
 
@@ -46,6 +43,12 @@ export const ensureInit = (inst: any) => {
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
     inst._executeSwcScript?.('swc-on-constructor', hostSet);
+
+    // Call @onConstructor lifecycle methods
+    const cMethods = findAllLifecycleMetadata(inst, ON_CONSTRUCTOR_METADATA_KEY);
+    if (cMethods) {
+      for (const m of cMethods) (inst)._invokeLifecycleMethod(m, hostSet);
+    }
   }
 };
 
@@ -159,7 +162,9 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      const hostSet = SwcUtils.getHostSet(el);
+      console.log('execute handler', event);
+      const parent = SwcUtils.findNearestSwcHost(el);
+      const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
       const helpers = SwcUtils.getHelperSet(currentWin);
@@ -180,13 +185,19 @@ const setupPrototype = (proto: any) => {
 
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
-    const hostSet = SwcUtils.getHostSet(el);
+
+      console.log('execute handler2', event);
+    const parent = SwcUtils.findNearestSwcHost(el);
+    const hostSet = SwcUtils.getHostSet(parent || el);
     const conf = getElementConfig(this);
     const currentWin = (this as any)._resolveWindow(conf);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
+    const detail = (event as CustomEvent).detail;
     const args = {
       event,
-      $data: (event as CustomEvent).detail,
+      $event: event,
+      $data: detail,
+      $detail: detail,
       ...hostSet,
       ...currentHelpers,
       $el: el,
@@ -219,14 +230,17 @@ export const elementDefine =
     }
 
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
+    const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+    const addHostEventListenerList = addEventListenerList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
+    const attributeList = findAllAttributeMetadata(constructor);
 
     const swcLifecycleAttributes = ['swc-on-constructor', 'swc-on-connected', 'swc-on-disconnected', 'swc-on-before-connected', 'swc-on-after-connected', 'swc-on-before-disconnected', 'swc-on-after-disconnected', 'swc-on-before-adopted', 'swc-on-after-adopted', 'swc-on-attribute-changed'];
     const swcOnEvents = DOM_EVENT_NAMES.map(e => `swc-on-${e}`);
 
     // Collect all observed attributes from all decorators
-    const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map(it => it.name), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
+    const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map(it => it.name), ...attributeList.map(it => it.options.name || String(it.propertyKey)), ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
 
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
@@ -251,7 +265,23 @@ export const elementDefine =
         for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
       }
 
-      if (typeof (this as any).initCore === 'function') (this as any).initCore();
+      // Initialize @attribute fields (DOM <-> JS Sync)
+      attributeList.forEach(meta => {
+        const attrName = meta.options.name || String(meta.propertyKey);
+        if (meta.options.connectedInitialize === true) {
+          // JS -> DOM (FORCE OVERWRITE with JS value)
+          (this as any).__swc_syncing_init = true;
+          try {
+            const memoryVal = (this as any)[meta.privateKey];
+            if (memoryVal !== undefined) {
+              (this as any)[meta.propertyKey] = memoryVal; // Trigger setter to update DOM
+            }
+          } finally {
+            (this as any).__swc_syncing_init = false;
+          }
+        }
+        // else: Do NOT sync - Keep the default value from class initialization
+      });
 
       if (connectedInnerHtmlList.length > 0) {
         let sContent = '',
@@ -275,7 +305,76 @@ export const elementDefine =
         globalDelegatedRoots.add(root);
       }
 
+      // Separate delegate and non-delegate listeners
+      const delegateListeners: typeof addEventListenerList = [];
+      const nonDelegateListeners: typeof addEventListenerList = [];
+      
       addEventListenerList.forEach(meta => {
+        if (meta.options.delegate && meta.selector !== ':window' && meta.selector !== ':document' && meta.selector !== ':parentHost' && meta.selector !== ':appHost' && meta.selector !== ':firstHost' && meta.selector !== ':lastHost' && meta.selector !== ':firstAppHost' && meta.selector !== ':lastAppHost' && meta.selector !== ':hosts' && meta.selector !== ':appHosts' && meta.selector !== ':host' && meta.selector !== '') {
+          delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
+      });
+
+      // Group delegate listeners by (type, root) combination
+      const delegatesByTypeAndRoot = new Map<string, any[]>();
+      delegateListeners.forEach(meta => {
+        const r = meta.options.root || 'auto';
+        const rootKey = `${meta.type}:${r}`;
+        if (!delegatesByTypeAndRoot.has(rootKey)) {
+          delegatesByTypeAndRoot.set(rootKey, []);
+        }
+        delegatesByTypeAndRoot.get(rootKey)!.push(meta);
+      });
+
+      // Register unified handlers for delegate listeners
+      delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
+        const [type, rStr] = typeRootKey.split(':');
+        const r = rStr === 'auto' ? 'auto' : rStr;
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        
+        const bindRoots: (HTMLElement | ShadowRoot)[] = [];
+        if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
+        else if (r === 'light') bindRoots.push(this as any);
+        else if (r === 'shadow' && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === 'all') {
+          bindRoots.push(this as any);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+
+        bindRoots.forEach(br => {
+          // Sort: stopPropagation handlers first (more specific/terminal actions)
+          const sortedMetaList = [...metaList].sort((a, b) => {
+            const aStop = a.options.stopPropagation ? 1 : 0;
+            const bStop = b.options.stopPropagation ? 1 : 0;
+            return bStop - aStop;  // stopPropagation: true comes first
+          });
+          
+          const unifiedHandler = async (event: Event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = (event.target as HTMLElement).closest(selector);
+              if (matchedEl && (br as any).contains(matchedEl)) {
+                if (options.stopPropagation) event.stopPropagation();
+                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+                if (options.preventDefault) event.preventDefault();
+                const currentHostSet = SwcUtils.getHostSet(this as any);
+                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+                await (this as any)[meta.propertyKey](event, currentHostSet, matchedEl, args);
+                
+                // Stop processing if event propagation was stopped
+                if ((event as any).cancelBubble) break;
+              }
+            }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          (this as any)._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+
+      // Process non-delegate listeners
+      nonDelegateListeners.forEach(meta => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
         const bindTargets: EventTarget[] = [];
@@ -301,34 +400,7 @@ export const elementDefine =
         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: (HTMLElement | ShadowRoot)[] = [];
-          if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
-          else if (r === 'light') bindRoots.push(this as any);
-          else if (r === 'shadow' && this.shadowRoot) bindRoots.push(this.shadowRoot);
-          else if (r === 'all') {
-            bindRoots.push(this as any);
-            if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-          }
-
-          bindRoots.forEach(br => {
-            const handler = async (event: Event) => {
-              const matchedEl = (event.target as HTMLElement).closest(selector);
-              if (matchedEl && (br as any).contains(matchedEl)) {
-                if (options.stopPropagation) event.stopPropagation();
-                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-                if (options.preventDefault) event.preventDefault();
-                const currentHostSet = SwcUtils.getHostSet(this as any);
-                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-                await (this as any)._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl, args]);
-              }
-            };
-            br.addEventListener(type, handler, opts);
-            if (options.removeOnDisconnected === true || (br !== this && br !== this.shadowRoot)) {
-              (this as any)._boundListeners.push({ target: br, type, handler, options: opts });
-            }
-          });
-        } else {
+        else {
           const searchRoots: (HTMLElement | ShadowRoot)[] = [];
           if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
           else if (r === 'light') searchRoots.push(this as any);
@@ -350,7 +422,7 @@ export const elementDefine =
             if (options.preventDefault) event.preventDefault();
             const currentHostSet = SwcUtils.getHostSet(this as any);
             const args = { event, ...currentHostSet, $el: t, $root: t };
-            await (this as any)._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+            await (this as any)[meta.propertyKey](event, currentHostSet, args);
           };
           t.addEventListener(type, handler, opts);
           if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
@@ -359,13 +431,33 @@ export const elementDefine =
         });
       });
 
+      addHostEventListenerList.forEach(meta => {
+        const { type, options } = meta;
+        const opts = { capture: options.capture, once: options.once, passive: options.passive };
+
+        const handler = async (event: Event) => {
+          if (options.stopPropagation) event.stopPropagation();
+          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+          if (options.preventDefault) event.preventDefault();
+          const currentHostSet = SwcUtils.getHostSet(this as any);
+          const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
+          await (this as any)[meta.propertyKey](event, currentHostSet, args);
+        };
+        this.addEventListener(type, handler, opts);
+        if (options.removeOnDisconnected === true) {
+          (this as any)._boundListeners.push({ target: this, 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 as any)._invokeLifecycleMethod(m, hostSet);
       }
       (this as any)._executeSwcScript('swc-on-connected', hostSet);
       (this as any)._executeSwcScript('swc-on-after-connected', hostSet);
+      (this as any).__swc_connected = true;
     };
 
     const originalDisconnected = proto.disconnectedCallback;
@@ -390,6 +482,7 @@ export const elementDefine =
       }
       (this as any)._executeSwcScript('swc-on-disconnected', hostSet);
       (this as any)._executeSwcScript('swc-on-after-disconnected', hostSet);
+      (this as any).__swc_connected = false;
     };
 
     const originalAdopted = proto.adoptedCallback;
@@ -415,18 +508,26 @@ export const elementDefine =
     proto.attributeChangedCallback = function (name: string, old: string | null, newVal: string | null) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name, old, newVal]);
 
+      const hSet = SwcUtils.getHostSet(this as any);
+
+      // Handle swc-on-* events
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
-          const customEventMeta = emitCustomEventList.find(it => it.options.attributeName === name);
-          const eventName = customEventMeta ? customEventMeta.type : name.substring(7);
+          const eventName = name.substring(7);
           (this as any)._bindAttributeEvent(this as any, name, newVal, eventName);
         }
       }
 
+      // Handle @emitHostCustomEvent attribute changes
+      const hostCustomEventMeta = emitHostCustomEventList.find(it => (it.options as any).attributeName === name);
+      if (hostCustomEventMeta && newVal !== null) {
+        (this as any)._bindAttributeEvent(this as any, name, newVal, hostCustomEventMeta.type);
+      }
+
+      // Handle @changedAttribute callbacks
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
-        const hSet = SwcUtils.getHostSet(this as any);
-        for (const key of mKeys) (this as any)._invokeLifecycleMethod(key, hSet, [newVal, old, name]);
+        for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);
       }
     };
 

package/src/decorators/emitCustomEvent.ts

@@ -1,10 +1,9 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions } from '../types';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 
 export interface EmitCustomEventBaseOptions {
-  attributeName?: string;
   bubbles?: boolean;
   composed?: boolean;
   cancelable?: boolean;
@@ -14,7 +13,7 @@ export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
   selector: string;
   type: string;
-  options: EmitCustomEventBaseOptions & SwcQueryOptions;
+  options: (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
 }
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
@@ -29,9 +28,6 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
 
     const fullOptions: any = { ...options, type };
 
-    if (!fullOptions.attributeName) {
-      fullOptions.attributeName = `swc-on-${type}`;
-    }
     if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
     if (fullOptions.composed === undefined) fullOptions.composed = true;
 
@@ -103,3 +99,15 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
 };
+
+/**
+ * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
+ * Usage: @emitCustomEventHost('navigate')
+ * Usage: @emitCustomEventHost('navigate', { attributeName: 'on-navigate' })
+ * 
+ * The attributeName option is used to automatically observe attributes for this event.
+ * For example, { attributeName: 'on-navigate' } will add 'on-navigate' to observedAttributes.
+ */
+export function emitCustomEventHost(type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator {
+  return emitCustomEvent(':host', type, options);
+}

package/src/decorators/index.ts

@@ -1,10 +1,10 @@
 export * from './addEventListener';
+export * from './attribute';
 export * from './elementDefine';
-export * from './changedAttribute';
+export * from './changedAttributeHost';
 export * from './setAttribute';
 export * from './emitCustomEvent';
-export * from './replaceChildren';
-export * from './appendChild';
+export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';

package/src/decorators/lifecycles.ts

@@ -1,7 +1,8 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttribute';
+import { ReflectUtils } from '@dooboostore/core';
+import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttributeHost';
 import { SET_ATTRIBUTE_METADATA_KEY } from './setAttribute';
 
+export const ON_CONSTRUCTOR_METADATA_KEY = Symbol('simple-web-component:on-constructor');
 export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');
 export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');
 export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');
@@ -24,6 +25,7 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   };
 }
 
+export const onConstructor = createLifecycleDecorator(ON_CONSTRUCTOR_METADATA_KEY);
 export const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
 export const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
 export const onConnected = onAfterConnected;

package/src/decorators/onConnectedInnerHtml.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 
 export interface InnerHtmlOptions {
   useShadow?: boolean;

package/src/decorators/query.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 import { SpecialSelector, SwcQueryOptions } from '../types';
@@ -108,3 +108,12 @@ export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
 };
+
+/**
+ * @hostQuery decorator - simplified version of @query for :host selector
+ * Usage: @hostQuery()
+ * Usage: @hostQuery({ root: 'shadow' })
+ */
+export function queryHost(options?: SwcQueryOptions): PropertyDecorator {
+  return query(':host', options);
+}

package/src/decorators/queryAll.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 import { SpecialSelector, SwcQueryOptions } from '../types';
@@ -107,3 +107,12 @@ export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
 };
+
+/**
+ * @hostQueryAll decorator - simplified version of @queryAll for :host selector
+ * Usage: @hostQueryAll()
+ * Usage: @hostQueryAll({ root: 'shadow' })
+ */
+export function queryAllHost(options?: SwcQueryOptions): PropertyDecorator {
+  return queryAll(':host', options);
+}

package/src/decorators/setAttribute.ts

@@ -1,11 +1,13 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export interface SetAttributeMetadata {
   propertyKey: string | symbol;
   selector: string;
   name: string;
+  options: SwcQueryOptions;
 }
 
 export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
@@ -15,7 +17,9 @@ export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attri
  * Usage: @setAttribute(':host', 'count')
  * Usage: @setAttribute('#child', 'disabled')
  */
-export function setAttribute(selector: string, name: string): MethodDecorator {
+export function setAttribute(selector: string, name: string): MethodDecorator;
+export function setAttribute(selector: string, name: string, options?: SwcQueryOptions): MethodDecorator;
+export function setAttribute(selector: string, name: string, options: SwcQueryOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
     let metaList = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string | symbol, SetAttributeMetadata>;
@@ -23,7 +27,7 @@ export function setAttribute(selector: string, name: string): MethodDecorator {
       metaList = new Map<string | symbol, SetAttributeMetadata>();
       ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
-    metaList.set(propertyKey, { propertyKey, selector, name });
+    metaList.set(propertyKey, { propertyKey, selector, name, options });
 
     const original = descriptor.value;
     descriptor.value = async function (...args: any[]) {
@@ -34,22 +38,50 @@ export function setAttribute(selector: string, name: string): MethodDecorator {
         const conf = getElementConfig(this);
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
 
-        let targetEl: HTMLElement | null = null;
-        if (selector === ':host' || !selector) targetEl = this as any;
-        else if (selector === ':window') targetEl = currentWin as any;
-        else if (selector === ':document') targetEl = currentWin.document as any;
-        else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
-        else if (selector === ':appHost') targetEl = hostSet.$appHost;
-        else if (selector === ':firstHost') targetEl = hostSet.$firstHost;
-        else if (selector === ':lastHost') targetEl = hostSet.$lastHost;
-        else if (selector === ':firstAppHost') targetEl = hostSet.$firstAppHost;
-        else if (selector === ':lastAppHost') targetEl = hostSet.$lastAppHost;
-        else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        const targetEls: any[] = [];
+        const r = options.root || 'auto';
 
-        if (targetEl) {
-          if (res === null) targetEl.removeAttribute(name);
-          else targetEl.setAttribute(name, String(res));
+        const applyRoot = (t: any) => {
+          if (!t) return;
+          if (r === 'auto') {
+            targetEls.push((t as any).shadowRoot || t);
+            return;
+          }
+          if (r === 'light' || r === 'all') targetEls.push(t);
+          if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
+        };
+
+        if (selector === ':window') targetEls.push(currentWin);
+        else if (selector === ':document') targetEls.push(currentWin.document as any);
+        else if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
+        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
+        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
+        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
+        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
+        else if (selector === ':host' || !selector) applyRoot(this);
+        else {
+          const roots: any[] = [];
+          if (r === 'shadow') {
+            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
+          } else if (r === 'light') {
+            roots.push(this as any);
+          } else if (r === 'all') {
+            roots.push(this as any);
+            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
+          } else {
+            roots.push((this as any).shadowRoot || (this as any));
+          }
+          roots.forEach(root => targetEls.push(...root.querySelectorAll(selector)));
         }
+
+        targetEls.forEach(targetEl => {
+          if (!targetEl || typeof (targetEl as any).setAttribute !== 'function') return;
+          if (res === null) (targetEl as any).removeAttribute(name);
+          else (targetEl as any).setAttribute(name, String(res));
+        })
       }
       return res;
     };
@@ -71,3 +103,11 @@ export const findAllSetAttributeMetadata = (target: any): Map<string | symbol, S
   });
   return result;
 };
+
+/**
+ * @setAttributeHost decorator - simplified version of @setAttribute for :host selector
+ * Usage: @setAttributeHost('aria-disabled')
+ */
+export function setAttributeHost(name: string, options?: SwcQueryOptions): MethodDecorator {
+  return setAttribute(':host', name, options);
+}

package/src/decorators/style.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 

package/src/elements/SwcAppEngine.ts

@@ -1,22 +1,23 @@
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { PathRouter } from '@dooboostore/core-web';
+import { HashRouter } from '@dooboostore/core-web';
 import { ElementRouter } from '../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-import { ConstructorType, Optional } from '@dooboostore/core/types';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+import { Subscription } from '@dooboostore/core';
+import { ConstructorType, OptionalType } from '@dooboostore/core';
+import { FunctionUtils } from '@dooboostore/core';
 import { SwcUtils } from '../utils/Utils';
 
 export type SwcConfigType = {
-  rootRouter: ConstructorType<any> | Symbol;
+  rootRouter: ConstructorType<any> | symbol;
   routeType: 'path' | 'hash' | 'element';
+  connectMode?: 'direct' | 'swap';
   path?: string;
   window: Window;
 };
 
-export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
+export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
 
 export class SwcAppEngine {
   public simpleApplication?: SimpleApplication;
@@ -87,6 +88,7 @@ export class SwcAppEngine {
         // Rendering
         const data = this.simpleApplication.sim(_config.rootRouter);
         if (data instanceof Node) {
+          // console.warn('[SWC-APP-ENGINE] Rendering failed: Root element is not a DocumentFragment.', data);
           if (this.host.shadowRoot) this.host.shadowRoot.replaceChildren(data);
           else this.host.replaceChildren(data);
         }

package/src/elements/SwcAppMixin.ts

@@ -1,7 +1,8 @@
 import { SwcAppEngine, SwcAttributeConfigType } from './SwcAppEngine';
+import {SwcAppInterface} from "../types";
 
 export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
-  return class extends Base {
+  return class extends Base implements SwcAppInterface{
     __swc_engine = new SwcAppEngine(this as any);
 
     get simpleApplication() {
@@ -12,7 +13,38 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     async connect(config?: SwcAttributeConfigType) {
-      await this.__swc_engine.connect(config);
+      const mode = config?.connectMode || 'direct';
+
+      if (mode !== 'swap') {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const parent = this.parentNode;
+      if (!parent) {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const clonedApp = this.cloneNode(true) as any;
+      clonedApp.style.display = 'none';
+      parent.insertBefore(clonedApp, this.nextSibling);
+
+      try {
+        await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
+        if (this.parentNode) {
+          this.parentNode.removeChild(this);
+        }
+        clonedApp.setAttribute('swc-connect-mode', 'swap');
+        clonedApp.style.display = '';
+      } catch (e) {
+        if (clonedApp.parentNode) {
+          clonedApp.parentNode.removeChild(clonedApp);
+        }
+        throw e;
+      }
     }
 
     connectedCallback() {