@dooboostore/simple-web-component 1.0.35 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "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.11",
+    "@dooboostore/simple-boot": "1.0.55"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/{elements/SwcAppEngine.ts → SwcAppEngine.ts}

@@ -1,22 +1,27 @@
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
+import { SimpleApplication } from '@dooboostore/simple-boot';
 import { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';
-import { ElementRouter } from '../router/ElementRouter';
-import { SimOption } from '@dooboostore/simple-boot/SimOption';
+import { ElementRouter } from './router/ElementRouter';
+import { SimOption } from '@dooboostore/simple-boot';
 import { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';
 
-import { SwcAppInterface } from '../types';
+import { SwcAppInterface } from './types';
 import { SimConfig } from '@dooboostore/simple-boot';
 
 export type SwcConfigType = {
   routeType: 'path' | 'hash' | 'element';
-  connectMode?: 'direct' | 'swap' | 'clear-swap';
+  connectMode?: 'direct' | 'swap' | 'clear-swap' | 'hydrate'; // hydrate 아직 개발중
   container?: symbol;
   otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;
   path?: string;
   window: Window;
-  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => void;
+  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;
+  onConnectedChildAfter?: (swcEl: HTMLElement) => void;
+  onConnectedChildBefore?: (swcEl: HTMLElement) => void;
+  onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;
+  onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
+  ssr?: boolean;
 
   onChildrenConnectedDone?: (app: SwcAppInterface) => void;
   // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;
@@ -71,7 +76,7 @@ export class SwcAppEngine {
       this.simpleApplication.run(otherInstanceSim);
 
       if (this._config.onEngineStarted) {
-        this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
+        await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
       }
     } catch (e) {
       console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);

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

@@ -4,7 +4,7 @@ import { HelperHostSet, SwcRootType } from '../types';
 import { SwcUtils } from "../utils/Utils";
 /*
 <!-- beforebegin -->
-<p>
+<p> <-- it's me
   <!-- afterbegin -->
   foo
   <!-- beforeend -->
@@ -43,8 +43,10 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
   });
 };
 
-const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Document) => {
+const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, win: Window) => {
     if (!targetEl) return;
+
+    const doc = win.document;
     
     if (pos === 'innerHtml') {
         targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
@@ -58,7 +60,7 @@ const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Docume
         return;
     }
 
-    const isShadowRoot = targetEl instanceof ShadowRoot;
+    const isShadowRoot = targetEl instanceof win.ShadowRoot;
     const nodes = normalizeNodes(res, doc);
     if (pos === 'replace') {
       if (!isShadowRoot) targetEl.replaceWith(...nodes);
@@ -105,11 +107,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;
@@ -123,7 +126,7 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         
         // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
         if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
-            applyToDom(target, val, pos, currentDoc);
+            applyToDom(target, val, pos, currentWin);
         }
       };
 
@@ -157,38 +160,38 @@ 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 applyNodeThisReplaceChildren(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeThisReplaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisReplaceChildren(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 applyThisInnerHtmlNode(options: ApplyNodeOptions): MethodDecorator;
+export function applyThisInnerHtmlNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisInnerHtmlNode(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 {
+export function applyNodeReplaceChildren(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'replaceChildren' });
 }
 
-export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+export function applyNodeInnerHtml(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerHtml' });
 }
 
-export function applyInnerTextNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+export function applyNodeInnerText(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerText' });
 }

package/src/decorators/applySlot.ts

@@ -0,0 +1,228 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { HelperHostSet, SwcRootType } from '../types';
+import { SwcUtils } from "../utils/Utils";
+import {NodeSlot} from "@dooboostore/core-web";
+/*
+<!-- beforebegin -->
+<p> <-- it's me
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ */
+export type ApplySlotPosition = 'prependHtml' | 'prependText' | 'appendHtml' | 'appendText' | 'replaceChildrenHtml' | 'replaceChildrenText' | 'clear';
+
+export interface ApplySlotOptions {
+  position?: ApplySlotPosition;
+  // root?: SwcRootType;
+  /**
+   * Filter function to determine whether to perform DOM operation.
+   * If it returns false, the operation is skipped.
+   */
+  // filter?: (target: HTMLElement | ShadowRoot, newValue: any, meta:{currentThis: any,helper: HelperHostSet}) => boolean;
+  /**
+   * Optional loading content to display while an async method is executing.
+   */
+  // loading?: (helper: HelperHostSet) => any;
+}
+
+export interface ApplySlotMetadata {
+  propertyKey: string | symbol;
+  id: string;
+  type: 'method' | 'property';
+  options: ApplySlotOptions;
+}
+
+export const APPLY_SLOT_METADATA_KEY = Symbol.for('simple-web-component:apply-slot');
+
+// const normalizeNodes = (res: any, doc: Document): Node[] => {
+//   const items = Array.isArray(res) ? res : [res];
+//   return items.map(it => {
+//     if (it instanceof Node) return it;
+//     return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+//   });
+// };
+
+// const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, win: Window) => {
+//     if (!targetEl) return;
+//
+//     const doc = win.document;
+//
+//     if (pos === 'innerHtml') {
+//         targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
+//         return;
+//     }
+//
+//     if (pos === 'innerText') {
+//         if (targetEl.innerText !== undefined) {
+//             targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+//         }
+//         return;
+//     }
+//
+//     const isShadowRoot = targetEl instanceof win.ShadowRoot;
+//     const nodes = normalizeNodes(res, doc);
+//     if (pos === 'replace') {
+//       if (!isShadowRoot) targetEl.replaceWith(...nodes);
+//     } else if (pos === 'replaceChildren') {
+//       targetEl.replaceChildren(...nodes);
+//     } else {
+//       if (pos === 'beforeEnd') targetEl.append(...nodes);
+//       else if (pos === 'afterBegin') targetEl.prepend(...nodes);
+//       else if (pos === 'beforeBegin' && !isShadowRoot) targetEl.before(...nodes);
+//       else if (pos === 'afterEnd' && !isShadowRoot) targetEl.after(...nodes);
+//     }
+// };
+
+/**
+ * @applyNode decorator to surgically add/replace nodes to a target element.
+ */
+export function applySlot(id: string, options: ApplySlotOptions = { position: 'replaceChildrenHtml' }): MethodDecorator & PropertyDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    const type = descriptor === undefined ? 'property' : 'method';
+
+    if (type === 'property') {
+            Object.defineProperty(targetObj, propertyKey, {
+              get(this: any) {
+                const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
+                return nodeSlot;
+              },
+              configurable: true,
+              enumerable: true,
+            })
+     // return nodeSlot;
+     //  return;
+    }
+
+    const constructor = targetObj.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor) as ApplySlotMetadata[];
+    if (!metaList) {
+      metaList = []
+      ReflectUtils.defineMetadata(APPLY_SLOT_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, id, type, options });
+
+
+
+    if (type === 'method') {
+      const original = descriptor.value;
+      descriptor.value = function (...args: any[]) {
+        ensureInit(this);
+
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const currentDoc = currentWin.document;
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+
+
+        // const getTarget = () => {
+        //   const r = options.root || 'auto';
+        //   const applyRoot = (t: any) => {
+        //     if (!t) return t;
+        //     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;
+        //     return t;
+        //   };
+        //
+        //   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;
+        // };
+
+        // const targetEl = getTarget();
+        const res = original.apply(this, args);
+
+        // const runApply = (target: any, val: any) => {
+        //   const pos = options.position || 'beforeEnd';
+        //
+        //   // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
+        //   if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
+        //       applyToDom(target, val, pos, currentWin);
+        //   }
+        // };
+
+        // if (res instanceof Promise) {
+        //     // 비동기일 때만 로딩 표시
+        //     if (targetEl && options.loading) {
+        //         const loadingRes = options.loading.call(this, hostSet);
+        //         applyToDom(targetEl, loadingRes, options.position || 'beforeEnd', currentDoc);
+        //     }
+        //
+        //     return res.then(finalRes => {
+        //         if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+        //         return finalRes;
+        //     });
+        // } else {
+        //     if (res !== undefined && targetEl) runApply(targetEl, res);
+        //     return res;
+        // }
+        if (res) {
+          const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
+          const pos = options.position || 'replaceChildrenHtml';
+          const doc = currentWin.document;
+
+
+          // const isShadowRoot = targetEl instanceof win.ShadowRoot;
+          // const nodes = normalizeNodes(res, doc);
+          if (pos === 'replaceChildrenHtml') {
+            nodeSlot.replaceChildrenHtml(res);
+          } else if (pos === 'replaceChildrenText') {
+            nodeSlot.replaceChildrenText(res);
+          } else if (pos === 'appendHtml') {
+            nodeSlot.appendHtml(res);
+          } else if (pos === 'appendText') {
+            nodeSlot.appendText(res);
+          } else if (pos === 'prependHtml') {
+            nodeSlot.prependHtml(res);
+          } else if (pos === 'prependText') {
+            nodeSlot.prependText(res);
+          } else if (pos === 'clear') {
+            nodeSlot.clear();
+          }
+        }
+        return res;
+      };
+    }
+  };
+}
+
+// export const findAllApplySlotMetadata = (target: any): Map<string | symbol, ApplySlotMetadata> => {
+export const findAllApplySlotMetadata = (target: any): ApplySlotMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
+};
+
+export function applySlotClear(id: string): MethodDecorator {
+  return applySlot(id, { position: 'clear' });
+}
+export function applySlotPrependHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'prependHtml' });
+}
+export const applySlotPrepend = applySlotPrependHtml;
+export function applySlotPrependText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'prependText' });
+}
+export function applySlotAppendHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'appendHtml' });
+}
+export function applySlotAppendText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'appendText' });
+}
+export const applySlotAppend = applySlotAppendHtml;
+export function applySlotReplaceChildrenHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'replaceChildrenHtml' });
+}
+export const applySlotReplaceChildren = applySlotReplaceChildrenHtml;
+export function applySlotReplaceChildrenText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'replaceChildrenText' });
+}

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>();