@dooboostore/simple-web-component 1.0.23 → 1.0.25

package/src/decorators/attribute.ts

@@ -1,26 +1,23 @@
-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 {
+export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
   connectedInitialize?: boolean;
   type?: typeof Number | typeof Boolean | typeof String;
 }
 
-export interface AttributeMetadata {
+export interface AttributeFieldMetadata {
   propertyKey: string | symbol;
   selector: string;
-  options: AttributeOptions;
-  privateKey: symbol; // Added to bypass getter during initialization
+  options: AttributeFieldOptions;
+  privateKey: symbol;
 }
 
-export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+export const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');
 
-/**
- * Helper to perform type conversion from string to target type
- */
 const convertValue = (val: string | null, type: any): any => {
   if (val === null || val === undefined) return val;
   if (type === Number) return Number(val);
@@ -28,18 +25,13 @@ const convertValue = (val: string | null, type: any): any => {
   return val;
 };
 
-/**
- * Helper to resolve target elements based on selector and root options
- */
-export const resolveTargetEls = (inst: any, selector: string, options: AttributeOptions, currentWin: any): HTMLElement[] => {
+export const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
 
   const applyRoot = (target: any) => {
     if (!target) return;
     if (r === 'auto') {
-      // Attributes belong to the ELEMENT, not the ShadowRoot.
-      // So for :host and direct attribute sync, we mostly want the element itself.
       results.push(target);
     } else {
       if (r === 'light' || r === 'all') results.push(target);
@@ -85,24 +77,22 @@ export const resolveTargetEls = (inst: any, selector: string, options: Attribute
 /**
  * @attribute decorator to sync a field value with an element's attribute.
  */
-export function attribute(selector: string, options: AttributeOptions = {}): PropertyDecorator {
+export function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     const privateKey = Symbol(String(propertyKey));
 
     const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);
 
-    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor) as AttributeMetadata[];
+    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];
     if (!metaList) {
       metaList = [];
-      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+      ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_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) => {
       targets.forEach(it => {
-        console.log('----->', it)
         if (it && typeof (it as any).setAttribute === 'function') {
           if (nv === null) {
             (it as any).removeAttribute(attrName);
@@ -122,8 +112,6 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
         const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
         const targetType = options.type || designType;
 
-        console.log('type-->', propertyKey, targetType);
-        // During early init phase, if syncing memory to DOM, return memory.
         if (this.__swc_syncing_init || (options.connectedInitialize && !this.__swc_connected)) {
           return convertValue(this[privateKey], targetType);
         }
@@ -142,33 +130,25 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
         return convertValue(this[privateKey], targetType);
       },
       set(this: any, nv: any) {
-        const targetType = options.type || designType;
-        // console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
-
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
-        // During initialization/syncing phase
         if (this.__swc_syncing_init) {
-          // If connectedInitialize is enabled, force setAttribute (JS -> DOM)
           if (options.connectedInitialize === true) {
             const targets = resolveTargetEls(this, selector, options, currentWin);
             applySetAttribute(this, targets, attrName, nv);
           } else {
-            // Otherwise just update memory
             this[privateKey] = nv;
           }
           return;
         }
 
-        // Before connected, save to memory only
         if (!this.__swc_connected) {
           this[privateKey] = nv;
           return;
         }
 
-        // After connected, normal setAttribute
         const targets = resolveTargetEls(this, selector, options, currentWin);
         applySetAttribute(this, targets, attrName, nv);
       },
@@ -178,15 +158,34 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
   };
 }
 
-export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
-  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target).flat();
-};
-
 /**
- * @hostAttribute decorator - simplified version of @attribute for :host selector
- * Usage: @hostAttribute('data-product-id')
- * Usage: @hostAttribute('disabled', { type: Boolean })
+ * @attributeHost decorator to sync a field value with the :host element's attribute.
  */
-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(options: AttributeFieldOptions): PropertyDecorator;
+export function attributeHost(attrName: string): PropertyDecorator;
+export function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
+export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
+  if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
+    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
+  }
+
+  if (typeof targetOrAttrOrOptions === 'string') {
+    const attrName = targetOrAttrOrOptions;
+    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;
+    return attribute(':host', { ...options, name: attrName });
+  } else if (typeof targetOrAttrOrOptions === 'object') {
+    const options = targetOrAttrOrOptions as AttributeFieldOptions;
+    return (target: Object, propertyKey: string | symbol) => {
+      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);
+    };
+  } else {
+    return (target: Object, propertyKey: string | symbol) => {
+      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);
+    };
+  }
 }
+
+export const findAllAttributeMetadata = (target: any): AttributeFieldMetadata[] => {
+  return ReflectUtils.findAllMetadata<AttributeFieldMetadata[]>(ATTRIBUTE_FIELD_METADATA_KEY, target).flat();
+};

package/src/decorators/changedAttributeHost.ts

@@ -1,6 +1,6 @@
-import { ReflectUtils } from '@dooboostore/core';
+import {ReflectUtils} from '@dooboostore/core';
 
-export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
 /**
  * @changedAttributeHost decorator - fires when any attribute on :host changes

package/src/decorators/elementDefine.ts

@@ -4,7 +4,7 @@ import { getAddEventListenerMetadata } from './addEventListener';
 import { ON_CONSTRUCTOR_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { findAllAttributeChangedMetadata } from './changedAttributeHost';
-import { findAllSetAttributeMetadata } from './setAttribute';
+import { findAllAttributeApplyMetadata } from './applyAttribute';
 import { findAllAttributeMetadata } from './attribute';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
@@ -13,7 +13,7 @@ import { InjectSituationType, HostSet } from '../types';
 
 // --- Core Interfaces & Types ---
 
-export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
+export const ELEMENT_CONFIG_KEY = Symbol.for('simple-web-component:element-config');
 
 export interface ElementConfig {
   extends?: string;
@@ -161,7 +161,6 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      console.log('execute handler', event);
       const parent = SwcUtils.findNearestSwcHost(el);
       const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
@@ -185,7 +184,6 @@ const setupPrototype = (proto: any) => {
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
 
-      console.log('execute handler2', event);
     const parent = SwcUtils.findNearestSwcHost(el);
     const hostSet = SwcUtils.getHostSet(parent || el);
     const conf = getElementConfig(this);
@@ -231,15 +229,26 @@ export const elementDefine =
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
     const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
-    const addHostEventListenerList = addEventListenerList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const attributeList = findAllAttributeMetadata(constructor);
+    const applyAttributeMap = findAllAttributeApplyMetadata(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}`);
 
     // Collect all observed attributes from all decorators
-    const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map(it => it.name), ...attributeList.map(it => it.options.name || String(it.propertyKey)), ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
+    const attributeApplyNames = Array.from(applyAttributeMap.values()).map(it => it.options.name).filter(Boolean) as string[];
+    const attributeListNames = attributeList.map(it => it.options.name || String(it.propertyKey));
+    
+    const mergedObservedAttributes = [...new Set([
+      ...(metadata.observedAttributes ?? []), 
+      ...attrChangeMap.keys(), 
+      ...attributeApplyNames,
+      ...attributeListNames, 
+      ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), 
+      ...swcLifecycleAttributes, 
+      ...swcOnEvents
+    ])];
 
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
@@ -264,22 +273,19 @@ export const elementDefine =
         for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
       }
 
-      // Initialize @attribute fields (DOM <-> JS Sync)
+      // Initialize @attribute fields
       attributeList.forEach(meta => {
-        const attrName = meta.options.name || String(meta.propertyKey);
         if (meta.options.connectedInitialize === true) {
-          // JS -> DOM (FORCE OVERWRITE with JS value)
           (this as any).__swc_syncing_init = true;
           try {
             const memoryVal = (this as any)[meta.privateKey];
             if (memoryVal !== undefined) {
-              (this as any)[meta.propertyKey] = memoryVal; // Trigger setter to update DOM
+              (this as any)[meta.propertyKey] = memoryVal;
             }
           } finally {
             (this as any).__swc_syncing_init = false;
           }
         }
-        // else: Do NOT sync - Keep the default value from class initialization
       });
 
       if (connectedInnerHtmlList.length > 0) {
@@ -316,7 +322,6 @@ export const elementDefine =
         }
       });
 
-      // Group delegate listeners by (type, root) combination
       const delegatesByTypeAndRoot = new Map<string, any[]>();
       delegateListeners.forEach(meta => {
         const r = meta.options.root || 'auto';
@@ -327,7 +332,6 @@ export const elementDefine =
         delegatesByTypeAndRoot.get(rootKey)!.push(meta);
       });
 
-      // Register unified handlers for delegate listeners
       delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
         const [type, rStr] = typeRootKey.split(':');
         const r = rStr === 'auto' ? 'auto' : rStr;
@@ -343,11 +347,10 @@ export const elementDefine =
         }
 
         bindRoots.forEach(br => {
-          // Sort: stopPropagation handlers first (more specific/terminal actions)
           const sortedMetaList = [...metaList].sort((a, b) => {
             const aStop = a.options.stopPropagation ? 1 : 0;
             const bStop = b.options.stopPropagation ? 1 : 0;
-            return bStop - aStop;  // stopPropagation: true comes first
+            return bStop - aStop;
           });
           
           const unifiedHandler = async (event: Event) => {
@@ -361,8 +364,6 @@ export const elementDefine =
                 const currentHostSet = SwcUtils.getHostSet(this as any);
                 const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
                 await (this as any)[meta.propertyKey](event, currentHostSet, matchedEl, args);
-                
-                // Stop processing if event propagation was stopped
                 if ((event as any).cancelBubble) break;
               }
             }
@@ -372,7 +373,6 @@ export const elementDefine =
         });
       });
 
-      // Process non-delegate listeners
       nonDelegateListeners.forEach(meta => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
@@ -430,24 +430,6 @@ export const elementDefine =
         });
       });
 
-      addHostEventListenerList.forEach(meta => {
-        const { type, options } = meta;
-        const opts = { capture: options.capture, once: options.once, passive: options.passive };
-
-        const handler = async (event: Event) => {
-          if (options.stopPropagation) event.stopPropagation();
-          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-          if (options.preventDefault) event.preventDefault();
-          const currentHostSet = SwcUtils.getHostSet(this as any);
-          const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
-          await (this as any)[meta.propertyKey](event, currentHostSet, args);
-        };
-        this.addEventListener(type, handler, opts);
-        if (options.removeOnDisconnected === true) {
-          (this as any)._boundListeners.push({ target: this, type, handler, options: opts });
-        }
-      });
-
       if (originalConnected) originalConnected.apply(this);
 
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
@@ -509,7 +491,6 @@ export const elementDefine =
 
       const hSet = SwcUtils.getHostSet(this as any);
 
-      // Handle swc-on-* events
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
           const eventName = name.substring(7);
@@ -517,13 +498,11 @@ export const elementDefine =
         }
       }
 
-      // Handle @emitHostCustomEvent attribute changes
       const hostCustomEventMeta = emitHostCustomEventList.find(it => (it.options as any).attributeName === name);
       if (hostCustomEventMeta && newVal !== null) {
         (this as any)._bindAttributeEvent(this as any, name, newVal, hostCustomEventMeta.type);
       }
 
-      // Handle @changedAttribute callbacks
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
         for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);

package/src/decorators/emitCustomEvent.ts

@@ -16,7 +16,7 @@ export interface EmitCustomEventMetadata {
   options: (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
 }
 
-export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
+export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('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;
 /**
@@ -102,12 +102,15 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 
 /**
  * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
- * Usage: @emitCustomEventHost('navigate')
+ * Usage: @emitCustomEventHost('navigate') // default attributeName: 'on-emit-navigate'
  * Usage: @emitCustomEventHost('navigate', { attributeName: 'on-navigate' })
  * 
  * The attributeName option is used to automatically observe attributes for this event.
  * For example, { attributeName: 'on-navigate' } will add 'on-navigate' to observedAttributes.
  */
-export function emitCustomEventHost(type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator {
+export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string } = {}): MethodDecorator {
+  if (!options.attributeName) {
+    options.attributeName = `on-emit-${type}`;
+  }
   return emitCustomEvent(':host', type, options);
 }

package/src/decorators/index.ts

@@ -2,11 +2,11 @@ export * from './addEventListener';
 export * from './attribute';
 export * from './elementDefine';
 export * from './changedAttributeHost';
-export * from './setAttribute';
 export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';
-export * from './classList';
-export * from './style';
+export * from './applyClass';
+export * from './applyStyle';
+export * from './applyAttribute';

package/src/decorators/lifecycles.ts

@@ -1,16 +1,14 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttributeHost';
-import { SET_ATTRIBUTE_METADATA_KEY } from './setAttribute';
 
-export const ON_CONSTRUCTOR_METADATA_KEY = Symbol('simple-web-component:on-constructor');
-export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');
-export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');
-export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');
-export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');
-export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
-export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
-export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
-export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
+export const ON_CONSTRUCTOR_METADATA_KEY = Symbol.for('simple-web-component:on-constructor');
+export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-connected');
+export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-connected');
+export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-disconnected');
+export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-disconnected');
+export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
+export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
+export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
+export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 

package/src/decorators/query.ts

@@ -9,7 +9,7 @@ export interface QueryMetadata {
   options: SwcQueryOptions;
 }
 
-export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
+export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
 
 export function query(target: SpecialSelector): PropertyDecorator;
 export function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;
@@ -108,10 +108,152 @@ export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
 };
 
 /**
- * @hostQuery decorator - simplified version of @query for :host selector
- * Usage: @hostQuery()
- * Usage: @hostQuery({ root: 'shadow' })
+ * @queryHost decorator - simplified version of @query for :host selector
+ * Usage: @queryHost testzzs: HTMLElement | undefined;
+ * Usage: @queryHost() testzzs: HTMLElement | undefined;
+ * Usage: @queryHost({ root: 'shadow' }) testzzs: HTMLElement | undefined;
  */
-export function queryHost(options?: SwcQueryOptions): PropertyDecorator {
-  return query(':host', options);
+export function queryHost(target: Object, propertyKey: string | symbol): void;
+export function queryHost(): PropertyDecorator;
+export function queryHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  // Direct decorator usage: @queryHost (no parentheses)
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':host', {})(targetOrOptions, propertyKey);
+  }
+
+  // @queryHost() or @queryHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':host', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':host', {});
+  }
+}
+
+/**
+ * @host - Alias for @queryHost decorator
+ * Usage: @host element: HTMLElement | undefined;
+ * Usage: @host() element: HTMLElement | undefined;
+ * Usage: @host({ root: 'shadow' }) element: HTMLElement | undefined;
+ */
+export const host = queryHost;
+
+/**
+ * @parentHost - Query :parentHost (Direct parent SWC component)
+ * Usage: @parentHost parent: HTMLElement | undefined;
+ * Usage: @parentHost() parent: HTMLElement | undefined;
+ * Usage: @parentHost({ root: 'shadow' }) parent: HTMLElement | undefined;
+ */
+export function parentHost(target: Object, propertyKey: string | symbol): void;
+export function parentHost(): PropertyDecorator;
+export function parentHost(options: SwcQueryOptions): PropertyDecorator;
+export function parentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':parentHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':parentHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':parentHost', {});
+  }
+}
+
+/**
+ * @appHost - Query :appHost (Nearest <swc-app>)
+ * Usage: @appHost app: SwcAppInterface | undefined;
+ * Usage: @appHost() app: SwcAppInterface | undefined;
+ * Usage: @appHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function appHost(target: Object, propertyKey: string | symbol): void;
+export function appHost(): PropertyDecorator;
+export function appHost(options: SwcQueryOptions): PropertyDecorator;
+export function appHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':appHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':appHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':appHost', {});
+  }
+}
+
+/**
+ * @firstHost - Query :firstHost (First component in hierarchy)
+ * Usage: @firstHost first: HTMLElement | undefined;
+ * Usage: @firstHost() first: HTMLElement | undefined;
+ * Usage: @firstHost({ root: 'shadow' }) first: HTMLElement | undefined;
+ */
+export function firstHost(target: Object, propertyKey: string | symbol): void;
+export function firstHost(): PropertyDecorator;
+export function firstHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstHost', {});
+  }
+}
+
+/**
+ * @lastHost - Query :lastHost (Last component in hierarchy)
+ * Usage: @lastHost last: HTMLElement | undefined;
+ * Usage: @lastHost() last: HTMLElement | undefined;
+ * Usage: @lastHost({ root: 'shadow' }) last: HTMLElement | undefined;
+ */
+export function lastHost(target: Object, propertyKey: string | symbol): void;
+export function lastHost(): PropertyDecorator;
+export function lastHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastHost', {});
+  }
+}
+
+/**
+ * @firstAppHost - Query :firstAppHost (First <swc-app> in hierarchy)
+ * Usage: @firstAppHost app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost() app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function firstAppHost(target: Object, propertyKey: string | symbol): void;
+export function firstAppHost(): PropertyDecorator;
+export function firstAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstAppHost', {});
+  }
+}
+
+/**
+ * @lastAppHost - Query :lastAppHost (Last <swc-app> in hierarchy)
+ * Usage: @lastAppHost app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost() app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function lastAppHost(target: Object, propertyKey: string | symbol): void;
+export function lastAppHost(): PropertyDecorator;
+export function lastAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastAppHost', {});
+  }
 }