@dooboostore/simple-web-component 1.0.21 → 1.0.22

package/dist/umd-bundle/dooboostore-simple-web-component.umd.js

@@ -1119,7 +1119,7 @@ var dooboostoreSimpleWebComponent = (() => {
   var bundle_entry_exports = {};
   __export(bundle_entry_exports, {
     ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
-    APPEND_CHILD_METADATA_KEY: () => APPEND_CHILD_METADATA_KEY,
+    APPLY_NODE_METADATA_KEY: () => APPLY_NODE_METADATA_KEY,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
     ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
     BROWSER_GLOBALS: () => BROWSER_GLOBALS,
@@ -1128,6 +1128,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
     HTML_TAG_ENTRIES: () => HTML_TAG_ENTRIES,
+    INNER_HTML_METADATA_KEY: () => INNER_HTML_METADATA_KEY,
     InjectSituationType: () => InjectSituationType,
     ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
     ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
@@ -1137,38 +1138,42 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_BEFORE_ADOPTED_METADATA_KEY: () => ON_BEFORE_ADOPTED_METADATA_KEY,
     ON_BEFORE_CONNECTED_METADATA_KEY: () => ON_BEFORE_CONNECTED_METADATA_KEY,
     ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_METADATA_KEY,
+    ON_CONSTRUCTOR_METADATA_KEY: () => ON_CONSTRUCTOR_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
-    REPLACE_CHILDREN_METADATA_KEY: () => REPLACE_CHILDREN_METADATA_KEY,
     SET_ATTRIBUTE_METADATA_KEY: () => SET_ATTRIBUTE_METADATA_KEY,
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcUtils: () => SwcUtils,
     TemplateUtils: () => TemplateUtils,
     addClassList: () => addClassList,
+    addClassListHost: () => addClassListHost,
     addEventListener: () => addEventListener,
-    appendChild: () => appendChild,
+    addEventListenerHost: () => addEventListenerHost,
+    applyNode: () => applyNode,
+    applyNodeHost: () => applyNodeHost,
     attribute: () => attribute,
-    changedAttribute: () => changedAttribute,
+    attributeHost: () => attributeHost,
+    changedAttributeHost: () => changedAttributeHost,
     createElement: () => createElement,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
+    emitCustomEventHost: () => emitCustomEventHost,
     ensureInit: () => ensureInit2,
-    findAllAppendChildMetadata: () => findAllAppendChildMetadata,
+    findAllApplyNodeMetadata: () => findAllApplyNodeMetadata,
     findAllAttributeChangedMetadata: () => findAllAttributeChangedMetadata,
     findAllAttributeMetadata: () => findAllAttributeMetadata,
     findAllClassListMetadata: () => findAllClassListMetadata,
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
-    findAllReplaceChildrenMetadata: () => findAllReplaceChildrenMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
+    getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
-    getReplaceChildrenMetadata: () => getReplaceChildrenMetadata,
     getSetAttributeMetadata: () => getSetAttributeMetadata,
     htmlAElement: () => htmlAElement,
     htmlArticleElement: () => htmlArticleElement,
@@ -1197,19 +1202,26 @@ var dooboostoreSimpleWebComponent = (() => {
     onBeforeDisconnected: () => onBeforeDisconnected,
     onConnected: () => onConnected,
     onConnectedInnerHtml: () => onConnectedInnerHtml,
+    onConstructor: () => onConstructor,
     onDisconnected: () => onDisconnected,
     query: () => query,
     queryAll: () => queryAll,
+    queryAllHost: () => queryAllHost,
+    queryHost: () => queryHost,
     removeClassList: () => removeClassList,
+    removeClassListHost: () => removeClassListHost,
     removeStyle: () => removeStyle,
-    replaceChildren: () => replaceChildren,
     resolveTargetEls: () => resolveTargetEls,
     setAttribute: () => setAttribute,
+    setAttributeHost: () => setAttributeHost,
     setClassList: () => setClassList,
+    setClassListHost: () => setClassListHost,
     setStyle: () => setStyle,
     textNode: () => textNode,
     toggleClassList: () => toggleClassList,
+    toggleClassListHost: () => toggleClassListHost,
     updateClassList: () => updateClassList,
+    updateClassListHost: () => updateClassListHost,
     updateStyle: () => updateStyle
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
@@ -5858,8 +5870,12 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
   };
+  function addEventListenerHost(type, options) {
+    return addEventListener(":host", type, options);
+  }
 
   // src/decorators/lifecycles.ts
+  var ON_CONSTRUCTOR_METADATA_KEY = Symbol("simple-web-component:on-constructor");
   var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-connected");
   var ON_AFTER_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-connected");
   var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-disconnected");
@@ -5879,6 +5895,7 @@ var dooboostoreSimpleWebComponent = (() => {
       list.push(propertyKey);
     };
   }
+  var onConstructor = createLifecycleDecorator(ON_CONSTRUCTOR_METADATA_KEY);
   var onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
   var onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
   var onConnected = onAfterConnected;
@@ -5959,6 +5976,20 @@ var dooboostoreSimpleWebComponent = (() => {
         ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
       }
       metaList.push({ propertyKey, selector, options, privateKey });
+      const applySetAttribute = (inst, targets, attrName, nv) => {
+        targets.forEach((it) => {
+          console.log("----->", it);
+          if (it && typeof it.setAttribute === "function") {
+            if (nv === null) {
+              it.removeAttribute(attrName);
+            } else {
+              it.setAttribute(attrName, String(nv));
+            }
+          } else {
+            inst[privateKey] = nv;
+          }
+        });
+      };
       Object.defineProperty(target, propertyKey, {
         get() {
           const attrName = options.name || String(propertyKey);
@@ -5982,22 +6013,25 @@ var dooboostoreSimpleWebComponent = (() => {
         },
         set(nv) {
           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 : void 0);
-          const targets = resolveTargetEls(this, selector, options, currentWin);
-          targets.forEach((it) => {
-            console.log("----->", it);
-            if (it && typeof it.setAttribute === "function") {
-              if (nv === null) {
-                it.removeAttribute(attrName);
-              } else {
-                it.setAttribute(attrName, String(nv));
-              }
+          if (this.__swc_syncing_init) {
+            if (options.connectedInitialize === true) {
+              const targets2 = resolveTargetEls(this, selector, options, currentWin);
+              applySetAttribute(this, targets2, attrName, nv);
             } else {
               this[privateKey] = nv;
             }
-          });
+            return;
+          }
+          if (!this.__swc_connected) {
+            this[privateKey] = nv;
+            return;
+          }
+          const targets = resolveTargetEls(this, selector, options, currentWin);
+          applySetAttribute(this, targets, attrName, nv);
         },
         enumerable: true,
         configurable: true
@@ -6007,10 +6041,13 @@ var dooboostoreSimpleWebComponent = (() => {
   var findAllAttributeMetadata = (target) => {
     return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, target).flat();
   };
+  function attributeHost(attrName, options = {}) {
+    return attribute(":host", { ...options, name: attrName });
+  }
 
-  // src/decorators/changedAttribute.ts
+  // src/decorators/changedAttributeHost.ts
   var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
-  function changedAttribute(attributeName) {
+  function changedAttributeHost(attributeName) {
     return (target, propertyKey) => {
       const constructor = target.constructor;
       let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -6114,62 +6151,12 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     return result;
   };
-
-  // src/decorators/replaceChildren.ts
-  var REPLACE_CHILDREN_METADATA_KEY = Symbol("simple-web-component:replace-children");
-  function replaceChildren(selector) {
-    return (target, propertyKey, descriptor) => {
-      const constructor = target.constructor;
-      let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-      if (!meta) {
-        meta = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
-      }
-      meta.set(propertyKey, selector);
-      const original = descriptor.value;
-      descriptor.value = async function(...args) {
-        ensureInit2(this);
-        const res = await original.apply(this, args);
-        if (res !== void 0) {
-          const conf = getElementConfig(this);
-          const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-          const currentDoc = currentWin.document;
-          let targetEl = null;
-          if (selector === ":host" || !selector) {
-            targetEl = this;
-          } else {
-            targetEl = (this.shadowRoot || this).querySelector(selector);
-          }
-          if (targetEl) {
-            if (typeof res === "string") {
-              targetEl.textContent = res;
-            } else {
-              const nodes = Array.isArray(res) ? res.map((n) => typeof n === "string" ? currentDoc.createTextNode(n) : n) : [res];
-              targetEl.replaceChildren(...nodes);
-            }
-          }
-        }
-        return res;
-      };
-    };
+  function setAttributeHost(name, options) {
+    return setAttribute(":host", name, options);
   }
-  var getReplaceChildrenMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-  };
-  var findAllReplaceChildrenMetadata = (target) => {
-    const result = /* @__PURE__ */ new Map();
-    const maps = ReflectUtils.findAllMetadata(REPLACE_CHILDREN_METADATA_KEY, target);
-    maps.forEach((map) => {
-      if (map instanceof Map) {
-        map.forEach((v, k) => result.set(k, v));
-      }
-    });
-    return result;
-  };
 
-  // src/decorators/appendChild.ts
-  var APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+  // src/decorators/applyNode.ts
+  var APPLY_NODE_METADATA_KEY = Symbol("simple-web-component:apply-node");
   var normalizeNodes = (res, doc) => {
     const items = Array.isArray(res) ? res : [res];
     return items.map((it) => {
@@ -6178,13 +6165,13 @@ var dooboostoreSimpleWebComponent = (() => {
       return doc.createTextNode(it !== void 0 && it !== null ? String(it) : "");
     });
   };
-  function appendChild(selector, options = { position: "beforeEnd" }) {
+  function applyNode(selector, options = { position: "beforeEnd" }) {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+      let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor);
       if (!metaList) {
         metaList = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, metaList, constructor);
+        ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
       }
       metaList.set(propertyKey, { propertyKey, selector, options });
       const original = descriptor.value;
@@ -6204,10 +6191,14 @@ var dooboostoreSimpleWebComponent = (() => {
           if (targetEl) {
             const nodes = normalizeNodes(res, currentDoc);
             const pos = options.position || "beforeEnd";
-            if (typeof res === "string") {
-              targetEl.insertAdjacentText(pos, res);
-            } else if (Array.isArray(res) && res.every((n) => typeof n === "string")) {
-              targetEl.insertAdjacentText(pos, res.join(""));
+            if (pos === "replace") {
+              targetEl.replaceWith(...nodes);
+            } else if (pos === "replaceChildren") {
+              targetEl.replaceChildren(...nodes);
+            } else if (pos === "innerHtml") {
+              targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
+            } else if (pos === "innerText") {
+              targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
             } else {
               if (pos === "beforeEnd")
                 targetEl.append(...nodes);
@@ -6224,9 +6215,9 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  var findAllAppendChildMetadata = (target) => {
+  var findAllApplyNodeMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
-    const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+    const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
     maps.forEach((map) => {
       if (map instanceof Map) {
         map.forEach((v, k) => result.set(k, v));
@@ -6234,6 +6225,9 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     return result;
   };
+  function applyNodeHost(options = { position: "beforeEnd" }) {
+    return applyNode(":host", options);
+  }
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
@@ -6334,6 +6328,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
   };
+  function queryHost(options) {
+    return query(":host", options);
+  }
 
   // src/decorators/queryAll.ts
   var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
@@ -6431,6 +6428,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
   };
+  function queryAllHost(options) {
+    return queryAll(":host", options);
+  }
 
   // src/decorators/classList.ts
   var CLASS_LIST_METADATA_KEY = Symbol("simple-web-component:class-list");
@@ -6495,6 +6495,11 @@ var dooboostoreSimpleWebComponent = (() => {
   var addClassList = createClassListDecorator("add");
   var removeClassList = createClassListDecorator("remove");
   var toggleClassList = createClassListDecorator("toggle");
+  var setClassListHost = createClassListDecorator("set").bind(null, ":host");
+  var updateClassListHost = createClassListDecorator("update").bind(null, ":host");
+  var addClassListHost = createClassListDecorator("add").bind(null, ":host");
+  var removeClassListHost = createClassListDecorator("remove").bind(null, ":host");
+  var toggleClassListHost = createClassListDecorator("toggle").bind(null, ":host");
   var findAllClassListMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6684,9 +6689,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return (targetObj, propertyKey, descriptor) => {
       const constructor = targetObj.constructor;
       const fullOptions = { ...options, type };
-      if (!fullOptions.attributeName) {
-        fullOptions.attributeName = `swc-on-${type}`;
-      }
       if (fullOptions.bubbles === void 0) fullOptions.bubbles = true;
       if (fullOptions.composed === void 0) fullOptions.composed = true;
       let list = ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
@@ -6751,6 +6753,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
   };
+  function emitCustomEventHost(type, options) {
+    return emitCustomEvent(":host", type, options);
+  }
 
   // src/config/config.ts
   var HTML_TAG_ENTRIES = [
@@ -6871,6 +6876,10 @@ var dooboostoreSimpleWebComponent = (() => {
       inst.__swc_initialized = true;
       const hostSet = SwcUtils.getHostSet(inst);
       inst._executeSwcScript?.("swc-on-constructor", hostSet);
+      const cMethods = findAllLifecycleMetadata(inst, ON_CONSTRUCTOR_METADATA_KEY);
+      if (cMethods) {
+        for (const m of cMethods) inst._invokeLifecycleMethod(m, hostSet);
+      }
     }
   };
   var globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
@@ -6969,7 +6978,9 @@ var dooboostoreSimpleWebComponent = (() => {
       const oldHandler = handlers.get(attrName);
       if (oldHandler) el.removeEventListener(eventName, oldHandler);
       const handler = async (event) => {
-        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._resolveWindow(conf);
         const helpers = SwcUtils.getHelperSet(currentWin);
@@ -6988,13 +6999,18 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     proto.__swc_executeAttributeEvent = async function(el, attrName, script, event) {
       ensureInit2(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._resolveWindow(conf);
       const currentHelpers = SwcUtils.getHelperSet(currentWin);
+      const detail = event.detail;
       const args = {
         event,
-        $data: event.detail,
+        $event: event,
+        $data: detail,
+        $detail: detail,
         ...hostSet,
         ...currentHelpers,
         $el: el,
@@ -7021,12 +7037,14 @@ var dooboostoreSimpleWebComponent = (() => {
       metadata.extends = extendsTagName;
     }
     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 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}`);
-    const mergedObservedAttributes = [.../* @__PURE__ */ 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 = [.../* @__PURE__ */ 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.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
     const proto = constructor.prototype;
     setupPrototype(proto);
@@ -7046,25 +7064,15 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       attributeList.forEach((meta) => {
         const attrName = meta.options.name || String(meta.propertyKey);
-        if (meta.options.connectedInitialize) {
-          const memoryVal = this[meta.privateKey];
-          if (memoryVal !== void 0) {
-            this.__swc_syncing_init = true;
-            try {
+        if (meta.options.connectedInitialize === true) {
+          this.__swc_syncing_init = true;
+          try {
+            const memoryVal = this[meta.privateKey];
+            if (memoryVal !== void 0) {
               this[meta.propertyKey] = memoryVal;
-            } finally {
-              this.__swc_syncing_init = false;
-            }
-          }
-        } else if (meta.selector === ":host" || !meta.selector) {
-          const domVal = this.getAttribute(attrName);
-          if (domVal !== null) {
-            this.__swc_syncing_init = true;
-            try {
-              this[meta.propertyKey] = domVal;
-            } finally {
-              this.__swc_syncing_init = false;
             }
+          } finally {
+            this.__swc_syncing_init = false;
           }
         }
       });
@@ -7087,7 +7095,62 @@ var dooboostoreSimpleWebComponent = (() => {
         });
         globalDelegatedRoots.add(root);
       }
+      const delegateListeners = [];
+      const nonDelegateListeners = [];
       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);
+        }
+      });
+      const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
+      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);
+      });
+      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 = [];
+        if (r === "auto") bindRoots.push(this.shadowRoot || this);
+        else if (r === "light") bindRoots.push(this);
+        else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === "all") {
+          bindRoots.push(this);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+        bindRoots.forEach((br) => {
+          const sortedMetaList = [...metaList].sort((a, b) => {
+            const aStop = a.options.stopPropagation ? 1 : 0;
+            const bStop = b.options.stopPropagation ? 1 : 0;
+            return bStop - aStop;
+          });
+          const unifiedHandler = async (event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (options.stopPropagation) event.stopPropagation();
+                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+                if (options.preventDefault) event.preventDefault();
+                const currentHostSet = SwcUtils.getHostSet(this);
+                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+                await this[meta.propertyKey](event, currentHostSet, matchedEl, args);
+                if (event.cancelBubble) break;
+              }
+            }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+      nonDelegateListeners.forEach((meta) => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
         const bindTargets = [];
@@ -7112,33 +7175,7 @@ var dooboostoreSimpleWebComponent = (() => {
         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 = [];
-          if (r === "auto") bindRoots.push(this.shadowRoot || this);
-          else if (r === "light") bindRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            bindRoots.push(this);
-            if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-          }
-          bindRoots.forEach((br) => {
-            const handler = async (event) => {
-              const matchedEl = event.target.closest(selector);
-              if (matchedEl && br.contains(matchedEl)) {
-                if (options.stopPropagation) event.stopPropagation();
-                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-                if (options.preventDefault) event.preventDefault();
-                const currentHostSet = SwcUtils.getHostSet(this);
-                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-                await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl, args]);
-              }
-            };
-            br.addEventListener(type, handler, opts);
-            if (options.removeOnDisconnected === true || br !== this && br !== this.shadowRoot) {
-              this._boundListeners.push({ target: br, type, handler, options: opts });
-            }
-          });
-        } else {
+        else {
           const searchRoots = [];
           if (r === "auto") searchRoots.push(this.shadowRoot || this);
           else if (r === "light") searchRoots.push(this);
@@ -7158,7 +7195,7 @@ var dooboostoreSimpleWebComponent = (() => {
             if (options.preventDefault) event.preventDefault();
             const currentHostSet = SwcUtils.getHostSet(this);
             const args = { event, ...currentHostSet, $el: t, $root: t };
-            await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+            await this[meta.propertyKey](event, currentHostSet, args);
           };
           t.addEventListener(type, handler, opts);
           if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
@@ -7166,6 +7203,22 @@ var dooboostoreSimpleWebComponent = (() => {
           }
         });
       });
+      addHostEventListenerList.forEach((meta) => {
+        const { type, options } = meta;
+        const opts = { capture: options.capture, once: options.once, passive: options.passive };
+        const handler = async (event) => {
+          if (options.stopPropagation) event.stopPropagation();
+          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+          if (options.preventDefault) event.preventDefault();
+          const currentHostSet = SwcUtils.getHostSet(this);
+          const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
+          await this[meta.propertyKey](event, currentHostSet, args);
+        };
+        this.addEventListener(type, handler, opts);
+        if (options.removeOnDisconnected === true) {
+          this._boundListeners.push({ target: this, type, handler, options: opts });
+        }
+      });
       if (originalConnected) originalConnected.apply(this);
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
       if (aMethods) {
@@ -7215,17 +7268,20 @@ var dooboostoreSimpleWebComponent = (() => {
     const originalAttributeChanged = proto.attributeChangedCallback;
     proto.attributeChangedCallback = function(name2, old, newVal) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
+      const hSet = SwcUtils.getHostSet(this);
       if (name2.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name2)) {
         if (newVal !== null) {
-          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name2);
-          const eventName = customEventMeta ? customEventMeta.type : name2.substring(7);
+          const eventName = name2.substring(7);
           this._bindAttributeEvent(this, name2, newVal, eventName);
         }
       }
+      const hostCustomEventMeta = emitHostCustomEventList.find((it) => it.options.attributeName === name2);
+      if (hostCustomEventMeta && newVal !== null) {
+        this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
+      }
       const mKeys = attrChangeMap.get(name2);
       if (mKeys && Array.isArray(mKeys)) {
-        const hSet = SwcUtils.getHostSet(this);
-        for (const key of mKeys) this._invokeLifecycleMethod(key, hSet, [newVal, old, name2]);
+        for (const key of mKeys) this[key](newVal, old, name2, hSet);
       }
     };
     Object.defineProperty(constructor, "observedAttributes", {