@dooboostore/simple-web-component 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "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.30",
     "@dooboostore/core-web": "1.0.10",
     "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.54",
-    "@dooboostore/core": "1.0.30"
+    "@dooboostore/simple-boot": "1.0.54"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/applyNode.ts

@@ -1,6 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcRootType } from '../types';
+import {SwcUtils} from "../utils/Utils";
 
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
@@ -74,14 +75,23 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
 
         const pos = options.position || 'beforeEnd';
         const r = options.root || 'auto';
-
-        const getTargetRoot = () => {
-          if (r === 'shadow') return this.shadowRoot;
-          if (r === 'light') return this as any;
-          if (r === 'all') return this.shadowRoot || (this as any);
-          return this.shadowRoot || (this as any); // 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;
         };
 
+        const hostSet = SwcUtils.getHostSet(this);
+        // const getTargetRoot = () => {
+        //   if (r === 'shadow') return this.shadowRoot;
+        //   if (r === 'light') return this as any;
+        //   if (r === 'all') return this.shadowRoot || (this as any);
+        //   return this.shadowRoot || (this as any); // auto
+        // };
+
         if (pos === 'remove') {
           // Remove element(s) if returned value is truthy
           if (res) {
@@ -94,7 +104,7 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
                 (this as any).remove();
               }
             } else {
-              const targetRoot = getTargetRoot();
+              const targetRoot = applyRoot(this);
               if (targetRoot) {
                 const targets = targetRoot.querySelectorAll(selector);
                 targets.forEach((el: Element) => el.remove());
@@ -103,14 +113,23 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
           }
         } else {
           let targetEl: any = null;
-          if (selector === ':host' || !selector) {
-            if (r === 'shadow') {
-              targetEl = this.shadowRoot;  // Target shadow DOM root
-            } else {
-              targetEl = this as any;  // Target the component itself
-            }
+
+          if (selector === ':host') {
+            targetEl =  applyRoot(this)
+          } else if (selector === ':parentHost') {
+            targetEl =  applyRoot(hostSet.$parentHost)
+          } else if (selector === ':appHost') {
+            targetEl =  applyRoot(hostSet.$appHost)
+          } else if (selector === ':firstHost') {
+            targetEl =  applyRoot(hostSet.$firstHost)
+          } else if (selector === ':lastHost') {
+            targetEl =  applyRoot(hostSet.$lastHost)
+          } else if (selector === ':firstAppHost') {
+            targetEl =  applyRoot(hostSet.$firstHost)
+          } else if (selector === ':lastAppHost') {
+            targetEl =  applyRoot(hostSet.$lastAppHost);
           } else {
-            const targetRoot = getTargetRoot();
+            const targetRoot = applyRoot(this);
             targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
           }
 
@@ -170,11 +189,28 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
 
 /**
  * @applyNodeHost decorator - simplified version of @applyNode for :host selector
+ * Usage: @applyNodeHost addItem() { return '<li>New Item</li>'; }
  * Usage: @applyNodeHost() addItem() { return '<li>New Item</li>'; }
  * Usage: @applyNodeHost({ position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }
  */
-export function applyNodeHost(options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
-  return applyNode(':host', options);
+export function applyNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeHost(): MethodDecorator;
+export function applyNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  // Direct decorator usage: @applyNodeHost (no parentheses)
+  console.log('vvvvv')
+  if (propertyKey !== undefined && typeof propertyKey === 'string' || typeof propertyKey === 'symbol') {
+    return applyNode(':host', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
+  }
+
+  // @applyNodeHost() or @applyNodeHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    const options = targetOrOptions as ApplyNodeOptions;
+    return applyNode(':host', { ...options, position: options.position || 'beforeEnd' });
+  } else {
+    // @applyNodeHost() - use default position
+    return applyNode(':host', { position: 'beforeEnd' });
+  }
 }
 
 // Convenience decorators for specific positions
@@ -182,109 +218,192 @@ export function applyNodeHost(options: ApplyNodeOptions = { position: 'beforeEnd
 /**
  * @applyBeforeBeginNode - Insert before target element
  */
-export const applyBeforeBeginNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'beforeBegin' });
+export function applyBeforeBeginNode(selector: string): MethodDecorator;
+export function applyBeforeBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeBeginNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'beforeBegin' });
+}
 
 /**
  * @applyAfterBeginNode - Prepend to target element
  */
-export const applyAfterBeginNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'afterBegin' });
+export function applyAfterBeginNode(selector: string): MethodDecorator;
+export function applyAfterBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterBeginNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'afterBegin' });
+}
 
 /**
  * @applyBeforeEndNode - Append to target element (default)
  */
-export const applyBeforeEndNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'beforeEnd' });
+export function applyBeforeEndNode(selector: string): MethodDecorator;
+export function applyBeforeEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeEndNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'beforeEnd' });
+}
 
 /**
  * @applyAfterEndNode - Insert after target element
  */
-export const applyAfterEndNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'afterEnd' });
+export function applyAfterEndNode(selector: string): MethodDecorator;
+export function applyAfterEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterEndNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'afterEnd' });
+}
 
 /**
  * @applyReplaceNode - Replace entire target element
  */
-export const applyReplaceNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'replace' });
+export function applyReplaceNode(selector: string): MethodDecorator;
+export function applyReplaceNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'replace' });
+}
 
 /**
  * @applyReplaceChildrenNode - Replace all children of target element
  */
-export const applyReplaceChildrenNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'replaceChildren' });
+export function applyReplaceChildrenNode(selector: string): MethodDecorator;
+export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceChildrenNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'replaceChildren' });
+}
 
 /**
  * @applyInnerHtmlNode - Set target's innerHTML
  */
-export const applyInnerHtmlNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'innerHtml' });
+export function applyInnerHtmlNode(selector: string): MethodDecorator;
+export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerHtmlNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'innerHtml' });
+}
 
 /**
  * @applyInnerTextNode - Set target's innerText
  */
-export const applyInnerTextNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'innerText' });
+export function applyInnerTextNode(selector: string): MethodDecorator;
+export function applyInnerTextNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerTextNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'innerText' });
+}
 
 /**
  * @applyRemoveNode - Remove target element if truthy
  */
-export const applyRemoveNode = (selector: string, options: ApplyNodeOptions = {}) => 
-  applyNode(selector, { ...options, position: 'remove' });
+export function applyRemoveNode(selector: string): MethodDecorator;
+export function applyRemoveNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyRemoveNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'remove' });
+}
 
 // Host versions
 
 /**
  * @applyBeforeBeginNodeHost - Insert before :host
  */
-export const applyBeforeBeginNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'beforeBegin' });
+export function applyBeforeBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function applyBeforeBeginNodeHost(): MethodDecorator;
+export function applyBeforeBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeBeginNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'beforeBegin' });
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(targetOrOptions as ApplyNodeOptions || {}), position: 'beforeBegin' });
+}
 
 /**
  * @applyAfterBeginNodeHost - Prepend to :host
- */
-export const applyAfterBeginNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'afterBegin' });
+ */export function applyAfterBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterBeginNodeHost(): MethodDecorator;
+export function applyAfterBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterBeginNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'afterBegin' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterBegin' });
+}
 
 /**
  * @applyBeforeEndNodeHost - Append to :host
- */
-export const applyBeforeEndNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'beforeEnd' });
+ */export function applyBeforeEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyBeforeEndNodeHost(): MethodDecorator;
+export function applyBeforeEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'beforeEnd' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'beforeEnd' });
+}
 
 /**
  * @applyAfterEndNodeHost - Insert after :host
- */
-export const applyAfterEndNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'afterEnd' });
+ */export function applyAfterEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterEndNodeHost(): MethodDecorator;
+export function applyAfterEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'afterEnd' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterEnd' });
+}
 
 /**
  * @applyReplaceNodeHost - Replace :host
- */
-export const applyReplaceNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'replace' });
+ */export function applyReplaceNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceNodeHost(): MethodDecorator;
+export function applyReplaceNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'replace' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replace' });
+}
 
 /**
  * @applyReplaceChildrenNodeHost - Replace children of :host
- */
-export const applyReplaceChildrenNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'replaceChildren' });
+ */export function applyReplaceChildrenNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceChildrenNodeHost(): MethodDecorator;
+export function applyReplaceChildrenNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceChildrenNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'replaceChildren' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replaceChildren' });
+}
 
 /**
  * @applyInnerHtmlNodeHost - Set :host innerHTML
- */
-export const applyInnerHtmlNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'innerHtml' });
+ */export function applyInnerHtmlNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerHtmlNodeHost(): MethodDecorator;
+export function applyInnerHtmlNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerHtmlNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'innerHtml' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerHtml' });
+}
 
 /**
  * @applyInnerTextNodeHost - Set :host innerText
- */
-export const applyInnerTextNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'innerText' });
+ */export function applyInnerTextNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerTextNodeHost(): MethodDecorator;
+export function applyInnerTextNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerTextNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'innerText' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerText' });
+}
 
 /**
  * @applyRemoveNodeHost - Remove :host if truthy
- */
-export const applyRemoveNodeHost = (options: ApplyNodeOptions = {}) => 
-  applyNode(':host', { ...options, position: 'remove' });
+ */export function applyRemoveNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyRemoveNodeHost(): MethodDecorator;
+export function applyRemoveNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyRemoveNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'remove' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'remove' });
+}

package/src/decorators/attribute.ts

@@ -1,7 +1,7 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import {ReflectUtils} from '@dooboostore/core';
+import {ensureInit, getElementConfig} from './elementDefine';
+import {SwcUtils} from '../utils/Utils';
+import {SpecialSelector, SwcQueryOptions} from '../types';
 
 export interface AttributeOptions extends SwcQueryOptions {
   name?: string;
@@ -97,7 +97,7 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
       metaList = [];
       ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
-    metaList.push({ propertyKey, selector, options, privateKey });
+    metaList.push({propertyKey, selector, options, privateKey});
 
     // Helper function to apply setAttribute to targets
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
@@ -183,10 +183,43 @@ export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
 };
 
 /**
- * @hostAttribute decorator - simplified version of @attribute for :host selector
- * Usage: @hostAttribute('data-product-id')
- * Usage: @hostAttribute('disabled', { type: Boolean })
+ * @attributeHost decorator - simplified version of @attribute for :host selector
+ * Usage: @attributeHost - uses field name as attribute name
+ * Usage: @attributeHost() - uses field name as attribute name
+ * Usage: @attributeHost('data-id') - uses custom attribute name
+ * Usage: @attributeHost({ type: Boolean }) - uses field name with options
+ * Usage: @attributeHost('data-id', { type: Boolean }) - uses custom name with options
  */
-export function attributeHost(attrName: string, options: AttributeOptions = {}): PropertyDecorator {
-  return attribute(':host', { ...options, name: attrName });
+export function attributeHost(target: Object, propertyKey: string | symbol): void;
+export function attributeHost(): PropertyDecorator;
+export function attributeHost(options: AttributeOptions): PropertyDecorator;
+export function attributeHost(attrName: string): PropertyDecorator;
+export function attributeHost(attrName: string, options: AttributeOptions): PropertyDecorator;
+export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
+  // Direct decorator usage: @attributeHost (no parentheses)
+  if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
+    const fieldName = String(propertyKeyOrOptions);
+    return attribute(':host', { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+  }
+
+  // @attributeHost() or @attributeHost(options) or @attributeHost('name')
+  if (typeof targetOrAttrOrOptions === 'string') {
+    // @attributeHost('customName') or @attributeHost('customName', options)
+    const attrName = targetOrAttrOrOptions;
+    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeOptions;
+    return attribute(':host', { ...options, name: attrName });
+  } else if (typeof targetOrAttrOrOptions === 'object') {
+    // @attributeHost(options) - use field name as attribute name
+    const options = targetOrAttrOrOptions as AttributeOptions;
+    return (target: Object, propertyKey: string | symbol) => {
+      const fieldName = String(propertyKey);
+      return attribute(':host', { ...options, name: fieldName })(target, propertyKey);
+    };
+  } else {
+    // @attributeHost() - use field name as attribute name
+    return (target: Object, propertyKey: string | symbol) => {
+      const fieldName = String(propertyKey);
+      return attribute(':host', { name: fieldName })(target, propertyKey);
+    };
+  }
 }

package/src/decorators/changedAttributeHost.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core';
+import {ReflectUtils} from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
 

package/src/decorators/classList.ts

@@ -34,28 +34,45 @@ function createClassListDecorator(action: ClassListAction) {
           const hostSet = SwcUtils.getHostSet(this as any);
           const targetEls: HTMLElement[] = [];
 
-          if (selector === ':host' || !selector) {
-            targetEls.push(this as any);
-          } else if (selector === ':parentHost') {
-            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-          } else if (selector === ':appHost') {
-            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-          } else {
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === 'auto') {
+              // Classes belong to the ELEMENT, not the ShadowRoot.
+              targetEls.push(t);
+            } else {
+              if (r === 'light' || r === 'all') targetEls.push(t);
+              if ((r === 'shadow' || r === 'all') && t.shadowRoot) {
+                // Technically ShadowRoot doesn't have classList, but user might have specified it.
+                // We'll skip adding shadowRoot to targetEls for class operations.
+              }
+            }
+          };
+
+          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(this);
+          else {
             if (r === 'shadow') {
               const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             } else if (r === 'light') {
               const found = (this as any).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             } else if (r === 'all') {
               const sFound = this.shadowRoot?.querySelectorAll(selector);
               const lFound = (this as any).querySelectorAll(selector);
-              if (sFound) targetEls.push(...sFound);
-              if (lFound) targetEls.push(...lFound);
+              if (sFound) targetEls.push(...(Array.from(sFound) as HTMLElement[]));
+              if (lFound) targetEls.push(...(Array.from(lFound) as HTMLElement[]));
             } else {
               // auto
               const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             }
           }
 
@@ -134,31 +151,76 @@ export const toggleClassList = (selector: string, options: SwcQueryOptions = {})
  * @setClassListHost decorator to set classes on :host element.
  * Returns: string | string[]
  */
-export const setClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('set')(':host', options);
+export function setClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function setClassListHost(): MethodDecorator;
+export function setClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function setClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('set')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('set')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @updateClassListHost decorator to update specific classes on :host.
  * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
  */
-export const updateClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('update')(':host', options);
+export function updateClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function updateClassListHost(): MethodDecorator;
+export function updateClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function updateClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('update')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('update')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @addClassListHost decorator to add classes to :host element.
  * Returns: string | string[]
  */
-export const addClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('add')(':host', options);
+export function addClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function addClassListHost(): MethodDecorator;
+export function addClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function addClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('add')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('add')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @removeClassListHost decorator to remove classes from :host element.
  * Returns: string | string[]
  */
-export const removeClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('remove')(':host', options);
+export function removeClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function removeClassListHost(): MethodDecorator;
+export function removeClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function removeClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('remove')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('remove')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 /**
  * @toggleClassListHost decorator to toggle classes on :host element.
  * Returns: string | string[]
  */
-export const toggleClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(':host', options);
+export function toggleClassListHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function toggleClassListHost(): MethodDecorator;
+export function toggleClassListHost(options: SwcQueryOptions): MethodDecorator;
+export function toggleClassListHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createClassListDecorator('toggle')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator('toggle')(':host', (targetOrOptions as SwcQueryOptions) || {});
+}
 
 export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
   const result = new Map<string | symbol, ClassListMetadata>();