@dooboostore/simple-web-component 1.0.17 → 1.0.19

package/src/decorators/emitCustomEvent.ts

@@ -1,7 +1,9 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
 
-export interface EmitCustomEventOptions {
-  type: string;
+export interface EmitCustomEventBaseOptions {
   attributeName?: string;
   bubbles?: boolean;
   composed?: boolean;
@@ -10,28 +12,90 @@ export interface EmitCustomEventOptions {
 
 export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
-  options: EmitCustomEventOptions;
+  selector: string;
+  type: string;
+  options: EmitCustomEventBaseOptions & SwcQueryOptions;
 }
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
+export function emitCustomEvent(target: SpecialSelector, type: string, options?: EmitCustomEventBaseOptions): MethodDecorator;
+export function emitCustomEvent(selector: string, type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions): MethodDecorator;
+/**
+ * @emitCustomEvent decorator to dispatch custom events to a target.
+ */
+export function emitCustomEvent(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = targetObj.constructor;
 
-export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;
+    const fullOptions: any = { ...options, type };
 
-    if (!options.attributeName) {
-      options.attributeName = `swc-on-${options.type}`;
+    if (!fullOptions.attributeName) {
+      fullOptions.attributeName = `swc-on-${type}`;
     }
-    if (options.bubbles === undefined) options.bubbles = true;
-    if (options.composed === undefined) options.composed = true;
+    if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
+    if (fullOptions.composed === undefined) fullOptions.composed = true;
 
     let list = ReflectUtils.getMetadata<EmitCustomEventMetadata[]>(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
     if (!list) {
       list = [];
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
-    list.push({ propertyKey, options });
+    list.push({ propertyKey, selector: selectorOrTarget, type, options: fullOptions });
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const detail = await original.apply(this, args);
+      const event = new CustomEvent(type, {
+        detail,
+        bubbles: fullOptions.bubbles,
+        composed: fullOptions.composed,
+        cancelable: fullOptions.cancelable
+      });
+
+      const hostSet = SwcUtils.getHostSet(this as any);
+      const conf = getElementConfig(this);
+      const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+
+      const eventTargets: EventTarget[] = [];
+      if (selectorOrTarget === ':window') eventTargets.push(currentWin);
+      else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
+      else if (selectorOrTarget === ':parentHost') {
+        if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+      } else if (selectorOrTarget === ':appHost') {
+        if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+      } else if (selectorOrTarget === ':firstHost') {
+        if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+      } else if (selectorOrTarget === ':lastHost') {
+        if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+      } else if (selectorOrTarget === ':firstAppHost') {
+        if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+      } else if (selectorOrTarget === ':lastAppHost') {
+        if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+      } else if (selectorOrTarget === ':hosts') {
+        hostSet.$hosts.forEach(h => eventTargets.push(h));
+      } else if (selectorOrTarget === ':appHosts') {
+        hostSet.$appHosts.forEach(h => eventTargets.push(h));
+      } else if (selectorOrTarget === ':host' || !selectorOrTarget) eventTargets.push(this as any);
+      else {
+        const r = fullOptions.root || 'auto';
+        const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+        if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+        else if (r === 'light') searchRoots.push(this as any);
+        else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+        else if (r === 'all') {
+          searchRoots.push(this as any);
+          if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+        }
+
+        searchRoots.forEach(sr => {
+          sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
+        });
+      }
+
+      eventTargets.forEach(t => t.dispatchEvent(event));
+      return detail;
+    };
   };
 }
 

package/src/decorators/index.ts

@@ -3,7 +3,11 @@ 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';
+export * from './onConnectedInnerHtml';
+export * from './classList';
+export * from './style';

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,71 +1,103 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { getElementConfig } from './elementDefine';
+import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
 
-export interface QueryOptions {
-  root?: 'light' | 'shadow' | 'all' | 'auto';
-}
+export type QueryOptions = { root?: 'light' | 'shadow' | 'all' | 'auto' };
 
 export interface QueryMetadata {
-  selector: string;
-  options: QueryOptions;
   propertyKey: string | symbol;
+  selector: string;
+  options: SwcQueryOptions;
 }
 
 export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
 
+export function query(target: SpecialSelector): PropertyDecorator;
+export function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;
 /**
  * @query decorator to inject a single element into a class property.
  */
-export function query(selector: string, options: QueryOptions = {}): PropertyDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+export function query(selectorOrTarget: string, options: any = {}): PropertyDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
     if (descriptor !== undefined) {
       throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
     }
 
-    const constructor = target.constructor;
+    const constructor = targetObj.constructor;
     let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey });
+    queries.push({ propertyKey, selector: selectorOrTarget, options });
 
-    Object.defineProperty(target, propertyKey, {
+    // const propertyType = Reflect.getMetadata("design:type", targetObj, propertyKey);
+    // console.log(`Property ${String(propertyKey)} type is:`, propertyType.name);
+    Object.defineProperty(targetObj, propertyKey, {
       get(this: HTMLElement) {
+        ensureInit(this);
+        const selector = selectorOrTarget;
+
+        const r = options.root || 'auto';
+        const applyRoot = (t: any) => {
+          if (!t || !(t instanceof HTMLElement)) 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; // query only returns one, so shadow preferred
+          return t;
+        };
+
         // --- 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;
+        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 === ':firstAppHost') return applyRoot(hostSet.$firstAppHost);
+        if (selector === ':lastAppHost') return applyRoot(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;
+        if (selector === ':document') return win.document;
+        if (selector === ':host') return applyRoot(this);
 
         // --- Standard Selectors ---
-        const r = options.root || 'auto';
-
-        if (r === 'shadow') {
-          return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-        }
-        if (r === 'light') {
-          return this.querySelector(selector);
-        }
+        if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+        if (r === 'light') return this.querySelector(selector);
         if (r === 'all') {
-          return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+          const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          return shadowMatch || this.querySelector(selector);
         }
-        // auto
         return (this.shadowRoot || this).querySelector(selector);
       },
+      set(this: HTMLElement, nv: any) {
+        ensureInit(this);
+        if (nv === null || nv === undefined) {
+          const selector = selectorOrTarget;
+          if (selector.startsWith(':') && selector !== ':host') return;
+
+          const r = options.root || 'auto';
+          const targets: Element[] = [];
+
+          if (r === 'shadow') {
+            if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
+          } else if (r === 'light') {
+            if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+          } else if (r === 'all') {
+            if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
+            if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+          } else {
+            const el = (this.shadowRoot || this).querySelector(selector);
+            if (el) targets.push(el);
+          }
+
+          targets.forEach(t => t.remove());
+        }
+      },
       enumerable: true,
       configurable: true
     });

package/src/decorators/queryAll.ts

@@ -1,69 +1,101 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { getElementConfig } from './elementDefine';
+import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-
-export interface QueryAllOptions {
-  root?: 'light' | 'shadow' | 'all' | 'auto';
-}
+import { SpecialSelector, SwcQueryOptions } from '../types';
 
 export interface QueryAllMetadata {
-  selector: string;
-  options: QueryAllOptions;
   propertyKey: string | symbol;
+  selector: string;
+  options: SwcQueryOptions;
 }
 
 export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
 
+export function queryAll(target: SpecialSelector): PropertyDecorator;
+export function queryAll(selector: string, options?: SwcQueryOptions): PropertyDecorator;
 /**
  * @queryAll decorator to inject a list of elements into a class property.
  */
-export function queryAll(selector: string, options: QueryAllOptions = {}): PropertyDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+export function queryAll(selectorOrTarget: string, options: any = {}): PropertyDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
     if (descriptor !== undefined) {
       throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
     }
 
-    const constructor = target.constructor;
+    const constructor = targetObj.constructor;
     let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey });
+    queries.push({ propertyKey, selector: selectorOrTarget, options });
 
-    Object.defineProperty(target, propertyKey, {
+    Object.defineProperty(targetObj, propertyKey, {
       get(this: HTMLElement) {
+        ensureInit(this);
+        const selector = selectorOrTarget;
+
+        const r = options.root || 'auto';
+        const applyRoot = (t: any): any[] => {
+          if (!t) return [];
+          const items = Array.isArray(t) ? t : [t];
+          const results: any[] = [];
+          items.forEach(it => {
+            if (!(it instanceof HTMLElement)) {
+              results.push(it);
+              return;
+            }
+            if (r === 'auto') results.push(it.shadowRoot || it);
+            else {
+              if (r === 'light' || r === 'all') results.push(it);
+              if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);
+            }
+          });
+          return results;
+        };
+
         // --- Special Selectors: HostSet ---
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ':hosts') return hostSet.$hosts;
-        if (selector === ':appHosts') return hostSet.$appHosts;
+        if (selector === ':hosts') return applyRoot(hostSet.$hosts);
+        if (selector === ':appHosts') return applyRoot(hostSet.$appHosts);
 
         // --- 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];
+        if (selector === ':document') return [win.document];
+        if (selector === ':host') return applyRoot(this);
 
         // --- Standard Selectors ---
-        const r = options.root || 'auto';
-
-        if (r === 'shadow') {
-          return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
-        }
-        if (r === 'light') {
-          return this.querySelectorAll(selector);
-        }
+        if (r === 'shadow') return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+        if (r === 'light') return Array.from(this.querySelectorAll(selector));
         if (r === 'all') {
           const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
           const lNodes = Array.from(this.querySelectorAll(selector));
           return [...sNodes, ...lNodes];
         }
-        // auto
         const root = this.shadowRoot || this;
-        return root.querySelectorAll(selector);
+        return Array.from(root.querySelectorAll(selector));
+      },
+      set(this: HTMLElement, nv: any) {
+        ensureInit(this);
+        if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
+          const selector = selectorOrTarget;
+          if (selector.startsWith(':') && selector !== ':host') return;
+
+          const r = options.root || 'auto';
+          let targets: (Element | Node)[] = [];
+          if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          else if (r === 'light') targets = Array.from(this.querySelectorAll(selector));
+          else if (r === 'all') {
+            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            const lNodes = Array.from(this.querySelectorAll(selector));
+            targets = [...sNodes, ...lNodes];
+          } else {
+            targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+          }
+          targets.forEach(t => (t as Element).remove());
+        }
       },
       enumerable: true,
       configurable: true

package/src/decorators/replaceChildren.ts

@@ -0,0 +1,64 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ensureInit, getElementConfig } from './elementDefine';
+
+export const REPLACE_CHILDREN_METADATA_KEY = Symbol('simple-web-component:replace-children');
+
+/**
+ * @replaceChildren decorator to surgically replace children of a target element.
+ * Usage: @replaceChildren('#container') renderPart() { return '<div>New Content</div>'; }
+ */
+export function replaceChildren(selector: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor) as Map<string | symbol, string>;
+    if (!meta) {
+      meta = new Map<string | symbol, string>();
+      ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, selector);
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const res = await original.apply(this, args);
+      if (res !== undefined) {
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const currentDoc = currentWin.document;
+
+        let targetEl: Element | null = null;
+        if (selector === ':host' || !selector) {
+          targetEl = this as any;
+        } else {
+          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        }
+
+        if (targetEl) {
+          if (typeof res === 'string') {
+            targetEl.textContent = res;
+          } else {
+            const nodes: Node[] = Array.isArray(res) ? res.map(n => (typeof n === 'string' ? currentDoc.createTextNode(n) : n)) : [res as Node];
+            (targetEl as any).replaceChildren(...nodes);
+          }
+        }
+      }
+      return res;
+    };
+  };
+}
+
+export const getReplaceChildrenMetadata = (target: any): Map<string | symbol, string> | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+};
+
+export const findAllReplaceChildrenMetadata = (target: any): Map<string | symbol, string> => {
+  const result = new Map<string | symbol, string>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, string>>(REPLACE_CHILDREN_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/decorators/setAttribute.ts

@@ -1,27 +1,69 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+
+export interface SetAttributeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  name: string;
+}
 
 export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
 
-export function setAttribute(attributeName?: string): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
+/**
+ * @setAttribute decorator to surgically update an attribute of a target element.
+ * Usage: @setAttribute(':host', 'count')
+ * Usage: @setAttribute('#child', 'disabled')
+ */
+export function setAttribute(selector: string, name: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
-    let meta = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string, string | symbol>;
-    if (!meta) {
-      meta = new Map<string, string | symbol>();
-      ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, meta, constructor);
+    let metaList = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string | symbol, SetAttributeMetadata>;
+    if (!metaList) {
+      metaList = new Map<string | symbol, SetAttributeMetadata>();
+      ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
-    meta.set(attributeName || String(propertyKey), propertyKey);
+    metaList.set(propertyKey, { propertyKey, selector, name });
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const res = await original.apply(this, args);
+      if (res !== undefined) {
+        const hostSet = SwcUtils.getHostSet(this as any);
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+
+        let targetEl: HTMLElement | null = null;
+        if (selector === ':host' || !selector) targetEl = this as any;
+        else if (selector === ':window') targetEl = currentWin as any;
+        else if (selector === ':document') targetEl = currentWin.document as any;
+        else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
+        else if (selector === ':appHost') targetEl = hostSet.$appHost;
+        else if (selector === ':firstHost') targetEl = hostSet.$firstHost;
+        else if (selector === ':lastHost') targetEl = hostSet.$lastHost;
+        else if (selector === ':firstAppHost') targetEl = hostSet.$firstAppHost;
+        else if (selector === ':lastAppHost') targetEl = hostSet.$lastAppHost;
+        else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+
+        if (targetEl) {
+          if (res === null) targetEl.removeAttribute(name);
+          else targetEl.setAttribute(name, String(res));
+        }
+      }
+      return res;
+    };
   };
 }
 
-export const getSetAttributeMetadata = (target: any): Map<string, string | symbol> | undefined => {
+export const getSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor);
 };
 
-export const findAllSetAttributeMetadata = (target: any): Map<string, string | symbol> => {
-  const result = new Map<string, string | symbol>();
-  const maps = ReflectUtils.findAllMetadata<any>(SET_ATTRIBUTE_METADATA_KEY, target);
+export const findAllSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> => {
+  const result = new Map<string | symbol, SetAttributeMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, SetAttributeMetadata>>(SET_ATTRIBUTE_METADATA_KEY, target);
   maps.forEach(map => {
     if (map instanceof Map) {
       map.forEach((v, k) => result.set(k, v));

package/src/decorators/style.ts

@@ -0,0 +1,89 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ensureInit } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+
+export type StyleAction = 'set' | 'update' | 'remove';
+
+export interface StyleMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  action: StyleAction;
+}
+
+export const STYLE_METADATA_KEY = Symbol('simple-web-component:style');
+
+function createStyleDecorator(action: StyleAction) {
+  return (selector: string): MethodDecorator => {
+    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+      const constructor = target.constructor;
+      let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleMetadata>;
+      if (!metaList) {
+        metaList = new Map<string | symbol, StyleMetadata>();
+        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
+      }
+      metaList.set(propertyKey, { propertyKey, selector, action });
+
+      const original = descriptor.value;
+      descriptor.value = async function (...args: any[]) {
+        ensureInit(this);
+        const res = await original.apply(this, args);
+        if (res !== undefined) {
+          const hostSet = SwcUtils.getHostSet(this as any);
+          let targetEl: HTMLElement | null = null;
+          if (selector === ':host' || !selector) targetEl = this as any;
+          else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
+          else if (selector === ':appHost') targetEl = hostSet.$appHost;
+          else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+
+          if (targetEl) {
+            if (action === 'set') {
+              targetEl.style.cssText = '';
+              if (typeof res === 'object' && res !== null) {
+                Object.assign(targetEl.style, res);
+              } else if (typeof res === 'string') {
+                targetEl.style.cssText = res;
+              }
+            } else if (action === 'update') {
+              if (typeof res === 'object' && res !== null) {
+                Object.assign(targetEl.style, res);
+              }
+            } else if (action === 'remove') {
+              const props = Array.isArray(res) ? res : [res];
+              props.forEach(p => targetEl!.style.removeProperty(String(p)));
+            }
+          }
+        }
+        return res;
+      };
+    };
+  };
+}
+
+/**
+ * @setStyle decorator to surgically set styles on a target element (replaces all existing styles).
+ * Usage: @setStyle('#box') getStyles() { return { color: 'red', display: 'block' }; }
+ */
+export const setStyle = createStyleDecorator('set');
+
+/**
+ * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
+ * Usage: @updateStyle('#box') updateStyles() { return { color: 'blue' }; }
+ */
+export const updateStyle = createStyleDecorator('update');
+
+/**
+ * @removeStyle decorator to surgically remove styles from a target element.
+ * Usage: @removeStyle('#box') clearStyles() { return ['color', 'display']; }
+ */
+export const removeStyle = createStyleDecorator('remove');
+
+export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
+  const result = new Map<string | symbol, StyleMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleMetadata>>(STYLE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};