@dooboostore/simple-web-component 1.0.22 → 1.0.24

package/src/decorators/classList.ts

@@ -1,6 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export const CLASS_LIST_METADATA_KEY = Symbol('simple-web-component:class-list');
 
@@ -10,10 +11,11 @@ export interface ClassListMetadata {
   propertyKey: string | symbol;
   selector: string;
   action: ClassListAction;
+  options: SwcQueryOptions;
 }
 
 function createClassListDecorator(action: ClassListAction) {
-  return (selector: string): MethodDecorator => {
+  return (selector: string, options: SwcQueryOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor) as Map<string | symbol, ClassListMetadata>;
@@ -21,22 +23,60 @@ function createClassListDecorator(action: ClassListAction) {
         metaList = new Map<string | symbol, ClassListMetadata>();
         ReflectUtils.defineMetadata(CLASS_LIST_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);
+          const targetEls: HTMLElement[] = [];
+
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === 'auto') {
+              // Classes belong to the ELEMENT, not the ShadowRoot.
+              targetEls.push(t);
+            } else {
+              if (r === 'light' || r === 'all') targetEls.push(t);
+              if ((r === 'shadow' || r === 'all') && t.shadowRoot) {
+                // Technically ShadowRoot doesn't have classList, but user might have specified it.
+                // We'll skip adding shadowRoot to targetEls for class operations.
+              }
+            }
+          };
+
+          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 {
+            if (r === 'shadow') {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            } else if (r === 'light') {
+              const found = (this as any).querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            } else if (r === 'all') {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = (this as any).querySelectorAll(selector);
+              if (sFound) targetEls.push(...(Array.from(sFound) as HTMLElement[]));
+              if (lFound) targetEls.push(...(Array.from(lFound) as HTMLElement[]));
+            } else {
+              // auto
+              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            }
+          }
 
-          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);
-
-          if (targetEl) {
+          targetEls.forEach(targetEl => {
             if (action === 'set') {
               let classes = '';
               if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
@@ -51,7 +91,7 @@ function createClassListDecorator(action: ClassListAction) {
             } else if (action === 'update') {
               if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
                 Object.entries(res).forEach(([cls, force]) => {
-                  targetEl!.classList.toggle(cls, !!force);
+                  targetEl.classList.toggle(cls, !!force);
                 });
               } else if (res !== undefined && res !== null) {
                 const classes = Array.isArray(res) ? res.map(String) : [String(res)];
@@ -65,9 +105,9 @@ function createClassListDecorator(action: ClassListAction) {
               targetEl.classList.remove(...classes);
             } else if (action === 'toggle') {
               const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-              classes.forEach(c => targetEl!.classList.toggle(c));
+              classes.forEach(c => targetEl.classList.toggle(c));
             }
-          }
+          });
         }
         return res;
       };
@@ -79,31 +119,31 @@ function createClassListDecorator(action: ClassListAction) {
  * @setClassList decorator to surgically replace all classes on a target element.
  * Returns: string | string[]
  */
-export const setClassList = createClassListDecorator('set');
+export const setClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('set')(selector, options);
 
 /**
  * @updateClassList decorator to surgically update specific classes.
  * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
  */
-export const updateClassList = createClassListDecorator('update');
+export const updateClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('update')(selector, options);
 
 /**
  * @addClassList decorator to surgically add classes to a target element.
  * Returns: string | string[]
  */
-export const addClassList = createClassListDecorator('add');
+export const addClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('add')(selector, options);
 
 /**
  * @removeClassList decorator to surgically remove classes from a target element.
  * Returns: string | string[]
  */
-export const removeClassList = createClassListDecorator('remove');
+export const removeClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('remove')(selector, options);
 
 /**
  * @toggleClassList decorator to surgically toggle classes on a target element.
  * Returns: string | string[]
  */
-export const toggleClassList = createClassListDecorator('toggle');
+export const toggleClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(selector, options);
 
 // Host-specific versions (for :host selector)
 
@@ -111,31 +151,76 @@ export const toggleClassList = createClassListDecorator('toggle');
  * @setClassListHost decorator to set classes on :host element.
  * Returns: string | string[]
  */
-export const setClassListHost = createClassListDecorator('set').bind(null, ':host');
+export function setClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function setClassListHost(): MethodDecorator;
+export function setClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function setClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('set')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('set')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @updateClassListHost decorator to update specific classes on :host.
  * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
  */
-export const updateClassListHost = createClassListDecorator('update').bind(null, ':host');
+export function updateClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function updateClassListHost(): MethodDecorator;
+export function updateClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function updateClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('update')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('update')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @addClassListHost decorator to add classes to :host element.
  * Returns: string | string[]
  */
-export const addClassListHost = createClassListDecorator('add').bind(null, ':host');
+export function addClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function addClassListHost(): MethodDecorator;
+export function addClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function addClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('add')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('add')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @removeClassListHost decorator to remove classes from :host element.
  * Returns: string | string[]
  */
-export const removeClassListHost = createClassListDecorator('remove').bind(null, ':host');
+export function removeClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function removeClassListHost(): MethodDecorator;
+export function removeClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function removeClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('remove')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('remove')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @toggleClassListHost decorator to toggle classes on :host element.
  * Returns: string | string[]
  */
-export const toggleClassListHost = createClassListDecorator('toggle').bind(null, ':host');
+export function toggleClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function toggleClassListHost(): MethodDecorator;
+export function toggleClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function toggleClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('toggle')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('toggle')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
   const result = new Map<string | symbol, ClassListMetadata>();

package/src/decorators/elementDefine.ts

@@ -1,8 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { FunctionUtils } from '@dooboostore/core';
-import { getOnConnectedInnerHtmlMetadata } from './onConnectedInnerHtml';
 import { getAddEventListenerMetadata } from './addEventListener';
-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 { 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 './changedAttributeHost';
 import { findAllSetAttributeMetadata } from './setAttribute';

package/src/decorators/index.ts

@@ -8,6 +8,5 @@ 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

@@ -10,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;
@@ -40,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);
+  };
+}
+
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
@@ -47,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;
@@ -110,10 +108,152 @@ export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
 };
 
 /**
- * @hostQuery decorator - simplified version of @query for :host selector
- * Usage: @hostQuery()
- * Usage: @hostQuery({ root: 'shadow' })
+ * @queryHost decorator - simplified version of @query for :host selector
+ * Usage: @queryHost testzzs: HTMLElement | undefined;
+ * Usage: @queryHost() testzzs: HTMLElement | undefined;
+ * Usage: @queryHost({ root: 'shadow' }) testzzs: HTMLElement | undefined;
+ */
+export function queryHost(target: Object, propertyKey: string | symbol): void;
+export function queryHost(): PropertyDecorator;
+export function queryHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  // Direct decorator usage: @queryHost (no parentheses)
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':host', {})(targetOrOptions, propertyKey);
+  }
+
+  // @queryHost() or @queryHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':host', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':host', {});
+  }
+}
+
+/**
+ * @host - Alias for @queryHost decorator
+ * Usage: @host element: HTMLElement | undefined;
+ * Usage: @host() element: HTMLElement | undefined;
+ * Usage: @host({ root: 'shadow' }) element: HTMLElement | undefined;
+ */
+export const host = queryHost;
+
+/**
+ * @parentHost - Query :parentHost (Direct parent SWC component)
+ * Usage: @parentHost parent: HTMLElement | undefined;
+ * Usage: @parentHost() parent: HTMLElement | undefined;
+ * Usage: @parentHost({ root: 'shadow' }) parent: HTMLElement | undefined;
+ */
+export function parentHost(target: Object, propertyKey: string | symbol): void;
+export function parentHost(): PropertyDecorator;
+export function parentHost(options: SwcQueryOptions): PropertyDecorator;
+export function parentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':parentHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':parentHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':parentHost', {});
+  }
+}
+
+/**
+ * @appHost - Query :appHost (Nearest <swc-app>)
+ * Usage: @appHost app: SwcAppInterface | undefined;
+ * Usage: @appHost() app: SwcAppInterface | undefined;
+ * Usage: @appHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function appHost(target: Object, propertyKey: string | symbol): void;
+export function appHost(): PropertyDecorator;
+export function appHost(options: SwcQueryOptions): PropertyDecorator;
+export function appHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':appHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':appHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':appHost', {});
+  }
+}
+
+/**
+ * @firstHost - Query :firstHost (First component in hierarchy)
+ * Usage: @firstHost first: HTMLElement | undefined;
+ * Usage: @firstHost() first: HTMLElement | undefined;
+ * Usage: @firstHost({ root: 'shadow' }) first: HTMLElement | undefined;
+ */
+export function firstHost(target: Object, propertyKey: string | symbol): void;
+export function firstHost(): PropertyDecorator;
+export function firstHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstHost', {});
+  }
+}
+
+/**
+ * @lastHost - Query :lastHost (Last component in hierarchy)
+ * Usage: @lastHost last: HTMLElement | undefined;
+ * Usage: @lastHost() last: HTMLElement | undefined;
+ * Usage: @lastHost({ root: 'shadow' }) last: HTMLElement | undefined;
+ */
+export function lastHost(target: Object, propertyKey: string | symbol): void;
+export function lastHost(): PropertyDecorator;
+export function lastHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastHost', {});
+  }
+}
+
+/**
+ * @firstAppHost - Query :firstAppHost (First <swc-app> in hierarchy)
+ * Usage: @firstAppHost app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost() app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function firstAppHost(target: Object, propertyKey: string | symbol): void;
+export function firstAppHost(): PropertyDecorator;
+export function firstAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstAppHost', {});
+  }
+}
+
+/**
+ * @lastAppHost - Query :lastAppHost (Last <swc-app> in hierarchy)
+ * Usage: @lastAppHost app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost() app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
  */
-export function queryHost(options?: SwcQueryOptions): PropertyDecorator {
-  return query(':host', options);
+export function lastAppHost(target: Object, propertyKey: string | symbol): void;
+export function lastAppHost(): PropertyDecorator;
+export function lastAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastAppHost', {});
+  }
 }

package/src/decorators/queryAll.ts

@@ -113,6 +113,152 @@ export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined
  * Usage: @hostQueryAll()
  * Usage: @hostQueryAll({ root: 'shadow' })
  */
-export function queryAllHost(options?: SwcQueryOptions): PropertyDecorator {
-  return queryAll(':host', options);
+/**
+ * @queryAllHost decorator - simplified version of @queryAll for :host selector
+ * Usage: @queryAllHost items: HTMLElement[];
+ * Usage: @queryAllHost() items: HTMLElement[];
+ * Usage: @queryAllHost({ root: 'shadow' }) items: HTMLElement[];
+ */
+export function queryAllHost(target: Object, propertyKey: string | symbol): void;
+export function queryAllHost(): PropertyDecorator;
+export function queryAllHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryAllHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  // Direct decorator usage: @queryAllHost (no parentheses)
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':host', {})(targetOrOptions, propertyKey);
+  }
+
+  // @queryAllHost() or @queryAllHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':host', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':host', {});
+  }
+}
+
+/**
+ * @allHost - Alias for @queryAllHost decorator
+ * Usage: @allHost items: HTMLElement[];
+ * Usage: @allHost() items: HTMLElement[];
+ * Usage: @allHost({ root: 'shadow' }) items: HTMLElement[];
+ */
+export const allHost = queryAllHost;
+/**
+ * @allParentHost - Query all :parentHost (All parent SWC components)
+ * Usage: @allParentHost parents: HTMLElement[];
+ * Usage: @allParentHost() parents: HTMLElement[];
+ * Usage: @allParentHost({ root: 'shadow' }) parents: HTMLElement[];
+ */
+export function allParentHost(target: Object, propertyKey: string | symbol): void;
+export function allParentHost(): PropertyDecorator;
+export function allParentHost(options: SwcQueryOptions): PropertyDecorator;
+export function allParentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':parentHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':parentHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':parentHost', {});
+  }
+}
+
+/**
+ * @allAppHost - Query all :appHost (All <swc-app> instances)
+ * Usage: @allAppHost apps: SwcAppInterface[];
+ * Usage: @allAppHost() apps: SwcAppInterface[];
+ * Usage: @allAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allAppHost(target: Object, propertyKey: string | symbol): void;
+export function allAppHost(): PropertyDecorator;
+export function allAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':appHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':appHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':appHost', {});
+  }
+}
+
+/**
+ * @allFirstHost - Query all :firstHost (All first components in hierarchy)
+ * Usage: @allFirstHost firsts: HTMLElement[];
+ * Usage: @allFirstHost() firsts: HTMLElement[];
+ * Usage: @allFirstHost({ root: 'shadow' }) firsts: HTMLElement[];
+ */
+export function allFirstHost(target: Object, propertyKey: string | symbol): void;
+export function allFirstHost(): PropertyDecorator;
+export function allFirstHost(options: SwcQueryOptions): PropertyDecorator;
+export function allFirstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':firstHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':firstHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':firstHost', {});
+  }
+}
+
+/**
+ * @allLastHost - Query all :lastHost (All last components in hierarchy)
+ * Usage: @allLastHost lasts: HTMLElement[];
+ * Usage: @allLastHost() lasts: HTMLElement[];
+ * Usage: @allLastHost({ root: 'shadow' }) lasts: HTMLElement[];
+ */
+export function allLastHost(target: Object, propertyKey: string | symbol): void;
+export function allLastHost(): PropertyDecorator;
+export function allLastHost(options: SwcQueryOptions): PropertyDecorator;
+export function allLastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':lastHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':lastHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':lastHost', {});
+  }
 }
+
+/**
+ * @allFirstAppHost - Query all :firstAppHost (All first <swc-app> in hierarchy)
+ * Usage: @allFirstAppHost apps: SwcAppInterface[];
+ * Usage: @allFirstAppHost() apps: SwcAppInterface[];
+ * Usage: @allFirstAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allFirstAppHost(target: Object, propertyKey: string | symbol): void;
+export function allFirstAppHost(): PropertyDecorator;
+export function allFirstAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allFirstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':firstAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':firstAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':firstAppHost', {});
+  }
+}
+
+/**
+ * @allLastAppHost - Query all :lastAppHost (All last <swc-app> in hierarchy)
+ * Usage: @allLastAppHost apps: SwcAppInterface[];
+ * Usage: @allLastAppHost() apps: SwcAppInterface[];
+ * Usage: @allLastAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allLastAppHost(target: Object, propertyKey: string | symbol): void;
+export function allLastAppHost(): PropertyDecorator;
+export function allLastAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allLastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':lastAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':lastAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':lastAppHost', {});
+  }
+}

package/src/decorators/setAttribute.ts

@@ -44,11 +44,12 @@ export function setAttribute(selector: string, name: string, options: SwcQueryOp
         const applyRoot = (t: any) => {
           if (!t) return;
           if (r === 'auto') {
-            targetEls.push((t as any).shadowRoot || t);
-            return;
+            // Attributes belong to the ELEMENT, not the ShadowRoot.
+            targetEls.push(t);
+          } else {
+            if (r === 'light' || r === 'all') targetEls.push(t);
+            if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
           }
-          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);
@@ -81,7 +82,7 @@ export function setAttribute(selector: string, name: string, options: SwcQueryOp
           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;
     };