@dooboostore/simple-web-component 1.0.35 → 1.0.36

package/src/decorators/query.ts

@@ -30,8 +30,6 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
     }
     queries.push({ propertyKey, selector: selectorOrTarget, options });
 
-    // const propertyType = Reflect.getMetadata("design:type", targetObj, propertyKey);
-    // console.log(`Property ${String(propertyKey)} type is:`, propertyType.name);
     Object.defineProperty(targetObj, propertyKey, {
       get(this: HTMLElement) {
         ensureInit(this);
@@ -43,25 +41,26 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
           if (r === 'auto') return t.shadowRoot || t;
           if (r === 'shadow') return t.shadowRoot;
           if (r === 'light') return t;
-          if (r === 'all') return t.shadowRoot || t; // query only returns one, so shadow preferred
+          if (r === 'all') return t.shadowRoot || t; 
           return t;
         };
 
         // --- Special Selectors: HostSet ---
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ':parentHost') return applyRoot(hostSet.$parentHost);
-        if (selector === ':appHost') return applyRoot(hostSet.$appHost);
-        if (selector === ':firstHost') return applyRoot(hostSet.$firstHost);
-        if (selector === ':lastHost') return applyRoot(hostSet.$lastHost);
-        if (selector === ':firstAppHost') return applyRoot(hostSet.$firstAppHost);
-        if (selector === ':lastAppHost') return applyRoot(hostSet.$lastAppHost);
+        if (selector === '$this') return applyRoot(this);
+        if (selector === '$host') return applyRoot(hostSet.$host);
+        if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+        if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
+        if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
 
         // --- Special Selectors: Env ---
         const config = getElementConfig(this);
         const win = config?.window || window;
-        if (selector === ':window') return win;
-        if (selector === ':document') return win.document;
-        if (selector === ':host') return applyRoot(this);
+        if (selector === '$window') return win;
+        if (selector === '$document') return win.document;
 
         // --- Standard Selectors ---
         if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
@@ -76,7 +75,7 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
         ensureInit(this);
         if (nv === null || nv === undefined) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(':') && selector !== ':host') return;
+          if (selector.startsWith('$') && selector !== '$this') return;
 
           const r = options.root || 'auto';
           const targets: Element[] = [];
@@ -103,157 +102,85 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
 }
 
 /**
- * @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;
+ * @queryThis decorator - simplified version of @query for $this selector
  */
-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 {
+export function queryThis(target: Object, propertyKey: string | symbol): void;
+export function queryThis(): PropertyDecorator;
+export function queryThis(options: SwcQueryOptions): PropertyDecorator;
+export function queryThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':parentHost', {})(targetOrOptions, propertyKey);
+    return query('$this', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':parentHost', targetOrOptions as SwcQueryOptions);
+    return query('$this', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':parentHost', {});
+    return query('$this', {});
   }
 }
 
-/**
- * @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 {
+export function queryWindow(target: Object, propertyKey: string | symbol): void;
+export function queryWindow(): PropertyDecorator;
+export function queryWindow(options: SwcQueryOptions): PropertyDecorator;
+export function queryWindow(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':firstHost', {})(targetOrOptions, propertyKey);
+    return query('$window', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':firstHost', targetOrOptions as SwcQueryOptions);
+    return query('$window', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':firstHost', {});
+    return query('$window', {});
   }
 }
 
-/**
- * @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 {
+export function queryDocument(target: Object, propertyKey: string | symbol): void;
+export function queryDocument(): PropertyDecorator;
+export function queryDocument(options: SwcQueryOptions): PropertyDecorator;
+export function queryDocument(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':lastHost', {})(targetOrOptions, propertyKey);
+    return query('$document', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':lastHost', targetOrOptions as SwcQueryOptions);
+    return query('$document', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':lastHost', {});
+    return query('$document', {});
   }
 }
-
 /**
- * @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;
+ * @host - Query $host (Direct parent SWC component)
  */
-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 {
+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 {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':firstAppHost', {})(targetOrOptions, propertyKey);
+    return query('$host', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':firstAppHost', targetOrOptions as SwcQueryOptions);
+    return query('$host', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':firstAppHost', {});
+    return query('$host', {});
   }
 }
 
 /**
- * @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;
+ * @appHost - Query $appHost (Nearest <swc-app>)
  */
-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 {
+export function queryAppHost(target: Object, propertyKey: string | symbol): void;
+export function queryAppHost(): PropertyDecorator;
+export function queryAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':lastAppHost', {})(targetOrOptions, propertyKey);
+    return query('$appHost', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':lastAppHost', targetOrOptions as SwcQueryOptions);
+    return query('$appHost', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':lastAppHost', {});
+    return query('$appHost', {});
   }
 }
 
 export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
-};
+};

package/src/decorators/queryAll.ts

@@ -56,15 +56,22 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
 
         // --- Special Selectors: HostSet ---
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ':hosts') return applyRoot(hostSet.$hosts);
-        if (selector === ':appHosts') return applyRoot(hostSet.$appHosts);
+        if (selector === '$hosts') return applyRoot(hostSet.$hosts);
+        if (selector === '$appHosts') return applyRoot(hostSet.$appHosts);
+        if (selector === '$host') return applyRoot(hostSet.$host);
+        if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+        if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
+        if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
 
         // --- Special Selectors: Env ---
         const config = getElementConfig(this);
         const win = config?.window || window;
-        if (selector === ':window') return [win];
-        if (selector === ':document') return [win.document];
-        if (selector === ':host') return applyRoot(this);
+        if (selector === '$window') return [win];
+        if (selector === '$document') return [win.document];
+        if (selector === '$this') return applyRoot(this);
 
         // --- Standard Selectors ---
         if (r === 'shadow') return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
@@ -81,7 +88,7 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
         ensureInit(this);
         if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(':') && selector !== ':host') return;
+          if (selector.startsWith('$') && selector !== '$this') return;
 
           const r = options.root || 'auto';
           let targets: (Element | Node)[] = [];
@@ -102,164 +109,60 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
     });
   };
 }
+
 /**
- * @hostQueryAll decorator - simplified version of @queryAll for :host selector
- * Usage: @hostQueryAll()
- * Usage: @hostQueryAll({ root: 'shadow' })
- */
-/**
- * @queryAllHost decorator - simplified version of @queryAll for :host selector
- * Usage: @queryAllHost items: HTMLElement[];
- * Usage: @queryAllHost() items: HTMLElement[];
- * Usage: @queryAllHost({ root: 'shadow' }) items: HTMLElement[];
+ * @queryAllThis decorator - simplified version of @queryAll for $this selector
  */
-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)
+export function queryAllThis(target: Object, propertyKey: string | symbol): void;
+export function queryAllThis(): PropertyDecorator;
+export function queryAllThis(options: SwcQueryOptions): PropertyDecorator;
+export function queryAllThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':host', {})(targetOrOptions, propertyKey);
+    return queryAll('$this', {})(targetOrOptions, propertyKey);
   }
 
-  // @queryAllHost() or @queryAllHost(options)
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':host', targetOrOptions as SwcQueryOptions);
+    return queryAll('$this', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':host', {});
+    return queryAll('$this', {});
   }
 }
 
 /**
- * @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[];
+ * @allParentHost - Query all parent SWC components
  */
 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);
+    return queryAll('$host', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':parentHost', targetOrOptions as SwcQueryOptions);
+    return queryAll('$host', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':parentHost', {});
+    return queryAll('$host', {});
   }
 }
 
 /**
- * @allAppHost - Query all :appHost (All <swc-app> instances)
- * Usage: @allAppHost apps: SwcAppInterface[];
- * Usage: @allAppHost() apps: SwcAppInterface[];
- * Usage: @allAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ * @allAppHost - Query all $appHost (All <swc-app> instances)
  */
 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);
+    return queryAll('$appHost', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':firstHost', targetOrOptions as SwcQueryOptions);
+    return queryAll('$appHost', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':firstHost', {});
+    return queryAll('$appHost', {});
   }
 }
 
-/**
- * @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', {});
-  }
-}
-
-
 export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
 };
-

package/src/decorators/setProperty.ts

@@ -56,15 +56,16 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
             targetEls.push(t);
           };
 
-          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(host);
+          if (selector === '$this' || !selector) applyRoot(host);
+          else if (selector === '$host') applyRoot(hostSet.$host);
+          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 {
             const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
             if (targetRoot) {
@@ -106,6 +107,6 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
   };
 };
 
-export const setPropertyHost = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
-  return setProperty(':host', propertyNameOrOptions, options);
+export const setPropertyThis = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
+  return setProperty('$this', propertyNameOrOptions, options);
 };

package/src/elements/SwcAsync.ts

@@ -1,15 +1,15 @@
-import { changedAttributeHost } from '../decorators/changedAttributeHost';
+import { changedAttributeThis } from '../decorators/changedAttributeThis';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { ConvertUtils } from '@dooboostore/core-web';
-import { attributeHost } from '../decorators';
+import { attributeThis } from '../decorators';
 
 class SwcAsync extends HTMLTemplateElement {
-  @attributeHost('value')
+  @attributeThis('value')
   _value: any;
-  @attributeHost('replace-wrap-start')
+  @attributeThis('replace-wrap-start')
   _replaceWrapStart: string | null;
-  @attributeHost('replace-wrap-end')
+  @attributeThis('replace-wrap-end')
   _replaceWrapEnd: string | null;  resultValue?: any;
 
   get value(): boolean {
@@ -22,12 +22,12 @@ class SwcAsync extends HTMLTemplateElement {
 
   private _nodes: Node[] = [];
 
-  @changedAttributeHost('value')
+  @changedAttributeThis('value')
   private setValue(valueAttr?: string | null) {
     this.executeAsync(this._value);
   }
 
-  // @changedAttributeHost('replace-wrap')
+  // @changedAttributeThis('replace-wrap')
   // private setReplaceWrap() {
   //   this.executeAsync(this._value);
   // }

package/src/elements/SwcChoose.ts

@@ -1,16 +1,16 @@
-import { changedAttributeHost } from '../decorators/changedAttributeHost';
+import { changedAttributeThis } from '../decorators/changedAttributeThis';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { ConvertUtils } from '@dooboostore/core-web';
 import { SwcChooseInterface } from '../types';
-import { attributeHost, getAttributeValue, getElementConfig } from '../decorators';
+import { attributeThis, getAttributeValue, getElementConfig } from '../decorators';
 
 class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
   _value: any;
 
-  @attributeHost('replace-wrap-start')
+  @attributeThis('replace-wrap-start')
   _replaceWrapStart: string | null;
-  @attributeHost('replace-wrap-end')
+  @attributeThis('replace-wrap-end')
   _replaceWrapEnd: string | null;
 
   private _nodes: Node[] = [];
@@ -39,14 +39,14 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     // console.log('-----------------choooooooose attr origin', na, o, n);
   }
 
-  @changedAttributeHost('value')
+  @changedAttributeThis('value')
   private setValue(value: any, o: string, n: string) {
     console.log('chooooooose value', value)
     this._value = value;
     this.refresh(this._value);
   }
 
-  // @changedAttributeHost('replace-wrap')
+  // @changedAttributeThis('replace-wrap')
   // private setReplaceWrap(replaceWrapAttr?: string | null) {
   //   this.refresh();
   // }

package/src/elements/SwcIf.ts

@@ -1,21 +1,21 @@
-import { changedAttributeHost } from '../decorators/changedAttributeHost';
+import { changedAttributeThis } from '../decorators/changedAttributeThis';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { ConvertUtils } from '@dooboostore/core-web';
 import { SwcIfInterface } from '../types';
-import { attributeHost, getAttributeValue } from '../decorators';
+import { attributeThis, getAttributeValue } from '../decorators';
 
 class SwcIf extends HTMLTemplateElement implements SwcIfInterface {
   // id =
-  // @attributeHost('value')
+  // @attributeThis('value')
   _value: any;
 
-  @attributeHost('replace-wrap-start')
+  @attributeThis('replace-wrap-start')
   _replaceWrapStart: string | null;
-  @attributeHost('replace-wrap-end')
+  @attributeThis('replace-wrap-end')
   _replaceWrapEnd: string | null;
 
-  @attributeHost('skip-if-same')
+  @attributeThis('skip-if-same')
   _skipIfSame: string | null;
 
   private _nodes: Node[] = [];
@@ -33,13 +33,13 @@ class SwcIf extends HTMLTemplateElement implements SwcIfInterface {
     super();
   }
 
-  @changedAttributeHost('value')
+  @changedAttributeThis('value')
   private setValue(value: any, o: string, n: string) {
     this._value = value;
     this.refresh(this._value);
   }
 
-  // @changedAttributeHost('replace-wrap')
+  // @changedAttributeThis('replace-wrap')
   // private setReplaceWrap(replaceWrapAttr?: string | null) {
   //   this.refresh();
   // }