@dooboostore/simple-web-component 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/simple-boot": "1.0.55",
-    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core": "1.0.31",
-    "@dooboostore/core-web": "1.0.10"
+    "@dooboostore/core-node": "1.0.12",
+    "@dooboostore/core-web": "1.0.10",
+    "@dooboostore/simple-boot": "1.0.55"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -47,19 +47,21 @@ export const getAddEventListenerMetadata = (target: any): AddEventListenerMetada
 };
 
 /**
- * @addEventListenerHost decorator - simplified version of @addEventListener for :host selector
- * Usage: @addEventListenerHost('click')
- * Usage: @addEventListenerHost('click', { stopPropagation: true })
+ * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector
  */
-export function addEventListenerHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener(':host', type, options);
+export function addEventListenerThis(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener('$this', type, options);
 }
 
 /**
- * @addEventListenerAppHost decorator - simplified version of @addEventListener for :appHost selector
- * Usage: @addEventListenerAppHost('click')
- * Usage: @addEventListenerAppHost('click', { stopPropagation: true })
+ * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector
  */
 export function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener(':appHost', type, options);
+  return addEventListener('$appHost', type, options);
+}
+export function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener('$window', type, options);
+}
+export function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener('$document', type, options);
 }

package/src/decorators/applyAttribute.ts

@@ -61,15 +61,16 @@ function createAttributeDecorator(action: AttributeAction) {
               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) {
@@ -140,13 +141,13 @@ export const setAttribute = (selector: string, nameOrOptions?: string | Attribut
 export const updateAttribute = (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('update')(selector, nameOrOptions, options);
 export const removeAttribute = (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('remove')(selector, nameOrOptions, options);
 
-// Host versions
-export function applyAttributeHost(action: AttributeAction = 'update', options: AttributeApplyOptions = {}): MethodDecorator {
-  return createAttributeDecorator(action)(':host', options);
+// This versions
+export function applyAttributeThis(action: AttributeAction = 'update', options: AttributeApplyOptions = {}): MethodDecorator {
+  return createAttributeDecorator(action)('$this', options);
 }
-export const setAttributeHost = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('set')(':host', nameOrOptions, options);
-export const updateAttributeHost = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('update')(':host', nameOrOptions, options);
-export const removeAttributeHost = (nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('remove')(':host', nameOrOptions, options);
+export const setAttributeThis = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('set')('$this', nameOrOptions, options);
+export const updateAttributeThis = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('update')('$this', nameOrOptions, options);
+export const removeAttributeThis = (nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('remove')('$this', nameOrOptions, options);
 
 export const findAllAttributeApplyMetadata = (target: any): Map<string | symbol, AttributeApplyMetadata> => {
   const result = new Map<string | symbol, AttributeApplyMetadata>();

package/src/decorators/applyClass.ts

@@ -57,15 +57,16 @@ function createClassDecorator(action: ClassAction) {
               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) {
@@ -150,15 +151,15 @@ export const addClass = (selector: string, classMapOrOptions?: string | { [class
 export const removeClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('remove')(selector, classMapOrOptions, options);
 export const toggleClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('toggle')(selector, classMapOrOptions, options);
 
-// Host versions
-export function applyClassHost(action: ClassAction = 'update', options: ClassApplyOptions = {}): MethodDecorator {
-  return createClassDecorator(action)(':host', options);
+// This versions
+export function applyClassThis(action: ClassAction = 'update', options: ClassApplyOptions = {}): MethodDecorator {
+  return createClassDecorator(action)('$this', options);
 }
-export const setClassHost = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('set')(':host', classMapOrOptions, options);
-export const updateClassHost = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('update')(':host', classMapOrOptions, options);
-export const addClassHost = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('add')(':host', classMapOrOptions, options);
-export const removeClassHost = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('remove')(':host', classMapOrOptions, options);
-export const toggleClassHost = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('toggle')(':host', classMapOrOptions, options);
+export const setClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('set')('$this', classMapOrOptions, options);
+export const updateClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('update')('$this', classMapOrOptions, options);
+export const addClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('add')('$this', classMapOrOptions, options);
+export const removeClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('remove')('$this', classMapOrOptions, options);
+export const toggleClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('toggle')('$this', classMapOrOptions, options);
 
 export const findAllClassMetadata = (target: any): Map<string | symbol, ClassApplyMetadata> => {
   const result = new Map<string | symbol, ClassApplyMetadata>();

package/src/decorators/applyNode.ts

@@ -105,11 +105,12 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
           return t;
         };
 
-        if (selector === ':host') return applyRoot(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 === '$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);
         
         const targetRoot = applyRoot(this);
         return targetRoot ? targetRoot.querySelector(selector) : null;
@@ -157,28 +158,28 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
   return result;
 };
 
-export function applyNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) return applyNode(':host', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
+export function applyNodeThis(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) return applyNode('$this', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(':host', { position: 'beforeEnd', ...opt });
+  return applyNode('$this', { position: 'beforeEnd', ...opt });
 }
 
-export function applyReplaceChildrenNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceChildrenNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyReplaceChildrenNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) return applyNode(':host', { position: 'replaceChildren' })(targetOrOptions, propertyKey, descriptor);
+export function applyReplaceChildrenNodeThis(options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceChildrenNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyReplaceChildrenNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) return applyNode('$this', { position: 'replaceChildren' })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(':host', { position: 'replaceChildren', ...opt });
+  return applyNode('$this', { position: 'replaceChildren', ...opt });
 }
 
-export function applyInnerHtmlNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerHtmlNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyInnerHtmlNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) return applyNode(':host', { position: 'innerHtml' })(targetOrOptions, propertyKey, descriptor);
+export function applyInnerHtmlNodeThis(options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerHtmlNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyInnerHtmlNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) return applyNode('$this', { position: 'innerHtml' })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode(':host', { position: 'innerHtml', ...opt });
+  return applyNode('$this', { position: 'innerHtml', ...opt });
 }
 
 export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {

package/src/decorators/applyStyle.ts

@@ -38,7 +38,7 @@ function createStyleDecorator(action: StyleAction) {
           if (resolvedValue !== undefined) {
             const win = (this as any).ownerDocument?.defaultView || window;
             const host = this as unknown as HTMLElement;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, host);
+            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = options.root || 'auto';
             const targetEls: HTMLElement[] = [];
 
@@ -47,15 +47,16 @@ function createStyleDecorator(action: StyleAction) {
               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) {
@@ -122,13 +123,13 @@ export const setStyle = (selector: string, options: StyleApplyOptions = {}) => c
 export const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);
 export const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);
 
-// Host versions
-export function applyStyleHost(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
-  return createStyleDecorator(action)(':host', options);
+// This versions
+export function applyStyleThis(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
+  return createStyleDecorator(action)('$this', options);
 }
-export const setStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('set')(':host', options);
-export const updateStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('update')(':host', options);
-export const removeStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')(':host', options);
+export const setStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('set')('$this', options);
+export const updateStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('update')('$this', options);
+export const removeStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')('$this', options);
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {
   const result = new Map<string | symbol, StyleApplyMetadata>();

package/src/decorators/attribute.ts

@@ -77,20 +77,21 @@ export const resolveTargetEls = (inst: any, selector: string, options: Attribute
     }
   };
 
-  if (selector === ':host' || !selector) {
+  if (selector === '$this' || !selector) {
     applyRoot(inst);
-  } else if (selector === ':window') {
+  } else if (selector === '$window') {
     results.push(currentWin);
-  } else if (selector === ':document') {
+  } else if (selector === '$document') {
     results.push(currentWin.document);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);
-    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);
-    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    if (selector === '$host') applyRoot(hostSet.$host);
+    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
     else {
       if (r === 'shadow') {
         const found = inst.shadowRoot?.querySelectorAll(selector);
@@ -189,29 +190,29 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
 }
 
 /**
- * @attributeHost decorator to sync a field value with the :host element's attribute.
+ * @attributeThis decorator to sync a field value with the $this element's attribute.
  */
-export function attributeHost(target: Object, propertyKey: string | symbol): void;
-export function attributeHost(options: AttributeFieldOptions): PropertyDecorator;
-export function attributeHost(attrName: string): PropertyDecorator;
-export function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
-export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
+export function attributeThis(target: Object, propertyKey: string | symbol): void;
+export function attributeThis(options: AttributeFieldOptions): PropertyDecorator;
+export function attributeThis(attrName: string): PropertyDecorator;
+export function attributeThis(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
+export function attributeThis(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
   if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
+    return attribute('$this', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
   }
 
   if (typeof targetOrAttrOrOptions === 'string') {
     const attrName = targetOrAttrOrOptions;
     const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;
-    return attribute(':host', { ...options, name: attrName });
+    return attribute('$this', { ...options, name: attrName });
   } else if (typeof targetOrAttrOrOptions === 'object') {
     const options = targetOrAttrOrOptions as AttributeFieldOptions;
     return (target: Object, propertyKey: string | symbol) => {
-      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);
+      return attribute('$this', { ...options, name: String(propertyKey) })(target, propertyKey);
     };
   } else {
     return (target: Object, propertyKey: string | symbol) => {
-      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);
+      return attribute('$this', { name: String(propertyKey) })(target, propertyKey);
     };
   }
 }

package/src/decorators/{changedAttributeHost.ts → changedAttributeThis.ts}

@@ -2,15 +2,15 @@ import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
-export interface ChangedAttributeHostOptions {
+export interface ChangedAttributeThisOptions {
   type?: typeof Number | typeof Boolean | typeof String;
   while?: 'connected';
 }
 
-export interface ChangedAttributeHostMetadata {
+export interface ChangedAttributeThisMetadata {
   attributeName: string;
   propertyKey: string | symbol;
-  options: ChangedAttributeHostOptions;
+  options: ChangedAttributeThisOptions;
 }
 
 const convertValue = (val: any, type: any): any => {
@@ -21,14 +21,12 @@ const convertValue = (val: any, type: any): any => {
 };
 
 /**
- * @changedAttributeHost decorator - fires when any attribute on :host changes
- * Usage: @changedAttributeHost('data-product-id')
- *        @changedAttributeHost('count', { type: Number })
+ * @changedAttributeThis decorator - fires when any attribute on $this changes
  */
-export function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {
+export function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];
+    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
     if (!metaList) {
       metaList = [];
       ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
@@ -43,16 +41,16 @@ export function changedAttributeHost(attributeName?: string, options: ChangedAtt
   };
 }
 
-export const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {
+export const getChangedAttributeMetadata = (target: any): ChangedAttributeThisMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
 };
 
-export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {
+export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeThisMetadata[]> => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeThisMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
 
-  const result = new Map<string, ChangedAttributeHostMetadata[]>();
+  const result = new Map<string, ChangedAttributeThisMetadata[]>();
   metaList.forEach(meta => {
     meta.forEach(item => {
       if (!result.has(item.attributeName)) {

package/src/decorators/elementDefine.ts

@@ -2,7 +2,7 @@ import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
 import {getAddEventListenerMetadata} from './addEventListener';
 import {ON_INITIALIZE_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, convertAttributeValue} from './changedAttributeHost';
+import {findAllAttributeChangedMetadata, convertAttributeValue} from './changedAttributeThis';
 import {findAllAttributeApplyMetadata} from './applyAttribute';
 import {findAllAttributeMetadata, getAttributeValue} from './attribute';
 import {getQueryMetadata} from './query';
@@ -54,7 +54,7 @@ export const ensureInit = (inst: any) => {
     // ║                                                                                ║
     // ║ 이유:                                                                          ║
     // ║ 1. TypeScript는 초기값이 있는 필드를 constructor에서 own property로 생성       ║
-    // ║    @attributeHost('id') myId: string = "default"  →  this.myId = "default"    ║
+    // ║    @attributeThis('id') myId: string = "default"  →  this.myId = "default"    ║
     // ║                                                                                ║
     // ║ 2. JavaScript의 property lookup은 own property를 먼저 찾음                      ║
     // ║    - this.myId 접근                                                           ║
@@ -92,7 +92,7 @@ export const ensureInit = (inst: any) => {
 
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
-    const appHosts = SwcUtils.findAllParentAppHostsDirect(inst);
+    const appHosts = SwcUtils.findAllAppHostsIncludingSelfDirect(inst);
     inst._executeSwcScript?.('swc-on-constructor', hostSet);
 
     // Call @onInitialize lifecycle methods
@@ -116,7 +116,7 @@ const handleGlobalSwcEvent = async (event: Event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host: any = SwcUtils.findNearestSwcHost(node);
+      const host: any = SwcUtils.findNearestSwcHostIncludingSelf(node);
       if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === 'function') {
         await host.__swc_executeAttributeEvent(node, attrName, script, event);
         (event as any).__swc_handled = true;
@@ -166,7 +166,7 @@ const setupPrototype = (proto: any) => {
   proto._resolveWindow = function (localConfig?: ElementConfig): Window {
     ensureInit(this);
     if (localConfig?.window) return localConfig.window;
-    const ancestors = SwcUtils.findAllSwcHosts(this as any);
+    const ancestors = SwcUtils.findAllSwcHostsIncludingSelf(this as any);
     for (let i = ancestors.length - 1; i >= 0; i--) {
       const aConf = getElementConfig(ancestors[i]);
       if (aConf?.window) return aConf.window;
@@ -285,7 +285,7 @@ export const elementDefine =
       }
 
       const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
-      const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === ':host' || meta.selector === '');
+      const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === '$this' || meta.selector === '');
       const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
       const attrChangeMap = findAllAttributeChangedMetadata(constructor);
       const attributeList = findAllAttributeMetadata(constructor);
@@ -297,7 +297,7 @@ export const elementDefine =
       const attributeApplyNames = Array.from(applyAttributeMap.values())
         .map(it => it.options.name)
         .filter(Boolean) as string[];
-      const hostAttributes = attributeList.filter(it => it.selector === ':host').map(it => it.options.name || String(it.propertyKey));
+      const hostAttributes = attributeList.filter(it => it.selector === '$this').map(it => it.options.name || String(it.propertyKey));
       // Get original static observedAttributes before they're overwritten by Object.defineProperty
       const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
       const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
@@ -402,7 +402,7 @@ export const elementDefine =
           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 !== '') {
+            if (meta.options.delegate && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
               delegateListeners.push(meta);
             } else {
               nonDelegateListeners.push(meta);
@@ -482,17 +482,18 @@ export const elementDefine =
               }
             };
 
-            if (selector === ':window') bindTargets.push(currentWin);
-            else if (selector === ':document') bindTargets.push(currentWin.document);
-            else if (selector === ':parentHost') applyRootOption(helperHostSet.$parentHost);
-            else if (selector === ':appHost') applyRootOption(helperHostSet.$appHost);
-            else if (selector === ':firstHost') applyRootOption(helperHostSet.$firstHost);
-            else if (selector === ':lastHost') applyRootOption(helperHostSet.$lastHost);
-            else if (selector === ':firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
-            else if (selector === ':lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
-            else if (selector === ':hosts') helperHostSet.$hosts.forEach(applyRootOption);
-            else if (selector === ':appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
-            else if (selector === ':host' || !selector) applyRootOption(this);
+            if (selector === '$window') bindTargets.push(currentWin);
+            else if (selector === '$document') bindTargets.push(currentWin.document);
+            else if (selector === '$host') applyRootOption(helperHostSet.$host);
+            else if (selector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
+            else if (selector === '$appHost') applyRootOption(helperHostSet.$appHost);
+            else if (selector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
+            else if (selector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
+            else if (selector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
+            else if (selector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
+            else if (selector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
+            else if (selector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
+            else if (selector === '$this' || !selector) applyRootOption(this);
             else {
               const searchRoots: (HTMLElement | ShadowRoot)[] = [];
               if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
@@ -541,7 +542,7 @@ export const elementDefine =
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
           (this as any).__swc_connected = true;
 
-          // Trigger @changedAttributeHost with while: 'connected'
+          // Trigger @changedAttributeThis with while: 'connected'
           for (let [name, metaList] of Array.from(attrChangeMap)) {
             for (const meta of metaList) {
               if (meta.options.while === 'connected') {

package/src/decorators/emitCustomEvent.ts

@@ -60,25 +60,27 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
 
         const eventTargets: EventTarget[] = [];
-        if (selectorOrTarget === ':window') eventTargets.push(currentWin);
-        else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
-        else if (selectorOrTarget === ':parentHost') {
+        if (selectorOrTarget === '$window') eventTargets.push(currentWin);
+        else if (selectorOrTarget === '$document') eventTargets.push(currentWin.document);
+        else if (selectorOrTarget === '$host') {
+          if (hostSet.$host) eventTargets.push(hostSet.$host);
+        } else if (selectorOrTarget === '$parentHost') {
           if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selectorOrTarget === ':appHost') {
+        } else if (selectorOrTarget === '$appHost') {
           if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selectorOrTarget === ':firstHost') {
+        } else if (selectorOrTarget === '$firstHost') {
           if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selectorOrTarget === ':lastHost') {
+        } else if (selectorOrTarget === '$lastHost') {
           if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selectorOrTarget === ':firstAppHost') {
+        } else if (selectorOrTarget === '$firstAppHost') {
           if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selectorOrTarget === ':lastAppHost') {
+        } else if (selectorOrTarget === '$lastAppHost') {
           if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selectorOrTarget === ':hosts') {
+        } else if (selectorOrTarget === '$hosts') {
           hostSet.$hosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === ':appHosts') {
+        } else if (selectorOrTarget === '$appHosts') {
           hostSet.$appHosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === ':host' || !selectorOrTarget) {
+        } else if (selectorOrTarget === '$this' || !selectorOrTarget) {
           eventTargets.push(this as any);
         } else {
           const r = fullOptions.root || 'auto';
@@ -121,27 +123,20 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 };
 
 /**
- * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
- * Usage: @emitCustomEventHost('navigate') // default attributeName: 'on-emit-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.
+ * @emitCustomEventThis decorator - simplified version of @emitCustomEvent for $this selector
  */
-export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
-export function emitCustomEventHost(type: string, attributeName: string): MethodDecorator ;
-export function emitCustomEventHost(type: string): MethodDecorator;
-export function emitCustomEventHost(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
+export function emitCustomEventThis(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
+export function emitCustomEventThis(type: string, attributeName: string): MethodDecorator ;
+export function emitCustomEventThis(type: string): MethodDecorator;
+export function emitCustomEventThis(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
   if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'string') {
-    return emitCustomEventHost(type, {attributeName: optionsOrAttributeaName});
+    return emitCustomEventThis(type, {attributeName: optionsOrAttributeaName});
   } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'object') {
     if (!optionsOrAttributeaName.attributeName) {
       optionsOrAttributeaName.attributeName = `on-emit-${type}`;
     }
-    return emitCustomEvent(':host', type, optionsOrAttributeaName);
+    return emitCustomEvent('$this', type, optionsOrAttributeaName);
   } else {
-    return emitCustomEvent(':host', type, {attributeName: `on-emit-${type}`});
+    return emitCustomEvent('$this', type, {attributeName: `on-emit-${type}`});
   }
-
-
 }

package/src/decorators/index.ts

@@ -1,7 +1,7 @@
 export * from './addEventListener';
 export * from './attribute';
 export * from './elementDefine';
-export * from './changedAttributeHost';
+export * from './changedAttributeThis';
 export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';