@dooboostore/simple-web-component 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -93,9 +93,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.31",
-    "@dooboostore/simple-boot": "1.0.55",
+    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/core-node": "1.0.12"
+    "@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

@@ -2,7 +2,15 @@ import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { HelperHostSet, SwcRootType } from '../types';
 import { SwcUtils } from "../utils/Utils";
-
+/*
+<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ */
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
 export interface ApplyNodeOptions {
@@ -97,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;
@@ -149,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 {
@@ -180,3 +189,7 @@ export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOpt
 export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerHtml' });
 }
+
+export function applyInnerTextNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+    return applyNode(selector, { ...options, position: 'innerText' });
+}

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

@@ -41,7 +41,7 @@ export const getAttributeValue = (inst: any, attrName: string, options?: Attribu
 
     // 표현식 체크
     const ae = new ActionExpression(domVal);
-    const expr = ae.getFirstExpression('call-return');
+    const expr = ae.getFirstExpression('callReturn');
     if (expr) {
       try {
         const result = FunctionUtils.executeReturn({
@@ -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}

@@ -1,15 +1,16 @@
-import {ReflectUtils} from '@dooboostore/core';
+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 => {
@@ -20,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);
@@ -42,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 result = new Map<string, ChangedAttributeHostMetadata[]>();
+  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeThisMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+
+  const result = new Map<string, ChangedAttributeThisMetadata[]>();
   metaList.forEach(meta => {
     meta.forEach(item => {
       if (!result.has(item.attributeName)) {