@dooboostore/simple-web-component 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -14,6 +14,13 @@
     }
   },
   "description": "Simple Web Component library based on dom-render philosophy",
+  "sideEffects": [
+    "./dist/esm/elements/*.js",
+    "./dist/esm/elements/is/*.js",
+    "./dist/cjs/elements/*.js",
+    "./dist/cjs/elements/is/*.js",
+    "*.ts"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dooboostore-develop/packages.git",
@@ -81,9 +88,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/simple-boot": "1.0.53",
+    "@dooboostore/core-node": "1.0.10",
     "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/core-node": "1.0.10"
+    "@dooboostore/simple-boot": "1.0.53"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -9,6 +9,7 @@ export interface AddEventListenerOptions extends EventListenerOptions {
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
   delegate?: boolean;
+  removeOnDisconnected?: boolean;
 }
 
 export interface AddEventListenerMetadata {

package/src/decorators/appendChild.ts

@@ -0,0 +1,42 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export type AppendChildPosition = 'firstChild' | 'lastChild' | 'nextSibling' | 'previousSibling';
+
+export interface AppendChildOptions {
+  position?: AppendChildPosition;
+}
+
+export interface AppendChildMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: AppendChildOptions;
+}
+
+export const APPEND_CHILD_METADATA_KEY = Symbol('simple-web-component:append-child');
+
+/**
+ * @appendChild decorator to surgically add nodes to a target element.
+ * Usage: @appendChild('#list') addItem() { return '<li>New Item</li>'; }
+ */
+export function appendChild(selector: string, options: AppendChildOptions = { position: 'lastChild' }): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor) as Map<string | symbol, AppendChildMetadata>;
+    if (!meta) {
+      meta = new Map<string | symbol, AppendChildMetadata>();
+      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, { propertyKey, selector, options });
+  };
+}
+
+export const findAllAppendChildMetadata = (target: any): Map<string | symbol, AppendChildMetadata> => {
+  const result = new Map<string | symbol, AppendChildMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, AppendChildMetadata>>(APPEND_CHILD_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/decorators/elementDefine.ts

@@ -1,5 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { getInnerHtmlMetadataList } from './innerHtml';
+import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { getOnConnectedInnerHtmlMetadata } from './onConnectedInnerHtml';
 import { getQueryMetadata } from './query';
 import { getQueryAllMetadata } from './queryAll';
 import { getAddEventListenerMetadata } from './addEventListener';
@@ -7,13 +8,17 @@ import { ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_B
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { changedAttribute, findAllAttributeChangedMetadata } from './changedAttribute';
 import { setAttribute, findAllSetAttributeMetadata } from './setAttribute';
+import { findAllReplaceChildrenMetadata } from './replaceChildren';
+import { findAllAppendChildMetadata } from './appendChild';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
 import { SituationType, SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { ConstructorType } from '@dooboostore/core/types';
+import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
+import { Router } from '@dooboostore/core-web/routers/Router';
 import { InjectSituationType, HostSet, SwcAppInterface } from '../types';
 
-// --- Core Interfaces & Types (Integrated) ---
+// --- Core Interfaces & Types ---
 
 export interface ElementConfig {
   name: string;
@@ -25,6 +30,9 @@ export interface ElementConfig {
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
 
+// Shared state for global delegation to prevent multiple listeners on the same root
+const globalDelegatedRoots = new WeakSet<Node>();
+
 // --- Environment Initialization Helper ---
 
 function buildEnv(configWindow?: Window) {
@@ -36,14 +44,7 @@ function buildEnv(configWindow?: Window) {
     if (win?.[cls]) builtInTagMap.set(win[cls], tag);
   }
 
-  const domHelpers = {
-    $d: doc,
-    $w: win,
-    $q: (sel: string, root?: Element | Document | ShadowRoot) => (root ?? doc).querySelector(sel),
-    $qa: (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? doc).querySelectorAll(sel)),
-    $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id)
-  } as const;
-
+  const domHelpers = SwcUtils.getHelperSet(win);
   return { win, doc, builtInTagMap, domHelpers };
 }
 
@@ -58,8 +59,6 @@ export const elementDefine =
     const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;
     const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
     config.window = win;
-    const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS) as (keyof typeof SWC_DOM_HELPERS)[];
-    const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map(k => (SWC_DOM_HELPERS as any)[k]);
 
     let extendsTagName = config.extends;
     if (!extendsTagName) {
@@ -76,25 +75,26 @@ export const elementDefine =
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const setAttrMap = findAllSetAttributeMetadata(constructor);
+    const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
+    const appendChildMap = findAllAppendChildMetadata(constructor);
 
     const swcLifecycleAttributes = ['swc-on-constructor', 'swc-on-connected', 'swc-on-disconnected', 'swc-on-before-connected', 'swc-on-after-connected', 'swc-on-before-disconnected', 'swc-on-after-disconnected', 'swc-on-before-adopted', 'swc-on-after-adopted', 'swc-on-attribute-changed'];
     const swcOnEvents = DOM_EVENT_NAMES.map(e => `swc-on-${e}`);
 
     const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
-    const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
+    const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
     const NewClass = class extends (constructor as any) {
       private _swcId = Math.random().toString(36).substring(2, 11);
       private _emitHandlers = new Map<string, EventListener>();
+      private _boundListeners: Array<{ target: EventTarget; type: string; handler: EventListener; options?: any }> = [];
 
       private _executeSwcScript(attrName: string, hostSet: HostSet, extraArgs: Record<string, any> = {}) {
         const script = this.getAttribute(attrName);
         if (script) {
           try {
             const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
-            const argNames = Object.keys(args);
-            const argValues = Object.values(args);
-            new Function(...argNames, script).apply(this, argValues);
+            FunctionUtils.execute({ script, context: this, args });
           } catch (e) {
             console.error(`[SWC] Failed to execute ${attrName}:`, e);
           }
@@ -142,9 +142,13 @@ export const elementDefine =
 
         const handler = (event: any) => {
           const hostSet = SwcUtils.getHostSet(el);
-          const argNames = Object.keys(hostSet);
-          const argValues = Object.values(hostSet);
-          new Function('event', '$data', ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, (event as CustomEvent).detail, ...argValues, ...SWC_DOM_HELPER_VALS());
+          const args = {
+            event,
+            $data: (event as CustomEvent).detail,
+            ...hostSet,
+            ...SWC_DOM_HELPERS
+          };
+          FunctionUtils.execute({ script, context: el, args });
         };
 
         el.addEventListener(eventName, handler);
@@ -156,7 +160,7 @@ export const elementDefine =
         const hostSet = SwcUtils.getHostSet(this as any);
         this._executeSwcScript('swc-on-constructor', hostSet);
 
-        if (innerHtmlList.some(it => it.options.useShadow === true) && !this.shadowRoot) {
+        if (connectedInnerHtmlList.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
         }
       }
@@ -166,6 +170,10 @@ export const elementDefine =
       }
 
       async connectedCallback() {
+        const conf = getElementConfig(this);
+        const currentWin = conf?.window || window;
+        const currentDoc = currentWin.document;
+
         const hostSet = SwcUtils.getHostSet(this as any);
 
         this._executeSwcScript('swc-on-before-connected', hostSet);
@@ -176,10 +184,10 @@ export const elementDefine =
 
         if (typeof (this as any).initCore === 'function') (this as any).initCore();
 
-        if (innerHtmlList.length > 0) {
+        if (connectedInnerHtmlList.length > 0) {
           let sContent = '',
             lContent = '';
-          for (const meta of innerHtmlList) {
+          for (const meta of connectedInnerHtmlList) {
             const res = await (this as any)[meta.propertyKey]();
             if (res !== undefined) {
               if (meta.options.useShadow) sContent += res;
@@ -190,77 +198,142 @@ export const elementDefine =
           if (lContent) this.innerHTML = lContent;
         }
 
-        // --- @addEventListener binding ---
+        // --- Optimized Host Delegation ---
+        const createDelegationHandler = (delegateHost: any) => (event: Event) => {
+          if ((event as any).__swc_handled) return;
+
+          const path = event.composedPath();
+          const type = event.type;
+          const attrName = `swc-on-${type}`;
+
+          for (const node of path) {
+            if (node === delegateHost) break;
+            if (!(node instanceof HTMLElement)) continue;
+
+            const script = node.getAttribute?.(attrName);
+            if (script && !getElementConfig(node)) {
+              const host = SwcUtils.findNearestSwcHost(node);
+              if (host) {
+                const childHostSet = SwcUtils.getHostSet(node);
+                const args = {
+                  event,
+                  $data: (event as CustomEvent).detail,
+                  ...childHostSet,
+                  ...SWC_DOM_HELPERS
+                };
+                FunctionUtils.execute({ script, context: node, args });
+                (event as any).__swc_handled = true;
+                break;
+              }
+            }
+          }
+        };
+
+        // 1. Local Delegation (To itself)
+        DOM_EVENT_NAMES.forEach(type => {
+          const handler = createDelegationHandler(this);
+          this.addEventListener(type, handler);
+          this._boundListeners.push({ target: this as any, type, handler });
+        });
+
+        // 2. Structural/Global Delegation (If no parent host exists)
+        const hasParentHost = SwcUtils.findAllSwcHosts(this as any).length > 0;
+        if (!hasParentHost) {
+          const root = this.getRootNode();
+          if (!globalDelegatedRoots.has(root)) {
+            DOM_EVENT_NAMES.forEach(type => {
+              const handler = createDelegationHandler(root);
+              root.addEventListener(type, handler);
+            });
+            globalDelegatedRoots.add(root);
+          }
+        }
+
+        // --- @addEventListener binding (Direct/Delegate/Global) ---
         addEventListenerList.forEach(meta => {
           const { selector, type, options } = meta;
-          const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
-
-          if (delegate && selector && selector !== ':host') {
+          const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate, removeOnDisconnected } = options;
+          const opts = { capture, once, passive };
+
+          const bindTargets: EventTarget[] = [];
+
+          if (selector === ':window') {
+            bindTargets.push(currentWin);
+          } else if (selector === ':document') {
+            bindTargets.push(currentDoc);
+          } else if (selector === ':parentHost') {
+            if (hostSet.$parentHost) bindTargets.push(hostSet.$parentHost);
+          } else if (selector === ':appHost') {
+            if (hostSet.$appHost) bindTargets.push(hostSet.$appHost);
+          } else if (selector === ':firstHost') {
+            if (hostSet.$firstHost) bindTargets.push(hostSet.$firstHost);
+          } else if (selector === ':lastHost') {
+            if (hostSet.$lastHost) bindTargets.push(hostSet.$lastHost);
+          } else if (selector === ':firstAppHost') {
+            if (hostSet.$firstAppHost) bindTargets.push(hostSet.$firstAppHost);
+          } else if (selector === ':lastAppHost') {
+            if (hostSet.$lastAppHost) bindTargets.push(hostSet.$lastAppHost);
+          } else if (!selector || selector === ':host') {
+            bindTargets.push(this as any);
+          } else if (delegate) {
             const bindRoots: (HTMLElement | ShadowRoot)[] = [];
             const r = root || 'auto';
-            if (r === 'auto') {
-              bindRoots.push(this.shadowRoot || (this as any));
-            } else if (r === 'light') {
-              bindRoots.push(this as any);
-            } else if (r === 'shadow') {
+            if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
+            else if (r === 'light') bindRoots.push(this as any);
+            else if (r === 'shadow') {
               if (this.shadowRoot) bindRoots.push(this.shadowRoot as any);
             } else if (r === 'all') {
               bindRoots.push(this as any);
               if (this.shadowRoot) bindRoots.push(this.shadowRoot as any);
             }
 
-            bindRoots.forEach(bindRoot => {
+            bindRoots.forEach(br => {
               const handler = (event: Event) => {
-                const target = event.target as HTMLElement;
-                const matchedEl = target.closest(selector);
-                if (matchedEl && (bindRoot as any).contains(matchedEl)) {
+                const matchedEl = (event.target as HTMLElement).closest(selector);
+                if (matchedEl && (br as any).contains(matchedEl)) {
                   if (stopPropagation) event.stopPropagation();
                   if (stopImmediatePropagation) event.stopImmediatePropagation();
                   if (preventDefault) event.preventDefault();
-
-                  const hostSet = SwcUtils.getHostSet(this as any);
-                  this._invokeLifecycleMethod(meta.propertyKey, hostSet, [event, hostSet, matchedEl]);
+                  const currentHostSet = SwcUtils.getHostSet(this as any);
+                  this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
                 }
               };
-              bindRoot.addEventListener(type, handler, { capture, once, passive });
+              br.addEventListener(type, handler, opts);
+              const self: any = this;
+              if (removeOnDisconnected === true || (br !== self && br !== self.shadowRoot)) {
+                this._boundListeners.push({ target: br, type, handler, options: opts });
+              }
             });
           } else {
-            const targetEls: (HTMLElement | Element | Document | ShadowRoot | Window)[] = [];
-            if (!selector || selector === ':host') {
-              targetEls.push(this as any);
-            } else {
-              const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-              const r = root || 'auto';
-              if (r === 'auto') {
-                searchRoots.push((this.shadowRoot || (this as any)) as any);
-              } else if (r === 'light') {
-                searchRoots.push(this as any);
-              } else if (r === 'shadow') {
-                if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
-              } else if (r === 'all') {
-                searchRoots.push(this as any);
-                if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
-              }
-
-              searchRoots.forEach(sr => {
-                const found = sr.querySelectorAll(selector);
-                found.forEach(el => targetEls.push(el as any));
-              });
+            const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+            const r = root || 'auto';
+            if (r === 'auto') searchRoots.push((this.shadowRoot || (this as any)) as any);
+            else if (r === 'light') searchRoots.push(this as any);
+            else if (r === 'shadow') {
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
+            } else if (r === 'all') {
+              searchRoots.push(this as any);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
             }
 
-            targetEls.forEach(el => {
-              const handler = (event: Event) => {
-                if (stopPropagation) event.stopPropagation();
-                if (stopImmediatePropagation) event.stopImmediatePropagation();
-                if (preventDefault) event.preventDefault();
-
-                const hostSet = SwcUtils.getHostSet(this as any);
-                this._invokeLifecycleMethod(meta.propertyKey, hostSet, [event, hostSet]);
-              };
-              const opts = { capture, once, passive };
-              el.addEventListener(type, handler, opts);
+            searchRoots.forEach(sr => {
+              sr.querySelectorAll(selector).forEach(el => bindTargets.push(el));
             });
           }
+
+          bindTargets.forEach(target => {
+            const handler = (event: Event) => {
+              if (stopPropagation) event.stopPropagation();
+              if (stopImmediatePropagation) event.stopImmediatePropagation();
+              if (preventDefault) event.preventDefault();
+              const currentHostSet = SwcUtils.getHostSet(this as any);
+              this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet]);
+            };
+            target.addEventListener(type, handler, opts);
+            if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
+              this._boundListeners.push({ target, type, handler, options: opts });
+            }
+          });
         });
 
         if (super.connectedCallback) await super.connectedCallback();
@@ -279,6 +352,9 @@ export const elementDefine =
         const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
         if (bMethods) bMethods.forEach(m => this._invokeLifecycleMethod(m, hostSet));
 
+        this._boundListeners.forEach(l => l.target.removeEventListener(l.type, l.handler, l.options));
+        this._boundListeners = [];
+
         if (super.disconnectedCallback) super.disconnectedCallback();
 
         const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -354,6 +430,84 @@ export const elementDefine =
       }
     });
 
+    // --- @replaceChildren wrapping logic ---
+    replaceChildrenMap.forEach((selector, methodName) => {
+      const original = NewClass.prototype[methodName as any];
+      if (typeof original === 'function') {
+        NewClass.prototype[methodName as any] = function (...args: any[]) {
+          const res = original.apply(this, args);
+          if (res !== undefined) {
+            const conf = getElementConfig(this);
+            const currentWin = conf?.window || window;
+            const currentDoc = currentWin.document;
+
+            let targetEl: Element | null = null;
+            if (selector === ':host' || !selector) {
+              targetEl = this;
+            } else {
+              targetEl = (this.shadowRoot || this).querySelector(selector);
+            }
+
+            if (targetEl) {
+              const nodes: (Node | string)[] = Array.isArray(res) ? res : [res];
+              const normalizedNodes = nodes.map(n => {
+                if (typeof n === 'string') {
+                  const t = currentDoc.createElement('template');
+                  t.innerHTML = n;
+                  return t.content;
+                }
+                return n as Node;
+              });
+              (targetEl as any).replaceChildren(...normalizedNodes);
+            }
+          }
+          return res;
+        };
+      }
+    });
+
+    // --- @appendChild wrapping logic ---
+    appendChildMap.forEach((meta, methodName) => {
+      const { selector, options } = meta;
+      const original = NewClass.prototype[methodName as any];
+      if (typeof original === 'function') {
+        NewClass.prototype[methodName as any] = function (...args: any[]) {
+          const res = original.apply(this, args);
+          if (res !== undefined) {
+            const conf = getElementConfig(this);
+            const currentWin = conf?.window || window;
+            const currentDoc = currentWin.document;
+
+            let targetEl: Element | null = null;
+            if (selector === ':host' || !selector) {
+              targetEl = this;
+            } else {
+              targetEl = (this.shadowRoot || this).querySelector(selector);
+            }
+
+            if (targetEl) {
+              const nodes: (Node | string)[] = Array.isArray(res) ? res : [res];
+              const normalizedNodes = nodes.map(n => {
+                if (typeof n === 'string') {
+                  const t = currentDoc.createElement('template');
+                  t.innerHTML = n;
+                  return t.content;
+                }
+                return n as Node;
+              });
+
+              const pos = options.position || 'lastChild';
+              if (pos === 'lastChild') (targetEl as any).append(...normalizedNodes);
+              else if (pos === 'firstChild') (targetEl as any).prepend(...normalizedNodes);
+              else if (pos === 'nextSibling') (targetEl as any).after(...normalizedNodes);
+              else if (pos === 'previousSibling') (targetEl as any).before(...normalizedNodes);
+            }
+          }
+          return res;
+        };
+      }
+    });
+
     const originalProto = constructor.prototype;
     const newProto = NewClass.prototype;
     Object.getOwnPropertyNames(originalProto).forEach(name => {

package/src/decorators/index.ts

@@ -3,7 +3,8 @@ export * from './elementDefine';
 export * from './changedAttribute';
 export * from './setAttribute';
 export * from './emitCustomEvent';
-export * from './innerHtml';
+export * from './replaceChildren';
+export * from './appendChild';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';

package/src/decorators/{innerHtml.ts → onConnectedInnerHtml.ts}

@@ -11,9 +11,12 @@ export interface InnerHtmlMetadata {
 
 export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
 
-export function innerHtml(options: InnerHtmlOptions): MethodDecorator;
-export function innerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function innerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+/**
+ * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
+ */
+export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
+export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
@@ -25,17 +28,15 @@ export function innerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symb
   };
 
   if (arg2) {
-    // Used as @innerHtml
     return decorator({}, arg1!, arg2);
   }
 
-  // Used as @innerHtml(options)
   return (target: Object, propertyKey: string | symbol) => {
     decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
   };
 }
 
-export const getInnerHtmlMetadataList = (target: any): InnerHtmlMetadata[] | undefined => {
+export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
 };

package/src/decorators/query.ts

@@ -1,4 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
 
 export interface QueryOptions {
   root?: 'light' | 'shadow' | 'all' | 'auto';
@@ -14,8 +16,6 @@ export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
 
 /**
  * @query decorator to inject a single element into a class property.
- * Usage: @query('.my-class') myEl!: HTMLElement;
- * Usage: @query('#my-id', { root: 'shadow' }) myEl!: HTMLElement;
  */
 export function query(selector: string, options: QueryOptions = {}): PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
@@ -33,7 +33,25 @@ export function query(selector: string, options: QueryOptions = {}): PropertyDec
 
     Object.defineProperty(target, propertyKey, {
       get(this: HTMLElement) {
+        // --- Special Selectors: HostSet ---
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ':parentHost') return hostSet.$parentHost;
+        if (selector === ':appHost') return hostSet.$appHost;
+        if (selector === ':firstHost') return hostSet.$firstHost;
+        if (selector === ':lastHost') return hostSet.$lastHost;
+        if (selector === ':firstAppHost') return hostSet.$firstAppHost;
+        if (selector === ':lastAppHost') return hostSet.$lastAppHost;
+
+        // --- Special Selectors: Env ---
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+
+        if (selector === ':window') return win;
+        if (selector === ':document') return doc;
         if (!selector || selector === ':host') return this;
+
+        // --- Standard Selectors ---
         const r = options.root || 'auto';
 
         if (r === 'shadow') {
@@ -48,6 +66,18 @@ export function query(selector: string, options: QueryOptions = {}): PropertyDec
         // auto
         return (this.shadowRoot || this).querySelector(selector);
       },
+      set(this: HTMLElement, nv: any) {
+        if (nv === null || nv === undefined) {
+          const r = options.root || 'auto';
+          let targetEl: Element | null = null;
+          if (r === 'shadow') targetEl = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          else if (r === 'light') targetEl = this.querySelector(selector);
+          else if (r === 'all') targetEl = this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+          else targetEl = (this.shadowRoot || this).querySelector(selector);
+
+          if (targetEl) targetEl.remove();
+        }
+      },
       enumerable: true,
       configurable: true
     });