@dooboostore/simple-web-component 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "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/core": "1.0.31",
     "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.11",
-    "@dooboostore/simple-boot": "1.0.55"
+    "@dooboostore/core-web": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.56",
+    "@dooboostore/core": "1.0.32"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/SwcAppEngine.ts

@@ -3,13 +3,12 @@ import { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/co
 import { ElementRouter } from './router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot';
 import { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';
-
 import { SwcAppInterface } from './types';
 import { SimConfig } from '@dooboostore/simple-boot';
 
 export type SwcConfigType = {
   routeType: 'path' | 'hash' | 'element';
-  connectMode?: 'direct' | 'swap' | 'clear-swap' | 'hydrate'; // hydrate 아직 개발중
+  // connectMode?: 'direct' | 'swap' | 'clear-swap'; // hydrate 아직 개발중
   container?: symbol;
   otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;
   path?: string;
@@ -22,6 +21,7 @@ export type SwcConfigType = {
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
   ssr?: boolean;
+  onStartedLazyDefineComponent?: ((w: Window)=> Promise<CustomElementConstructor> | void | string | any | CustomElementConstructor)[];
 
   onChildrenConnectedDone?: (app: SwcAppInterface) => void;
   // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;
@@ -75,6 +75,10 @@ export class SwcAppEngine {
       if (this.router) otherInstanceSim.set(Router, this.router);
       this.simpleApplication.run(otherInstanceSim);
 
+
+      if (this._config.onStartedLazyDefineComponent) {
+        await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))
+      }
       if (this._config.onEngineStarted) {
         await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
       }

package/src/decorators/addEventListener.ts

@@ -8,7 +8,7 @@ export interface AddEventListenerBaseOptions extends EventListenerOptions {
   stopPropagation?: boolean;
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
-  removeOnDisconnected?: boolean;
+  // removeOnDisconnected?: boolean;
   delegate?: boolean;
   filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;
 }
@@ -41,10 +41,20 @@ export function addEventListener(selectorOrTarget: string, type: string, options
   };
 }
 
-export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
-};
+
+export function addEventListenerDelegateLightDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'light', delegate: true});
+}
+
+export function addEventListenerDelegateShadowDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'shadow', delegate: true});
+}
+export function addEventListenerDelegateAllDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'all', delegate: true});
+}
+export function addEventListenerDelegate(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'auto', delegate: true});
+}
 
 /**
  * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector
@@ -59,9 +69,15 @@ export function addEventListenerThis(type: string, options?: AddEventListenerBas
 export function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   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);
 }
+
+export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+};

package/src/decorators/applyAttribute.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export type AttributeAction = 'set' | 'update' | 'remove';
 

package/src/decorators/applyClass.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 

package/src/decorators/applyNode.ts

@@ -1,7 +1,9 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
-import { HelperHostSet, SwcRootType } from '../types';
-import { SwcUtils } from "../utils/Utils";
+import {SpecialSelector, SwcQueryOptions, HelperHostSet, SwcRootType} from '../types';
+import { SwcUtils} from "../utils/Utils";
+import {findAllStateMetadata} from "./state";
+import {ElementApply} from "@dooboostore/core-web";
 /*
 <!-- beforebegin -->
 <p> <-- it's me
@@ -20,11 +22,11 @@ export interface ApplyNodeOptions {
    * 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;
+  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;
+  fallback?: (helper: HelperHostSet) => any;
 }
 
 export interface ApplyNodeMetadata {
@@ -35,49 +37,66 @@ export interface ApplyNodeMetadata {
 
 export const APPLY_NODE_METADATA_KEY = Symbol.for('simple-web-component:apply-node');
 
-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 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 applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string, pos: ApplyNodePosition, win: Window, host?: any) => {
+  if (!targetEl) return;
+  const doc = win.document;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
+  const id = currentThis._swcId;
 
-    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);
+  const nodes: Node[] = [];
+
+  if (typeof res === 'string' && pos === 'innerHtml') {
+    const t = win.document.createElement('template');
+    t.innerHTML = res;
+    nodes.push(...Array.from(t.content.childNodes));
+  } else if (typeof res === 'string' && pos === 'innerText') {
+    nodes.push(win.document.createTextNode(res));
+  }
+
+  SwcUtils.projectProcessHtml(id, nodes, doc);
+
+
+
+  const isShadowRoot = targetEl instanceof win.ShadowRoot;
+  // const nodes = normalizeNodes(res, doc);
+  if (pos === 'replace') {
+    if (!isShadowRoot) targetEl.replaceWith(...nodes);
+  } else if (pos === 'innerHtml') {
+    targetEl.replaceChildren(...nodes);
+  } else if (pos === 'innerText') {
+    targetEl.replaceChildren(...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);
+  }
+
+  const stateContext: any = {...hostSet};
+  findAllStateMetadata(currentThis).forEach(it => {
+    stateContext[it.name] = currentThis[it.propertyKey]
+  })
+  new ElementApply(targetEl, {id: id}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
+  return nodes;
 };
 
 /**
  * @applyNode decorator to surgically add/replace nodes to a target element.
  */
-export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
+export function applyNode(selector: string, options: ApplyNodeOptions = {position: 'replaceChildren'}): MethodDecorator {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
     let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor) as Map<string | symbol, ApplyNodeMetadata>;
@@ -85,17 +104,17 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
       metaList = new Map<string | symbol, ApplyNodeMetadata>();
       ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
     }
-    metaList.set(propertyKey, { propertyKey, selector, options });
+    metaList.set(propertyKey, {propertyKey, selector, options});
 
     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) => {
@@ -113,37 +132,46 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         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;
       };
 
+
+      console.log('fffffffffff')
       const targetEl = getTarget();
       const res = original.apply(this, args);
 
       const runApply = (target: any, val: any) => {
         const pos = options.position || 'beforeEnd';
-        
+        // Delegate HTML/node processing to applyToDom which centralizes
+        // processing. runApply should not call processHtml itself to avoid
+        // duplicate processing.
+        const processedVal = val;
+
         // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
-        if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
-            applyToDom(target, val, pos, currentWin);
+        if (!options.filter || options.filter(target, processedVal, {currentThis: this, helper: hostSet})) {
+          applyToDom(this, target, processedVal, pos, currentWin);
         }
       };
 
+
+        const fallbackNodes: Node[] = [];
+      if (targetEl && options.fallback) {
+        const loadingRes = options.fallback.call(this, hostSet);
+        // applyToDom expects a Window as the 4th argument
+        fallbackNodes.push(...applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', 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;
-          });
+        return res.then(finalRes => {
+          fallbackNodes.forEach((it: any)=>it.remove());
+          if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+          return finalRes;
+        });
       } else {
-          if (res !== undefined && targetEl) runApply(targetEl, res);
-          return res;
+        if (res !== undefined && targetEl) runApply(targetEl, res);
+        return res;
       }
     };
   };
@@ -163,35 +191,117 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
 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 option: ApplyNodeOptions = {position: 'replaceChildren'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'beforeEnd', ...opt });
+  return applyNode('$this', {...option, ...opt});
 }
 
-export function applyNodeThisReplaceChildren(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeThisReplaceChildren(options: Omit<ApplyNodeOptions, 'position'>): 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 option: ApplyNodeOptions = {position: 'replaceChildren'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisReplaceChildrenLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisReplaceChildrenLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisReplaceChildrenLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const options: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'replaceChildren', ...opt });
+  return applyNode('$this', {...opt, ...options});
 }
 
-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);
+export function applyNodeThisBeforeEnd(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisBeforeEnd(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEnd(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const options: ApplyNodeOptions = {position: 'beforeEnd'};
+  if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'innerHtml', ...opt });
+  return applyNode('$this', {...opt, ...options});
 }
 
-export function applyNodeReplaceChildren(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'replaceChildren' });
+export function applyNodeThisBeforeEndLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisBeforeEndLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEndLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'light'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+export function applyNodeThisBeforeEndShadow(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisBeforeEndShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEndShadow(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'shadow'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisAfterBegin(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisAfterBegin(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisAfterBegin(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'afterBegin'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisAfterBeginLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisAfterBeginLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisAfterBeginLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'afterBegin', root: 'light'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisInnerHtml(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisInnerHtml(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'innerHtml'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyThisInnerHtmlNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyThisInnerHtmlNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisInnerHtmlNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'innerHtml', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeInnerHtml(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'innerHtml' });
+export function applyThisReplaceChildrenNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyThisReplaceChildrenNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisReplaceChildrenNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeInnerText(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'innerText' });
+export function applyNodeReplaceChildren(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'replaceChildren'});
 }
+
+export function applyNodeInnerHtml(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerHtml'});
+}
+
+// export function applyNodeInnerHtmlLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+//   return applyNode(selector, {...options, position: 'innerHtml', root: 'light'});
+// }
+
+export function applyNodeInnerText(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerText'});
+}
+
+// export function applyNodeInnerTextLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+//   return applyNode(selector, {...options, position: 'innerText', root: 'light'});
+// }