@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/src/decorators/applyAttribute.ts

@@ -1,46 +1,33 @@
 import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
-import {SwcQueryOptions, HelperHostSet} from '../types';
+import {SwcQueryOptions, HelperHostSet, SwcFnSelector, SwcSelector} from '../types';
 import {ConvertUtils} from '@dooboostore/core-web';
 
 // ============================================
 // Types & Interfaces
 // ============================================
 
-export interface AttributeOptions extends SwcQueryOptions {
+// 공통 옵션 — root 없음
+export interface AttributeBaseOptions {
   name?: string;
   type?: typeof Number | typeof Boolean | typeof String;
   filter?: (target: HTMLElement, value: any, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
-  /**
-   * Custom key to extract value from return object.
-   * If not provided, uses ATTRIBUTE_METADATA_KEY by default.
-   * Useful when multiple @setAttribute decorators are on the same method.
-   * 
-   * Example:
-   * @setAttribute('selector1', { valueKey: 'attr1' })
-   * @setAttribute('selector2', { valueKey: 'attr2' })
-   * myMethod() {
-   *   return {
-   *     attr1: 'value1',
-   *     attr2: 'value2'
-   *   };
-   * }
-   * 
-   * Or with symbols:
-   * @setAttribute('selector1', { valueKey: Symbol.for('attr1') })
-   * @setAttribute('selector2', { valueKey: Symbol.for('attr2') })
-   * myMethod() {
-   *   return {
-   *     [Symbol.for('attr1')]: 'value1',
-   *     [Symbol.for('attr2')]: 'value2'
-   *   };
-   * }
-   */
   valueKey?: symbol | string;
 }
 
-export type AttributeSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+// 문자열 셀렉터 전용 — root 허용 (컴포넌트 DOM 트리 안에서 탐색)
+export type AttributeQueryOptions = AttributeBaseOptions & SwcQueryOptions;
+// 함수 셀렉터 전용 — root 금지 (이미 요소를 직접 반환)
+export type AttributeNonQueryOptions = AttributeBaseOptions;
+// 내부 저장/해석용 — root optional이라 두 종류 모두 저장 가능
+export type AttributeOptions = AttributeQueryOptions;
+
+export type AttributeFnSelector = SwcFnSelector;
+export type AttributeSelector = SwcSelector;
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type AttributeOptionsOf<S extends AttributeSelector> = S extends string ? AttributeQueryOptions : AttributeNonQueryOptions;
 
 export interface AttributeMetadata {
   propertyKey: string | symbol;
@@ -143,7 +130,7 @@ export const resolveAttributeTargets = (inst: any, selector: AttributeSelector,
   const results: HTMLElement[] = [];
 
   // Resolve selector if it's a function
-  let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+  let resolvedSelector: string | Node | Element | NodeList | Element[] | null = selector as any;
   if (typeof selector === 'function') {
     const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
     resolvedSelector = selector(inst, hostSet);
@@ -223,9 +210,9 @@ export const resolveAttributeTargets = (inst: any, selector: AttributeSelector,
  * - @applyAttribute((this, helper) => 'selector', 'attrName') - Function-based selector
  * - Return null to remove attribute
  */
-export function applyAttribute(selector: AttributeSelector, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: AttributeSelector, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: AttributeSelector, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
+export function applyAttribute<S extends AttributeSelector>(selector: S, targetAttributeName: string, options?: AttributeOptionsOf<S>): MethodDecorator & PropertyDecorator;
+export function applyAttribute<S extends AttributeSelector>(selector: S, options?: AttributeOptionsOf<S>): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: AttributeSelector, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     // ensureInit(target as any);
 
@@ -383,8 +370,9 @@ export function applyAttribute(selector: AttributeSelector, targetAttributeNameO
  */
 export function attribute(target: Object, propertyKey: string | symbol):  void;
 export function attribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function attribute(attributeName: string, options?: AttributeOptions): PropertyDecorator;
-export function attribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): PropertyDecorator;
+export function attribute(attributeName: string, options?: AttributeQueryOptions): PropertyDecorator;
+export function attribute(selector: string, attributeName: string, options?: AttributeQueryOptions): PropertyDecorator;
+export function attribute(selector: AttributeFnSelector, attributeName: string, options?: AttributeNonQueryOptions): PropertyDecorator;
 export function attribute(selectorOrAttributeOrTarget?: AttributeSelector | Object, attributeNameOrOptions?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @attribute
   if (optionsOrDescriptor !== undefined && (typeof attributeNameOrOptions === 'string' || typeof attributeNameOrOptions === 'symbol')) {
@@ -434,9 +422,14 @@ export function attribute(selectorOrAttributeOrTarget?: AttributeSelector | Obje
  *   return 'active';
  * }
  */
-export function setAttribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): MethodDecorator;
-export function setAttribute(attributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(selector: string, attributeName: string, options?: AttributeQueryOptions): MethodDecorator;
+export function setAttribute(selector: AttributeFnSelector, attributeName: string, options?: AttributeNonQueryOptions): MethodDecorator;
+export function setAttribute(attributeName: string, options?: AttributeQueryOptions): MethodDecorator;
 export function setAttribute(selectorOrAttributeOrOptions?: AttributeSelector | AttributeOptions, attributeNameOrOptions?: any, optionsOrUndefined?: AttributeOptions): MethodDecorator {
+  // Function selector: @setAttribute((c, helper) => ..., 'attr', options?)
+  if (typeof selectorOrAttributeOrOptions === 'function') {
+    return applyAttribute(selectorOrAttributeOrOptions as AttributeSelector, attributeNameOrOptions as any, optionsOrUndefined as AttributeOptions) as MethodDecorator;
+  }
   // With string as first parameter
   if (typeof selectorOrAttributeOrOptions === 'string') {
     // Check if first parameter is a CSS selector or attribute name
@@ -477,5 +470,26 @@ export const findAllAttributeApplyMetadata = (target: any): Map<string | symbol,
   return result;
 };
 
+// ─── Aliases ───
+// attribute(필드) / setAttribute(메서드)와 구분되는 일반 데코레이터 단축명
+export const attr = applyAttribute;
+
+// ─── 편의 헬퍼 (selector/root 생략) ───
+
+export function attrThis(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator {
+  return applyAttribute('$this', targetAttributeName, options);
+}
+export function attrAppHost(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator {
+  return applyAttribute('$appHost', targetAttributeName, options);
+}
+export function attrLight(selector: string, targetAttributeName?: string, options?: Omit<AttributeQueryOptions, 'root'>): MethodDecorator {
+  return applyAttribute(selector, targetAttributeName, {...options ?? {}, root: 'light'});
+}
+export function attrShadow(selector: string, targetAttributeName?: string, options?: Omit<AttributeQueryOptions, 'root'>): MethodDecorator {
+  return applyAttribute(selector, targetAttributeName, {...options ?? {}, root: 'shadow'});
+}
+export function attrAll(selector: string, targetAttributeName?: string, options?: Omit<AttributeQueryOptions, 'root'>): MethodDecorator {
+  return applyAttribute(selector, targetAttributeName, {...options ?? {}, root: 'all'});
+}
 
 export default applyAttribute;

package/src/decorators/applyClass.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
 
 export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 
@@ -28,6 +28,9 @@ const resolveSelector = (selector: ClassSelector, inst: any, win: Window): strin
     if (result === null) {
       return [];
     }
+    if (result instanceof win.Node) {
+      return [];
+    }
     return result as string;
   }
   return selector as string;
@@ -74,17 +77,24 @@ const getTargetElements = (selector: ClassSelector, inst: any, win: Window, root
   return targetEls;
 };
 
-export interface ClassApplyOptions extends SwcQueryOptions {
+// 공통 옵션 — root 없음
+export interface ClassBaseOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
-  /**
-   * Custom key to extract value from return object.
-   * If not provided, uses CLASS_METADATA_KEY by default.
-   * Useful when multiple @applyClass decorators are on the same method.
-   */
   valueKey?: symbol | string;
 }
 
-export type ClassSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+// 문자열 셀렉터 전용 — root 허용 (classMapOrOptions 판별을 위해 root 필요)
+export type ClassQueryOptions = ClassBaseOptions & SwcQueryOptions;
+// 함수 셀렉터 전용 — root 금지. 단, classMapOrOptions의 options 자리에 올 수 없음(root가 없어 classMap과 판별 불가)
+export type ClassNonQueryOptions = ClassBaseOptions;
+export type ClassApplyOptions = ClassQueryOptions;
+
+export type ClassFnSelector = SwcFnSelector;
+export type ClassSelector = SwcSelector;
+export type ClassMapType = { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean };
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type ClassOptionsOf<S extends ClassSelector> = S extends string ? ClassQueryOptions : ClassNonQueryOptions;
 
 export interface ClassApplyMetadata {
   propertyKey: string | symbol;
@@ -210,14 +220,15 @@ function createClassDecorator(action: ClassAction) {
 }
 
 export function applyClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function applyClass(selector: ClassSelector, action?: ClassAction, options?: ClassApplyOptions): MethodDecorator;
+export function applyClass(selector: string, action?: ClassAction, options?: ClassQueryOptions): MethodDecorator;
+export function applyClass(selector: ClassFnSelector, action?: ClassAction, options?: ClassNonQueryOptions): MethodDecorator;
 export function applyClass(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @applyClass
-  if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
     return createClassDecorator('update')('$this', {})(selectorOrTarget as Object, actionOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     const action = (typeof actionOrPropertyKey === 'string' ? actionOrPropertyKey : 'update') as ClassAction;
     const options = (typeof actionOrPropertyKey === 'object' ? actionOrPropertyKey : optionsOrDescriptor) as ClassApplyOptions | undefined;
     return createClassDecorator(action)(selectorOrTarget, options);
@@ -229,14 +240,15 @@ export function applyClass(selectorOrTarget?: any, actionOrPropertyKey?: any, op
 }
 
 export function setClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function setClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function setClass(selector: string, classMapOrOptions?: string | ClassMapType | ClassQueryOptions, options?: ClassQueryOptions): MethodDecorator;
+export function setClass(selector: ClassFnSelector, classMap: string | ClassMapType): MethodDecorator;
 export function setClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @setClass
-  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
     return createClassDecorator('set')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createClassDecorator('set')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -244,14 +256,15 @@ export function setClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?
 }
 
 export function updateClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function updateClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function updateClass(selector: string, classMapOrOptions?: string | ClassMapType | ClassQueryOptions, options?: ClassQueryOptions): MethodDecorator;
+export function updateClass(selector: ClassFnSelector, classMap: string | ClassMapType): MethodDecorator;
 export function updateClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @updateClass
-  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
     return createClassDecorator('update')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createClassDecorator('update')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -259,14 +272,15 @@ export function updateClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyK
 }
 
 export function addClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function addClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function addClass(selector: string, classMapOrOptions?: string | ClassMapType | ClassQueryOptions, options?: ClassQueryOptions): MethodDecorator;
+export function addClass(selector: ClassFnSelector, classMap: string | ClassMapType): MethodDecorator;
 export function addClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @addClass
-  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
     return createClassDecorator('add')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createClassDecorator('add')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -274,14 +288,15 @@ export function addClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?
 }
 
 export function removeClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function removeClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function removeClass(selector: string, classMapOrOptions?: string | ClassMapType | ClassQueryOptions, options?: ClassQueryOptions): MethodDecorator;
+export function removeClass(selector: ClassFnSelector, classMap: string | ClassMapType): MethodDecorator;
 export function removeClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @removeClass
-  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
     return createClassDecorator('remove')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createClassDecorator('remove')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -289,20 +304,55 @@ export function removeClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyK
 }
 
 export function toggleClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function toggleClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function toggleClass(selector: string, classMapOrOptions?: string | ClassMapType | ClassQueryOptions, options?: ClassQueryOptions): MethodDecorator;
+export function toggleClass(selector: ClassFnSelector, classMap: string | ClassMapType): MethodDecorator;
 export function toggleClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @toggleClass
-  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
     return createClassDecorator('toggle')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createClassDecorator('toggle')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
   }
   // Without selector (defaults to $this)
   return createClassDecorator('toggle')('$this', selectorOrTarget as ClassApplyOptions);
 }
 
+// ─── Aliases ───
+// class는 예약어라 cls 사용
+export const cls = applyClass;
+
+// ─── 편의 헬퍼 (selector/root 생략) ───
+
+export function clsThis(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator {
+  return applyClass('$this', action, options);
+}
+export function clsAppHost(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator {
+  return applyClass('$appHost', action, options);
+}
+export function clsLight(selector: string, action?: ClassAction, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsLight(selector: string, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsLight(selector: string, actionOrOptions?: ClassAction | Omit<ClassQueryOptions, 'root'>, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as ClassAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<ClassQueryOptions, 'root'> | undefined;
+  return applyClass(selector, action, {...opts ?? {}, root: 'light'});
+}
+export function clsShadow(selector: string, action?: ClassAction, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsShadow(selector: string, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsShadow(selector: string, actionOrOptions?: ClassAction | Omit<ClassQueryOptions, 'root'>, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as ClassAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<ClassQueryOptions, 'root'> | undefined;
+  return applyClass(selector, action, {...opts ?? {}, root: 'shadow'});
+}
+export function clsAll(selector: string, action?: ClassAction, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsAll(selector: string, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
+export function clsAll(selector: string, actionOrOptions?: ClassAction | Omit<ClassQueryOptions, 'root'>, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as ClassAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<ClassQueryOptions, 'root'> | undefined;
+  return applyClass(selector, action, {...opts ?? {}, root: 'all'});
+}
+
 export const findAllClassMetadata = (target: any): Map<string | symbol, ClassApplyMetadata> => {
   const result = new Map<string | symbol, ClassApplyMetadata>();
   const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ClassApplyMetadata>>(CLASS_METADATA_KEY, target);