@dooboostore/simple-web-component 1.0.15 → 1.0.16

package/README.md

@@ -1,111 +1,124 @@
 # @dooboostore/simple-web-component (SWC)
 
-> **"Pure, Standards-Compliant, and Blazing Fast Web Components."**
+> **"Pure, Standards-Compliant, and Blazing Fast Web Components Framework."**
 
-`simple-web-component` (SWC) is a minimalist yet powerful library designed to build high-performance Web Components. It strips away heavy "magic" features like Proxy-based reactivity and constant `MutationObserver` overhead in favor of a **Pure Architecture** that adheres strictly to browser standards.
+`simple-web-component` (SWC) is a minimalist library designed for building high-performance Web Components and Single Page Applications (SPA). It strips away heavy "magic" features like Proxy-based reactivity and continuous `MutationObserver` scans in favor of a **Pure Architecture** that stays out of your way while offering professional-grade Dependency Injection (DI) and Routing.
 
 ---
 
 ## 🚀 Why SWC?
 
-- **Zero Magic**: No Proxy traps, no Virtual DOM diffing. Everything is explicit and predictable.
-- **Native Inheritance**: Inherit directly from `HTMLElement`, `HTMLDivElement`, or `HTMLTemplateElement`.
-- **Extreme Performance**: Designed for high-load applications (1,000+ nodes) with minimal memory footprint.
-- **Micro-Frontend Ready**: Independent routing and DI containers per component scope.
-- **Standard-First**: Fully compatible with native Custom Elements, Shadow DOM, and Slots.
+- **Zero Magic**: No Proxy traps, no Virtual DOM diffing. Predictive and standard-compliant.
+- **Native Inheritance**: Inherit directly from `HTMLElement`, `HTMLDivElement`, etc.
+- **Extreme Performance**: Ideal for high-load UIs (1,000+ nodes) with minimal memory overhead.
+- **Micro-Frontend Ready**: Independent routing and DI containers for every component scope.
+- **Standard-First**: Works directly with native Custom Elements, Shadow DOM, and Slots.
 
 ---
 
-## 📦 Installation
+## 📦 Installation & Setup
 
 ```bash
 npm install @dooboostore/simple-web-component reflect-metadata
 ```
 
-> **Note**: `reflect-metadata` is required for decorator support.
-
----
-
-## 🌐 Browser Support & Polyfills
-
-SWC utilizes **Customized Built-in Elements** (e.g., `<table is="swc-app-table">`) for maximum performance and semantic HTML. Since **Safari** does not yet natively support the `is` attribute, we recommend adding the following polyfill to your HTML `<head>`:
-
+### Browser Support
+For **Safari** support of the `is` attribute, add this to your `<head>`:
 ```html
-<!-- Polyfill for Safari 'is' attribute support -->
 <script src="https://unpkg.com/@ungap/custom-elements"></script>
 ```
 
 ---
 
-## 💡 Core Usage
+## 💡 Core Decorators
 
-### 1. Basic Component
-SWC components are just standard classes with a decorator.
+### 1. `@elementDefine(config)`
+Registers the class as a custom element.
 
-```typescript
-import { elementDefine, innerHtml } from '@dooboostore/simple-web-component';
+| Option | Type | Description |
+|---|---|---|
+| `name` | `string` | The custom element tag name (e.g., `'my-el'`). |
+| `extends` | `string` | (Optional) The native tag to extend. |
+| `observedAttributes` | `string[]` | (Optional) Extra attributes to observe. |
+| `window` | `Window` | (Optional) Custom window object (useful for SSR). |
 
-@elementDefine('hello-world')
-class HelloWorld extends HTMLElement {
-  @innerHtml
+### 2. `@innerHtml(options?)`
+Defines the template for the component.
+
+```typescript
+@elementDefine('my-el')
+class MyEl extends HTMLElement {
+  @innerHtml({ useShadow: true })
   render() {
-    return `<h1>Hello Standard!</h1>`;
+    return `<style>:host { color: blue; }</style><div>Hello World</div>`;
   }
 }
 ```
 
-### 2. Modern Attribute Management
-Say goodbye to complex property-attribute syncing. SWC uses a **Method-Based Reflection** approach for maximum control.
+### 3. Modern Attribute Management
+SWC uses a **Method-Based Reflection** approach. You control exactly how data flows.
 
-```typescript
-import { elementDefine, setAttribute, changedAttribute, query } from '@dooboostore/simple-web-component';
+- **`@setAttribute(name?)`**: Reflects the method's **return value** to the DOM attribute.
+- **`@changedAttribute(name?)`**: A handler triggered when the attribute changes.
 
+```typescript
 @elementDefine('my-counter')
 class MyCounter extends HTMLElement {
   private count = 0;
-
   @query('#display') displayEl?: HTMLElement;
 
-  // 1. Reflect method return value to DOM attribute 'count'
   @setAttribute('count')
-  updateCount(val: number) {
-    return val; 
-  }
+  updateCount(val: number) { return val; } // Sets 'count' attribute in DOM
 
-  // 2. React to attribute changes (triggered via setAttribute or externally)
   @changedAttribute('count')
-  onCountChange(newVal: string, oldVal: string) {
+  onCountChange(newVal: string, oldVal: string, name: string) {
     this.count = Number(newVal);
-    // Surgical update: no full re-render!
+    // Surgical Update: Only update the specific node
     if (this.displayEl) this.displayEl.textContent = newVal;
   }
-
-  @innerHtml({ useShadow: true })
-  render() {
-    return `
-      <div>
-        Count: <span id="display">0</span>
-        <button id="add-btn">Add</button>
-      </div>
-    `;
-  }
 }
 ```
 
-### 3. Declarative Event Binding
-Bind events to children or the host itself without manual `addEventListener` in the constructor.
+### 4. Powerful Queries (`@query`, `@queryAll`)
+Inject internal elements directly into properties. Supports the **`:host`** selector.
+
+| Root Option | Description |
+|---|---|
+| `auto` (default) | Search in `shadowRoot` if exists, otherwise `this` (Light DOM). |
+| `shadow` | **Strictly** search in `shadowRoot`. Returns `null/[]` if no shadow. |
+| `light` | **Strictly** search in Light DOM (`this`). |
+| `all` | Search in **both** Shadow and Light DOM. |
+
+Inject elements directly into properties. Supports `:host` and scoped root control.
 
 ```typescript
-import { addEventListener, HostSet } from '@dooboostore/simple-web-component';
+@elementDefine('query-demo')
+class QueryDemo extends HTMLElement {
+  @query('.title') titleEl!: HTMLElement;
+  @queryAll('.items') list!: NodeListOf<HTMLElement>;
+  
+  // Reference the component itself
+  @query(':host') self!: HTMLElement;
 
+  // Root options: 'light' | 'shadow' | 'all' | 'auto' (default)
+  @query('.btn', { root: 'shadow' }) shadowBtn!: HTMLButtonElement;
+}
+```
+
+### 5. Smart Event Binding (`@addEventListener`)
+Bind events declaratively with support for **Event Delegation**.
+
+```typescript
 @elementDefine('event-demo')
 class EventDemo extends HTMLElement {
-  
-  // Injects $host, $appHost, and event object automatically
-  @addEventListener('click', '#add-btn')
-  onAddClick(event: MouseEvent, { $host, $appHost }: HostSet) {
-    console.log('Action in:', $host.tagName);
-    (this as any).updateCount(this.count + 1);
+  // 1. Direct binding (Pure Mode)
+  @addEventListener('.static-btn', 'click')
+  onStaticClick(event: MouseEvent) { ... }
+
+  // 2. Event Delegation (Works for dynamic nodes added LATER)
+  @addEventListener('.item', 'click', { delegate: true })
+  onItemClick(event: MouseEvent, { $host }: HostSet, target: HTMLElement) {
+    console.log('Clicked dynamic item:', target.textContent);
   }
 }
 ```
@@ -114,76 +127,154 @@ class EventDemo extends HTMLElement {
 
 ## 🌐 Powerful SPA & Routing
 
-SWC excels at building Single Page Applications by providing **Isolated App Scopes**. Each app has its own Dependency Injection (DI) container and Router.
+SWC provides a revolutionary way to build SPAs where **each component scope is an independent application**.
 
-### 1. The Scoped "Element" Router
-Unlike traditional routers that force URL changes, SWC's default `ElementRouter` uses an **in-memory history stack**. This allows you to have multiple independent SPAs on the same page (Micro-Frontends) without URL conflicts.
-
-### 2. Bootstrapping an App
-Use the `<swc-app>` tag and provide a configuration function.
+### 1. Isolated App Scopes (Micro-Frontends)
+Use the `<swc-app>` tag to create an isolated universe. Each instance has its own **DI Container** and **Router**. You can run multiple independent SPAs on a single page without URL conflicts.
 
 ```html
 <!-- index.html -->
 <swc-app swc-get-application-config="myAppConfig(this)"></swc-app>
 
 <script>
-  window.myAppConfig = (host) => ({
-    rootRouter: RootRouter, // The entry point class
-    routeType: 'element',   // 'element' (in-memory), 'hash', or 'path'
-    path: '/home'           // Initial path
-  });
+  // This function returns the configuration needed to bootstrap the SWC App
+  window.myAppConfig = (host) => {
+    return {
+      rootRouter: RootRouter, // The entry point class (must be @Sim)
+      routeType: 'element',   // 'element' (in-memory history), 'hash', or 'path'
+      path: '/users/list',    // Initial route path
+      window: window          // Optional: custom window object
+    };
+  };
+
+  // 4. External Control (Anywhere in your JS)
+  function navigateFromOutside() {
+      const app = document.querySelector('swc-app');
+      // Programmatically trigger routing from outside the component
+      app.routing('/users/detail/2'); 
+  }
 </script>
+
+<button onclick="navigateFromOutside()">External Link to User 2</button>
 ```
 
-### 3. Dependency Injection (DI)
-Integration with `@dooboostore/simple-boot` allows you to inject services into lifecycle methods.
+### 2. DI-Powered Routing
+Define routes using decorators. Components are automatically instantiated and managed by the DI container.
+
+```typescript
+import { Router } from '@dooboostore/simple-boot/decorators/route/Router';
+import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
+
+@Sim
+@Router({
+  path: '/users',
+  route: {
+    '/list': UserList,
+    '/detail/:id': UserDetail
+  }
+})
+@elementDefine('user-router')
+class UserRouter extends HTMLElement implements RouterAction.CanActivate {
+  @innerHtml({ useShadow: true })
+  render() { 
+    return `<header>User System</header><main><slot></slot></main>`; 
+  }
+
+  async canActivate(url: RoutingDataSet, data?: any) {
+    if (data instanceof Node) this.replaceChildren(data);
+  }
+}
+
+// Pure Service (Business Logic)
+@Sim
+class UserService {
+  async getProfile(id: string) {
+    return { id, name: 'Standard User' };
+  }
+}
+
+// Example Page Components
+@Sim
+@elementDefine('user-list')
+class UserList extends HTMLElement {
+  constructor(private router: Router, private userService: UserService) { super(); }
+
+  @innerHtml
+  render() { 
+    return `
+      <ul><li>User A</li><li>User B</li></ul>
+      <button swc-on-click="$host.router.go('/users/detail/1')">Go to Detail</button>
+    `; 
+  }
+}
+
+@Sim
+@elementDefine('user-detail')
+class UserDetail extends HTMLElement {
+  constructor(private router: Router, private userService: UserService) { super(); }
+
+  @onConnected
+  async init() {
+     const id = this.router.getIntent()?.params?.id;
+     const profile = await this.userService.getProfile(id);
+     console.log('Viewing User:', profile.name);
+  }
+
+  @innerHtml
+  render() { return `<div>User Detail View <button swc-on-click="$host.router.back()">Back</button></div>`; }
+}
+```
+
+### 3. Lifecycle @Inject
+Inject services or component context directly into lifecycle methods. This is the ultimate way to handle side effects cleanly.
 
 ```typescript
 import { Inject } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { InjectSituationType, onConnected, HostSet } from '@dooboostore/simple-web-component';
+import { Router } from '@dooboostore/core-web/routers/Router';
+
+@elementDefine('profile-page')
+class ProfilePage extends HTMLElement {
 
-@elementDefine('test-component')
-class TestComponent extends HTMLElement {
-  
   @onConnected
-  init(
+  async init(
     @Inject({ situationType: InjectSituationType.HOST_SET }) hostSet: HostSet,
-    @Inject({ type: MyApiService }) api: MyApiService
+    @Inject({ type: Router }) router: Router,
+    @Inject({ type: UserService }) api: UserService
   ) {
-    console.log('Context injected:', hostSet.$appHost);
-    api.fetchData();
+    console.log('App scope:', hostSet.$appHost);
+    const user = await api.getProfile();
+    // Navigate programmatically using injected router
+    if (!user) router.go('/login');
   }
 }
 ```
 
 ---
 
-## 🏰 Host Hierarchy ($host)
-SWC automatically traverses the DOM to provide meaningful context:
+## 🏰 Host Hierarchy & Context
+SWC automatically traverses the DOM to provide meaningful context to your scripts and listeners:
 
-- **`$host`**: The current component handling the event.
+- **`$host`**: The current component Handling the event (**Self**).
+- **`$parentHost`**: The direct parent SWC component.
 - **`$appHost`**: The nearest parent `<swc-app>` (the SPA boundary).
-- **`$hosts`**: Array of all SWC ancestors.
-- **`$firstHost`**: The top-most SWC ancestor.
+- **`$hosts`**: Array of all SWC ancestors `[Root, ..., Parent, Self]`.
 
 ---
 
-## 🛠 Lifecycle Decorators
-Full control over the component lifecycle with parent-to-child execution order.
-
+## 🛠 Lifecycle Hooks
+Executed in **Parent -> Child** order.
 - `@onBeforeConnected` / `@onAfterConnected` (alias: `@onConnected`)
 - `@onBeforeDisconnected` / `@onAfterDisconnected` (alias: `@onDisconnected`)
 - `@onBeforeAdopted` / `@onAfterAdopted` (alias: `@onAdopted`)
-- `@onAddEventListener` (triggers when decorators bind listeners)
+- `@onAddEventListener`
 
 ---
 
-## ⚡ Performance Benchmark
-By removing "Deep Scanning" and "Automatic DOM Observers", SWC achieves near-native performance.
-
-- **Initialization**: 2x faster than Proxy-based libraries.
-- **Memory**: 40% less overhead in high-node scenarios.
-- **Stability**: Standard `attributeChangedCallback` ensures reliable updates without "magic" side effects.
+## ⚡ Performance
+- **Zero "Deep Scan"**: Listeners are only bound to specific selectors.
+- **Surgical Updates**: Manipulate DOM directly in `@changedAttribute` instead of full re-renders.
+- **Zero Background Overhead**: No polling, no background observers.
 
 ---
 

package/dist/cjs/decorators/addEventListener.js

@@ -24,16 +24,15 @@ __export(addEventListener_exports, {
 module.exports = __toCommonJS(addEventListener_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-function addEventListener(arg1, arg2) {
+function addEventListener(selector, type, options = {}) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
-    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = import_ReflectUtils.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       import_ReflectUtils.ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ options, propertyKey });
+    listeners.push({ selector, type, options, propertyKey });
   };
 }
 const getAddEventListenerMetadata = (target) => {

package/dist/cjs/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  query?: string;\n  type: string;\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport function addEventListener(type: string, query?: string): MethodDecorator;\nexport function addEventListener(options: AddEventListenerOptions): MethodDecorator;\nexport function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAmBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAIxF,SAAS,iBAAiB,MAAwC,MAAgC;AACvG,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,UAAM,UAAmC,OAAO,SAAS,WAAW,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI;AAElG,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  delegate?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  selector: string;\n  type: string;\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\n/**\n * @addEventListener decorator to bind events to elements.\n * Usage: @addEventListener('.btn', 'click') onClick() { ... }\n * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }\n */\nexport function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ selector, type, options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAoBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAOxF,SAAS,iBAAiB,UAAkB,MAAc,UAAmC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,UAAU,MAAM,SAAS,YAAY,CAAC;AAAA,EACzD;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -112,10 +112,12 @@ const elementDefine = (inConfig) => (constructor) => {
         return this[methodName](...extraArgs);
       }
     }
-    _bindAttributeEvent(el, attrName, script) {
-      if (!attrName.startsWith("swc-on-"))
-        return;
-      const eventName = attrName.substring(7);
+    _bindAttributeEvent(el, attrName, script, eventName) {
+      if (!eventName) {
+        if (!attrName.startsWith("swc-on-"))
+          return;
+        eventName = attrName.substring(7);
+      }
       if (swcLifecycleAttributes.includes(attrName))
         return;
       const elHandlers = getHandlers(this);
@@ -176,44 +178,79 @@ const elementDefine = (inConfig) => (constructor) => {
           this.innerHTML = lContent;
       }
       addEventListenerList.forEach((meta) => {
-        const { type, query, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-        const targetEls = [];
-        if (!query) {
-          targetEls.push(this);
-        } else {
-          const searchRoots = [];
+        const { selector, type, options } = meta;
+        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
+        if (delegate && selector && selector !== ":host") {
+          const bindRoots = [];
           const r = root || "auto";
           if (r === "auto") {
-            searchRoots.push(this.shadowRoot || this);
+            bindRoots.push(this.shadowRoot || this);
           } else if (r === "light") {
-            searchRoots.push(this);
+            bindRoots.push(this);
           } else if (r === "shadow") {
             if (this.shadowRoot)
-              searchRoots.push(this.shadowRoot);
+              bindRoots.push(this.shadowRoot);
           } else if (r === "all") {
-            searchRoots.push(this);
+            bindRoots.push(this);
             if (this.shadowRoot)
-              searchRoots.push(this.shadowRoot);
+              bindRoots.push(this.shadowRoot);
+          }
+          bindRoots.forEach((bindRoot) => {
+            const handler = (event) => {
+              const target = event.target;
+              const matchedEl = target.closest(selector);
+              if (matchedEl && bindRoot.contains(matchedEl)) {
+                if (stopPropagation)
+                  event.stopPropagation();
+                if (stopImmediatePropagation)
+                  event.stopImmediatePropagation();
+                if (preventDefault)
+                  event.preventDefault();
+                const hostSet2 = import_Utils.SwcUtils.getHostSet(this);
+                this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2, matchedEl]);
+              }
+            };
+            bindRoot.addEventListener(type, handler, { capture, once, passive });
+          });
+        } else {
+          const targetEls = [];
+          if (!selector || selector === ":host") {
+            targetEls.push(this);
+          } else {
+            const searchRoots = [];
+            const r = root || "auto";
+            if (r === "auto") {
+              searchRoots.push(this.shadowRoot || this);
+            } else if (r === "light") {
+              searchRoots.push(this);
+            } else if (r === "shadow") {
+              if (this.shadowRoot)
+                searchRoots.push(this.shadowRoot);
+            } else if (r === "all") {
+              searchRoots.push(this);
+              if (this.shadowRoot)
+                searchRoots.push(this.shadowRoot);
+            }
+            searchRoots.forEach((sr) => {
+              const found = sr.querySelectorAll(selector);
+              found.forEach((el) => targetEls.push(el));
+            });
           }
-          searchRoots.forEach((sr) => {
-            const found = sr.querySelectorAll(query);
-            found.forEach((el) => targetEls.push(el));
+          targetEls.forEach((el) => {
+            const handler = (event) => {
+              if (stopPropagation)
+                event.stopPropagation();
+              if (stopImmediatePropagation)
+                event.stopImmediatePropagation();
+              if (preventDefault)
+                event.preventDefault();
+              const hostSet2 = import_Utils.SwcUtils.getHostSet(this);
+              this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
+            };
+            const opts = { capture, once, passive };
+            el.addEventListener(type, handler, opts);
           });
         }
-        targetEls.forEach((el) => {
-          const handler = (event) => {
-            if (stopPropagation)
-              event.stopPropagation();
-            if (stopImmediatePropagation)
-              event.stopImmediatePropagation();
-            if (preventDefault)
-              event.preventDefault();
-            const hostSet2 = import_Utils.SwcUtils.getHostSet(this);
-            this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
-          };
-          const options = { capture, once, passive };
-          el.addEventListener(type, handler, options);
-        });
       });
       if (super.connectedCallback)
         await super.connectedCallback();
@@ -258,7 +295,9 @@ const elementDefine = (inConfig) => (constructor) => {
         super.attributeChangedCallback(name, old, newVal);
       if (name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
-          this._bindAttributeEvent(this, name, newVal);
+          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+          const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
+          this._bindAttributeEvent(this, name, newVal, eventName);
         }
       }
       const mKeys = attrChangeMap.get(name);
@@ -283,6 +322,23 @@ const elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  emitCustomEventList.forEach((meta) => {
+    const { propertyKey, options } = meta;
+    const original = NewClass.prototype[propertyKey];
+    if (typeof original === "function") {
+      NewClass.prototype[propertyKey] = function(...args) {
+        const detail = original.apply(this, args);
+        const event = new CustomEvent(options.type, {
+          detail,
+          bubbles: options.bubbles,
+          composed: options.composed,
+          cancelable: options.cancelable
+        });
+        this.dispatchEvent(event);
+        return detail;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {