@dooboostore/simple-web-component 1.0.21 → 1.0.22

package/package.json

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

package/src/decorators/addEventListener.ts

@@ -44,3 +44,12 @@ export const getAddEventListenerMetadata = (target: any): AddEventListenerMetada
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };
+
+/**
+ * @addEventListenerHost decorator - simplified version of @addEventListener for :host selector
+ * Usage: @addEventListenerHost('click')
+ * Usage: @addEventListenerHost('click', { stopPropagation: true })
+ */
+export function addEventListenerHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener(':host', type, options);
+}

package/src/decorators/applyNode.ts

@@ -0,0 +1,127 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+
+export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText';
+
+export interface ApplyNodeOptions {
+  position?: ApplyNodePosition;
+}
+
+export interface ApplyNodeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: ApplyNodeOptions;
+}
+
+export const APPLY_NODE_METADATA_KEY = Symbol('simple-web-component:apply-node');
+
+const normalizeNodes = (res: any, doc: Document): Node[] => {
+  const items = Array.isArray(res) ? res : [res];
+  return items.map(it => {
+    if (it instanceof Node) return it;
+    return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+  });
+};
+
+/**
+ * @applyNode decorator to surgically add/replace nodes to a target element.
+ * 
+ * Usage examples:
+ *   @applyNode('#list') addItem() { return '<li>New Item</li>'; }  // append at end
+ *   @applyNode('#header', { position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }  // prepend at start
+ *   @applyNode('#item', { position: 'replace' }) replaceItem() { return '<div>Replaced</div>'; }  // replace element
+ *   @applyNode('#list', { position: 'replaceChildren' }) updateList() { return [item1, item2]; }  // replace all children
+ * 
+ * Positions:
+ *   - 'beforeEnd' (default): Append at end of target
+ *   - 'afterBegin': Prepend at start of target
+ *   - 'beforeBegin': Insert before target
+ *   - 'afterEnd': Insert after target
+ *   - 'replace': Replace the entire target element
+ *   - 'replaceChildren': Replace all children of target element
+ *   - 'innerHtml': Set target's innerHTML
+ *   - 'innerText': Set target's innerText
+ */
+export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor) as Map<string | symbol, ApplyNodeMetadata>;
+    if (!metaList) {
+      metaList = new Map<string | symbol, ApplyNodeMetadata>();
+      ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.set(propertyKey, { propertyKey, selector, options });
+
+    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: HTMLElement | null = null;
+        if (selector === ':host' || !selector) {
+          targetEl = this as any;
+        } else {
+          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        }
+
+        if (targetEl) {
+          const nodes = normalizeNodes(res, currentDoc);
+          const pos = options.position || 'beforeEnd';
+
+          if (pos === 'replace') {
+            // Replace the entire target element with new nodes
+            targetEl.replaceWith(...nodes);
+          } else if (pos === 'replaceChildren') {
+            // Replace all children of target element
+            targetEl.replaceChildren(...nodes);
+          } else if (pos === 'innerHtml') {
+            // Set innerHTML
+            targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
+          } else if (pos === 'innerText') {
+            // Set innerText
+            targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+          } else {
+            /*
+                  <!-- beforebegin -->
+                  <p>
+                    <!-- afterbegin -->
+                    foo
+                    <!-- beforeend -->
+                  </p>
+                  <!-- afterend -->
+             */
+            if (pos === 'beforeEnd') targetEl.append(...nodes);
+            else if (pos === 'afterBegin') targetEl.prepend(...nodes);
+            else if (pos === 'beforeBegin') targetEl.before(...nodes);
+            else if (pos === 'afterEnd') targetEl.after(...nodes);
+          }
+        }
+      }
+      return res;
+    };
+  };
+}
+
+export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, ApplyNodeMetadata> => {
+  const result = new Map<string | symbol, ApplyNodeMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ApplyNodeMetadata>>(APPLY_NODE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
+/**
+ * @applyNodeHost decorator - simplified version of @applyNode for :host selector
+ * 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);
+}

package/src/decorators/attribute.ts

@@ -99,6 +99,22 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
     }
     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);
+          } else {
+            (it as any).setAttribute(attrName, String(nv));
+          }
+        } else {
+          inst[privateKey] = nv;
+        }
+      });
+    };
+
     Object.defineProperty(target, propertyKey, {
       get(this: any) {
         const attrName = options.name || String(propertyKey);
@@ -127,25 +143,34 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
       },
       set(this: any, nv: any) {
         const targetType = options.type || designType;
-        // const convertedValue = convertValue(nv, targetType);
-        // console.log('---set', propertyKey, targetType, nv, convertedValue);
+        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);
-        const targets = resolveTargetEls(this, selector, options, currentWin);
-        targets.forEach(it => {
-          console.log('----->', it)
-          if (it && typeof (it as any).setAttribute === 'function') {
-            if (nv === null) {
-              (it as any).removeAttribute(attrName);
-            } else {
-              (it as any).setAttribute(attrName, String(nv));
-            }
+
+        // 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);
       },
       enumerable: true,
       configurable: true
@@ -156,3 +181,12 @@ 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 })
+ */
+export function attributeHost(attrName: string, options: AttributeOptions = {}): PropertyDecorator {
+  return attribute(':host', { ...options, name: attrName });
+}

package/src/decorators/{changedAttribute.ts → changedAttributeHost.ts}

@@ -2,7 +2,11 @@ import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
 
-export function changedAttribute(attributeName?: string): MethodDecorator {
+/**
+ * @changedAttributeHost decorator - fires when any attribute on :host changes
+ * Usage: @changedAttributeHost('data-product-id')
+ */
+export function changedAttributeHost(attributeName?: string): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as Map<string, (string | symbol)[]>;

package/src/decorators/classList.ts

@@ -105,6 +105,38 @@ export const removeClassList = createClassListDecorator('remove');
  */
 export const toggleClassList = createClassListDecorator('toggle');
 
+// Host-specific versions (for :host selector)
+
+/**
+ * @setClassListHost decorator to set classes on :host element.
+ * Returns: string | string[]
+ */
+export const setClassListHost = createClassListDecorator('set').bind(null, ':host');
+
+/**
+ * @updateClassListHost decorator to update specific classes on :host.
+ * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
+ */
+export const updateClassListHost = createClassListDecorator('update').bind(null, ':host');
+
+/**
+ * @addClassListHost decorator to add classes to :host element.
+ * Returns: string | string[]
+ */
+export const addClassListHost = createClassListDecorator('add').bind(null, ':host');
+
+/**
+ * @removeClassListHost decorator to remove classes from :host element.
+ * Returns: string | string[]
+ */
+export const removeClassListHost = createClassListDecorator('remove').bind(null, ':host');
+
+/**
+ * @toggleClassListHost decorator to toggle classes on :host element.
+ * Returns: string | string[]
+ */
+export const toggleClassListHost = createClassListDecorator('toggle').bind(null, ':host');
+
 export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
   const result = new Map<string | symbol, ClassListMetadata>();
   const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ClassListMetadata>>(CLASS_LIST_METADATA_KEY, target);

package/src/decorators/elementDefine.ts

@@ -2,14 +2,10 @@ import { ReflectUtils } from '@dooboostore/core';
 import { FunctionUtils } from '@dooboostore/core';
 import { getOnConnectedInnerHtmlMetadata } from './onConnectedInnerHtml';
 import { getAddEventListenerMetadata } from './addEventListener';
-import { 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 } from './lifecycles';
+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 } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
-import { findAllAttributeChangedMetadata } from './changedAttribute';
+import { findAllAttributeChangedMetadata } from './changedAttributeHost';
 import { findAllSetAttributeMetadata } from './setAttribute';
-import { findAllReplaceChildrenMetadata } from './replaceChildren';
-import { findAllAppendChildMetadata } from './appendChild';
-import { findAllClassListMetadata } from './classList';
-import { findAllStyleMetadata } from './style';
 import { findAllAttributeMetadata } from './attribute';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
@@ -47,6 +43,12 @@ export const ensureInit = (inst: any) => {
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
     inst._executeSwcScript?.('swc-on-constructor', hostSet);
+
+    // Call @onConstructor lifecycle methods
+    const cMethods = findAllLifecycleMetadata(inst, ON_CONSTRUCTOR_METADATA_KEY);
+    if (cMethods) {
+      for (const m of cMethods) (inst)._invokeLifecycleMethod(m, hostSet);
+    }
   }
 };
 
@@ -160,7 +162,9 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      const hostSet = SwcUtils.getHostSet(el);
+      console.log('execute handler', event);
+      const parent = SwcUtils.findNearestSwcHost(el);
+      const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
       const helpers = SwcUtils.getHelperSet(currentWin);
@@ -181,13 +185,19 @@ const setupPrototype = (proto: any) => {
 
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
-    const hostSet = SwcUtils.getHostSet(el);
+
+      console.log('execute handler2', event);
+    const parent = SwcUtils.findNearestSwcHost(el);
+    const hostSet = SwcUtils.getHostSet(parent || el);
     const conf = getElementConfig(this);
     const currentWin = (this as any)._resolveWindow(conf);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
+    const detail = (event as CustomEvent).detail;
     const args = {
       event,
-      $data: (event as CustomEvent).detail,
+      $event: event,
+      $data: detail,
+      $detail: detail,
       ...hostSet,
       ...currentHelpers,
       $el: el,
@@ -220,7 +230,9 @@ 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);
 
@@ -228,7 +240,7 @@ export const elementDefine =
     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)), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
+    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 connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
@@ -256,29 +268,19 @@ export const elementDefine =
       // Initialize @attribute fields (DOM <-> JS Sync)
       attributeList.forEach(meta => {
         const attrName = meta.options.name || String(meta.propertyKey);
-        if (meta.options.connectedInitialize) {
-          // JS -> DOM (FORCE OVERWRITE)
-          const memoryVal = (this as any)[meta.privateKey];
-          if (memoryVal !== undefined) {
-            (this as any).__swc_syncing_init = true;
-            try {
+        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
-            } finally {
-              (this as any).__swc_syncing_init = false;
-            }
-          }
-        } else if (meta.selector === ':host' || !meta.selector) {
-          // DOM -> JS (Pull from HTML)
-          const domVal = this.getAttribute(attrName);
-          if (domVal !== null) {
-            (this as any).__swc_syncing_init = true;
-            try {
-              (this as any)[meta.propertyKey] = domVal; // Update memory with DOM value
-            } finally {
-              (this as any).__swc_syncing_init = false;
             }
+          } finally {
+            (this as any).__swc_syncing_init = false;
           }
         }
+        // else: Do NOT sync - Keep the default value from class initialization
       });
 
       if (connectedInnerHtmlList.length > 0) {
@@ -303,7 +305,76 @@ export const elementDefine =
         globalDelegatedRoots.add(root);
       }
 
+      // Separate delegate and non-delegate listeners
+      const delegateListeners: typeof addEventListenerList = [];
+      const nonDelegateListeners: typeof addEventListenerList = [];
+      
       addEventListenerList.forEach(meta => {
+        if (meta.options.delegate && meta.selector !== ':window' && meta.selector !== ':document' && meta.selector !== ':parentHost' && meta.selector !== ':appHost' && meta.selector !== ':firstHost' && meta.selector !== ':lastHost' && meta.selector !== ':firstAppHost' && meta.selector !== ':lastAppHost' && meta.selector !== ':hosts' && meta.selector !== ':appHosts' && meta.selector !== ':host' && meta.selector !== '') {
+          delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
+      });
+
+      // Group delegate listeners by (type, root) combination
+      const delegatesByTypeAndRoot = new Map<string, any[]>();
+      delegateListeners.forEach(meta => {
+        const r = meta.options.root || 'auto';
+        const rootKey = `${meta.type}:${r}`;
+        if (!delegatesByTypeAndRoot.has(rootKey)) {
+          delegatesByTypeAndRoot.set(rootKey, []);
+        }
+        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;
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        
+        const bindRoots: (HTMLElement | ShadowRoot)[] = [];
+        if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
+        else if (r === 'light') bindRoots.push(this as any);
+        else if (r === 'shadow' && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === 'all') {
+          bindRoots.push(this as any);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+
+        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
+          });
+          
+          const unifiedHandler = async (event: Event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = (event.target as HTMLElement).closest(selector);
+              if (matchedEl && (br as any).contains(matchedEl)) {
+                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: 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;
+              }
+            }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          (this as any)._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+
+      // Process non-delegate listeners
+      nonDelegateListeners.forEach(meta => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
         const bindTargets: EventTarget[] = [];
@@ -329,34 +400,7 @@ export const elementDefine =
         else if (selector === ':hosts') hostSet.$hosts.forEach(applyRootOption);
         else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRootOption);
         else if (selector === ':host' || !selector) applyRootOption(this);
-        else if (options.delegate) {
-          const bindRoots: (HTMLElement | ShadowRoot)[] = [];
-          if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
-          else if (r === 'light') bindRoots.push(this as any);
-          else if (r === 'shadow' && this.shadowRoot) bindRoots.push(this.shadowRoot);
-          else if (r === 'all') {
-            bindRoots.push(this as any);
-            if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-          }
-
-          bindRoots.forEach(br => {
-            const handler = async (event: Event) => {
-              const matchedEl = (event.target as HTMLElement).closest(selector);
-              if (matchedEl && (br as any).contains(matchedEl)) {
-                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: matchedEl, $root: br };
-                await (this as any)._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl, args]);
-              }
-            };
-            br.addEventListener(type, handler, opts);
-            if (options.removeOnDisconnected === true || (br !== this && br !== this.shadowRoot)) {
-              (this as any)._boundListeners.push({ target: br, type, handler, options: opts });
-            }
-          });
-        } else {
+        else {
           const searchRoots: (HTMLElement | ShadowRoot)[] = [];
           if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
           else if (r === 'light') searchRoots.push(this as any);
@@ -378,7 +422,7 @@ export const elementDefine =
             if (options.preventDefault) event.preventDefault();
             const currentHostSet = SwcUtils.getHostSet(this as any);
             const args = { event, ...currentHostSet, $el: t, $root: t };
-            await (this as any)._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+            await (this as any)[meta.propertyKey](event, currentHostSet, args);
           };
           t.addEventListener(type, handler, opts);
           if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
@@ -387,6 +431,24 @@ 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);
@@ -446,20 +508,26 @@ export const elementDefine =
     proto.attributeChangedCallback = function (name: string, old: string | null, newVal: string | null) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name, old, newVal]);
 
+      const hSet = SwcUtils.getHostSet(this as any);
+
       // Handle swc-on-* events
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
-          const customEventMeta = emitCustomEventList.find(it => it.options.attributeName === name);
-          const eventName = customEventMeta ? customEventMeta.type : name.substring(7);
+          const eventName = name.substring(7);
           (this as any)._bindAttributeEvent(this as any, name, newVal, eventName);
         }
       }
 
+      // 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)) {
-        const hSet = SwcUtils.getHostSet(this as any);
-        for (const key of mKeys) (this as any)._invokeLifecycleMethod(key, hSet, [newVal, old, name]);
+        for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);
       }
     };
 

package/src/decorators/emitCustomEvent.ts

@@ -4,7 +4,6 @@ import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 
 export interface EmitCustomEventBaseOptions {
-  attributeName?: string;
   bubbles?: boolean;
   composed?: boolean;
   cancelable?: boolean;
@@ -14,7 +13,7 @@ export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
   selector: string;
   type: string;
-  options: EmitCustomEventBaseOptions & SwcQueryOptions;
+  options: (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
 }
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
@@ -29,9 +28,6 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
 
     const fullOptions: any = { ...options, type };
 
-    if (!fullOptions.attributeName) {
-      fullOptions.attributeName = `swc-on-${type}`;
-    }
     if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
     if (fullOptions.composed === undefined) fullOptions.composed = true;
 
@@ -103,3 +99,15 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
 };
+
+/**
+ * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
+ * Usage: @emitCustomEventHost('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 {
+  return emitCustomEvent(':host', type, options);
+}

package/src/decorators/index.ts

@@ -1,11 +1,10 @@
 export * from './addEventListener';
 export * from './attribute';
 export * from './elementDefine';
-export * from './changedAttribute';
+export * from './changedAttributeHost';
 export * from './setAttribute';
 export * from './emitCustomEvent';
-export * from './replaceChildren';
-export * from './appendChild';
+export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';