@dooboostore/simple-web-component 1.0.21 → 1.0.23

package/src/decorators/elementDefine.ts

@@ -1,15 +1,10 @@
 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, getOnConnectedInnerHtmlMetadata } 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';
@@ -47,6 +42,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);
+    }
   }
 };
 
@@ -160,7 +161,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);
@@ -181,13 +184,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,
@@ -220,7 +229,9 @@ 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);
 
@@ -228,7 +239,7 @@ export const elementDefine =
     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), ...attributeList.map(it => it.options.name || String(it.propertyKey)), ...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) || [];
 
@@ -256,29 +267,19 @@ export const elementDefine =
       // Initialize @attribute fields (DOM <-> JS Sync)
       attributeList.forEach(meta => {
         const attrName = meta.options.name || String(meta.propertyKey);
-        if (meta.options.connectedInitialize) {
-          // JS -> DOM (FORCE OVERWRITE)
-          const memoryVal = (this as any)[meta.privateKey];
-          if (memoryVal !== undefined) {
-            (this as any).__swc_syncing_init = true;
-            try {
+        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 if (meta.selector === ':host' || !meta.selector) {
-          // DOM -> JS (Pull from HTML)
-          const domVal = this.getAttribute(attrName);
-          if (domVal !== null) {
-            (this as any).__swc_syncing_init = true;
-            try {
-              (this as any)[meta.propertyKey] = domVal; // Update memory with DOM value
-            } finally {
-              (this as any).__swc_syncing_init = false;
             }
+          } finally {
+            (this as any).__swc_syncing_init = false;
           }
         }
+        // else: Do NOT sync - Keep the default value from class initialization
       });
 
       if (connectedInnerHtmlList.length > 0) {
@@ -303,7 +304,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[] = [];
@@ -329,34 +399,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);
@@ -378,7 +421,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) {
@@ -387,6 +430,24 @@ 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);
@@ -446,20 +507,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

@@ -4,7 +4,6 @@ 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,14 +1,12 @@
 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';
-export * from './onConnectedInnerHtml';
 export * from './classList';
 export * from './style';

package/src/decorators/lifecycles.ts

@@ -1,7 +1,8 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttribute';
+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');
@@ -9,9 +10,19 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:o
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
+export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
+export interface InnerHtmlOptions {
+  useShadow?: boolean;
+}
+
+export interface InnerHtmlMetadata {
+  propertyKey: string | symbol;
+  options: InnerHtmlOptions;
+}
+
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
@@ -24,6 +35,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;
@@ -38,6 +50,31 @@ export const onAdopted = onAfterAdopted;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
+/**
+ * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
+ */
+export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
+export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    return decorator({}, arg1!, arg2);
+  }
+
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
+  };
+}
+
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
@@ -45,3 +82,8 @@ export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, m
   const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
   return results.length > 0 ? (results as unknown as T) : undefined;
 };
+
+export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+};

package/src/decorators/query.ts

@@ -3,8 +3,6 @@ import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 import { SpecialSelector, SwcQueryOptions } from '../types';
 
-export type QueryOptions = { root?: 'light' | 'shadow' | 'all' | 'auto' };
-
 export interface QueryMetadata {
   propertyKey: string | symbol;
   selector: string;
@@ -108,3 +106,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

@@ -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

@@ -103,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,19 +1,24 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export type StyleAction = 'set' | 'update' | 'remove';
 
+export interface StyleOptions extends SwcQueryOptions {
+}
+
 export interface StyleMetadata {
   propertyKey: string | symbol;
   selector: string;
   action: StyleAction;
+  options: StyleOptions;
 }
 
 export const STYLE_METADATA_KEY = Symbol('simple-web-component:style');
 
 function createStyleDecorator(action: StyleAction) {
-  return (selector: string): MethodDecorator => {
+  return (selector: string, options: StyleOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleMetadata>;
@@ -21,21 +26,43 @@ function createStyleDecorator(action: StyleAction) {
         metaList = new Map<string | symbol, StyleMetadata>();
         ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
       }
-      metaList.set(propertyKey, { propertyKey, selector, action });
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
 
       const original = descriptor.value;
       descriptor.value = async function (...args: any[]) {
         ensureInit(this);
         const res = await original.apply(this, args);
         if (res !== undefined) {
+          const r = options.root || 'auto';
           const hostSet = SwcUtils.getHostSet(this as any);
-          let targetEl: HTMLElement | null = null;
-          if (selector === ':host' || !selector) targetEl = this as any;
-          else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
-          else if (selector === ':appHost') targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+          const targetEls: HTMLElement[] = [];
+
+          if (selector === ':host' || !selector) {
+            targetEls.push(this as any);
+          } else if (selector === ':parentHost') {
+            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
+          } else if (selector === ':appHost') {
+            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
+          } else {
+            if (r === 'shadow') {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === 'light') {
+              const found = (this as any).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === 'all') {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = (this as any).querySelectorAll(selector);
+              if (sFound) targetEls.push(...sFound);
+              if (lFound) targetEls.push(...lFound);
+            } else {
+              // auto
+              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
 
-          if (targetEl) {
+          targetEls.forEach(targetEl => {
             if (action === 'set') {
               targetEl.style.cssText = '';
               if (typeof res === 'object' && res !== null) {
@@ -49,9 +76,9 @@ function createStyleDecorator(action: StyleAction) {
               }
             } else if (action === 'remove') {
               const props = Array.isArray(res) ? res : [res];
-              props.forEach(p => targetEl!.style.removeProperty(String(p)));
+              props.forEach(p => targetEl.style.removeProperty(String(p)));
             }
-          }
+          });
         }
         return res;
       };
@@ -62,20 +89,44 @@ function createStyleDecorator(action: StyleAction) {
 /**
  * @setStyle decorator to surgically set styles on a target element (replaces all existing styles).
  * Usage: @setStyle('#box') getStyles() { return { color: 'red', display: 'block' }; }
+ * Usage: @setStyle('#box', { root: 'shadow' }) getStyles() { return { color: 'red' }; }
  */
-export const setStyle = createStyleDecorator('set');
+export const setStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('set')(selector, options);
+
+/**
+ * @setStyleHost decorator - simplified version of @setStyle for :host selector.
+ * Usage: @setStyleHost getStyles() { return { color: 'red', display: 'block' }; }
+ * Usage: @setStyleHost({ root: 'shadow' }) getStyles() { return { color: 'red' }; }
+ */
+export const setStyleHost = (options: StyleOptions = {}) => createStyleDecorator('set')(':host', options);
 
 /**
  * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
  * Usage: @updateStyle('#box') updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyle('#box', { root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
+ */
+export const updateStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('update')(selector, options);
+
+/**
+ * @updateStyleHost decorator - simplified version of @updateStyle for :host selector.
+ * Usage: @updateStyleHost updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyleHost({ root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
  */
-export const updateStyle = createStyleDecorator('update');
+export const updateStyleHost = (options: StyleOptions = {}) => createStyleDecorator('update')(':host', options);
 
 /**
  * @removeStyle decorator to surgically remove styles from a target element.
  * Usage: @removeStyle('#box') clearStyles() { return ['color', 'display']; }
+ * Usage: @removeStyle('#box', { root: 'shadow' }) clearStyles() { return ['color']; }
+ */
+export const removeStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('remove')(selector, options);
+
+/**
+ * @removeStyleHost decorator - simplified version of @removeStyle for :host selector.
+ * Usage: @removeStyleHost clearStyles() { return ['color', 'display']; }
+ * Usage: @removeStyleHost({ root: 'shadow' }) clearStyles() { return ['color']; }
  */
-export const removeStyle = createStyleDecorator('remove');
+export const removeStyleHost = (options: StyleOptions = {}) => createStyleDecorator('remove')(':host', options);
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
   const result = new Map<string | symbol, StyleMetadata>();

package/src/elements/SwcAppEngine.ts

@@ -88,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() {

package/src/elements/SwcAsync.ts

@@ -1,4 +1,4 @@
-import { changedAttribute } from '../decorators/changedAttribute';
+import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils } from '@dooboostore/core';
 
@@ -28,7 +28,7 @@ export class SwcAsync extends HTMLTemplateElement {
     FunctionUtils.execute({ script, context: this, args });
   }
 
-  @changedAttribute('on-get-value')
+  @changedAttributeHost('on-get-value')
   private refresh() {
     const script = this.getAttribute('on-get-value');
     if (!script) return;