@dooboostore/simple-web-component 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -79,8 +79,8 @@
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core-web": "1.0.9",
     "@dooboostore/core": "1.0.28",
+    "@dooboostore/core-web": "1.0.9",
     "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {

package/src/decorators/attribute.ts

@@ -13,11 +13,11 @@ export interface AttributeMetadata {
 
 export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
 
-export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
+export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator;
+export function attribute(target: Object, propertyKey: string | symbol): void;
+export function attribute(arg1?: string | AttributeOptions | Object, arg2?: string | symbol): any {
+  const decorator = (options: AttributeOptions, target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};
-
     if (!options.name) options.name = String(propertyKey);
     if (!options.type) options.type = String;
     if (options.disableReflect === undefined) options.disableReflect = false;
@@ -53,14 +53,19 @@ export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDe
 
         this[internalKey] = convertedVal;
 
+        // Surgical Update Trigger
+        if (typeof (this as any)._updateState === 'function') {
+          (this as any)._updateState(options.name);
+        }
+
         // Reflection
         if (!options.disableReflect && this.setAttribute) {
           if (convertedVal === null || convertedVal === undefined || convertedVal === false) {
-            this.removeAttribute(options.name);
+            this.removeAttribute(options.name!);
           } else {
             const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);
-            if (this.getAttribute(options.name) !== attrVal) {
-              this.setAttribute(options.name, attrVal);
+            if (this.getAttribute(options.name!) !== attrVal) {
+              this.setAttribute(options.name!, attrVal);
             }
           }
         }
@@ -69,6 +74,17 @@ export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDe
       configurable: true
     });
   };
+
+  // Case: @attribute (parameterless decorator)
+  if (arg1 && typeof arg2 === 'string') {
+    return decorator({}, arg1 as Object, arg2 as string | symbol);
+  }
+
+  // Case: @attribute('name') or @attribute({ ... })
+  return (target: Object, propertyKey: string | symbol) => {
+    const options: AttributeOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as AttributeOptions) || {};
+    decorator(options, target, propertyKey);
+  };
 }
 
 export const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {

package/src/decorators/elementDefine.ts

@@ -7,7 +7,7 @@ import { getLifecycleMetadata, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNEC
 import { getAttributeMetadataList } from './attribute';
 import { getStateMetadataList } from './state';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
-import { SwcUtils } from '../utils/Utils';
+import { SwcUtils, SWC_NOT_FOUND } from '../utils/Utils';
 
 export interface ElementConfig {
   name: string;
@@ -20,6 +20,16 @@ export interface ElementConfig {
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
 export const STATE_CHANGE_EVENT = 'swc:state-change';
 
+// swc-on-* 핸들러에 공통 주입되는 DOM 단축 헬퍼
+const $d = document;
+const $w = window;
+const $q = (sel: string, root?: Element | Document | ShadowRoot) => (root ?? document).querySelector(sel);
+const $qa = (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? document).querySelectorAll(sel));
+const $qi = (id: string, root?: Document | ShadowRoot) => (root ?? document).getElementById(id);
+const SWC_DOM_HELPERS = { $d, $w, $q, $qa, $qi } as const;
+const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS) as (keyof typeof SWC_DOM_HELPERS)[];
+const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map(k => SWC_DOM_HELPERS[k]);
+
 const BUILT_IN_TAG_MAP = new Map<any, string>();
 
 const registerTag = (className: string, tagName: string) => {
@@ -107,7 +117,8 @@ export const elementDefine =
     const stateList = getStateMetadataList(constructor);
     const observedFromProps = attributePropsList ? attributePropsList.map(it => it.options.name!) : [];
     const observedFromEmits = emitCustomEventList ? emitCustomEventList.map(it => it.options.attributeName!) : [];
-    const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...observedFromProps, ...observedFromEmits])];
+    const swcLifecycleAttributes = ['swc-on-constructor', '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 mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...observedFromProps, ...observedFromEmits, ...swcLifecycleAttributes])];
 
     const NewClass = class extends (constructor as any) {
       private _swcId = Math.random().toString(36).substring(2, 11);
@@ -119,25 +130,61 @@ export const elementDefine =
       private _internalStates = new Map<string | symbol, any>();
       private _externalSources = new Map<string, HTMLElement>();
 
+      // name→value 컨텍스트 반환 (applyData의 hostContext용)
+      _getHostContext(): Record<string, any> {
+        const ctx: Record<string, any> = {};
+        if (stateList) {
+          stateList.forEach(meta => {
+            const name = meta.options.name!;
+            const val = this._internalStates.get(meta.propertyKey);
+            ctx[name] = val;
+          });
+        }
+        if (attributePropsList) {
+          attributePropsList.forEach(meta => {
+            const name = meta.options.name!;
+            const val = this._internalStates.get(meta.propertyKey);
+            ctx[name] = val;
+          });
+        }
+        return ctx;
+      }
+
       static get observedAttributes() {
         return mergedObservedAttributes;
       }
 
+      private _executeSwcScript(attrName: string, extraArgs: Record<string, any> = {}) {
+        const script = this.getAttribute(attrName);
+        if (script) {
+          try {
+            const $hosts = SwcUtils.findAllSwcHosts(this as any);
+            const $firstHost = $hosts[0] || null;
+            const $lastHost = $hosts[$hosts.length - 1] || null;
+            const $host = $lastHost;
+            const args = { $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPERS, ...extraArgs };
+            const argNames = Object.keys(args);
+            const argValues = Object.values(args);
+            new Function(...argNames, script).apply(this, argValues);
+          } catch (e) {
+            console.error(`[SWC] Failed to execute ${attrName} script:`, e);
+          }
+        }
+      }
+
       constructor(...args: any[]) {
         super(...args);
+        this._executeSwcScript('swc-on-constructor');
 
         if (stateList) {
           stateList.forEach(meta => {
             const key = meta.propertyKey;
             const stateName = meta.options.name!;
-
-            // 필드 초기화로 덮어씌워지기 전/후의 값을 확실히 낚아챔
             const initialVal = (this as any)[key];
             this._internalStates.set(
               key,
               SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
             );
-
             Object.defineProperty(this, key, {
               get: () => this._internalStates.get(key),
               set: newVal => {
@@ -154,14 +201,63 @@ export const elementDefine =
           });
         }
 
+        if (attributePropsList) {
+          attributePropsList.forEach(meta => {
+            const key = meta.propertyKey;
+            const attrName = meta.options.name!;
+            const attrValue = this.getAttribute(attrName);
+            let initialVal = attrValue !== null ? attrValue : (this as any)[key];
+            if (initialVal === undefined) initialVal = null;
+
+            if (attrValue !== null) {
+              if (meta.options.type === Number) initialVal = Number(attrValue);
+              else if (meta.options.type === Boolean) initialVal = true;
+              else if (meta.options.type === Object) {
+                try {
+                  initialVal = JSON.parse(attrValue);
+                } catch (e) {}
+              }
+            }
+
+            this._internalStates.set(key, initialVal);
+            Object.defineProperty(this, key, {
+              get: () => this._internalStates.get(key),
+              set: newVal => {
+                if (this._internalStates.get(key) === newVal) return;
+                this._internalStates.set(key, newVal);
+                if (typeof (this as any)._updateState === 'function') (this as any)._updateState(attrName);
+                // 객체/배열은 setAttribute로 반영하지 않음 - attributeChangedCallback 무한루프 방지
+                if (!meta.options.disableReflect && this.setAttribute && typeof newVal !== 'object') {
+                  if (newVal === null || newVal === undefined || newVal === false) this.removeAttribute(attrName);
+                  else this.setAttribute(attrName, String(newVal));
+                }
+              },
+              enumerable: true,
+              configurable: true
+            });
+          });
+        }
+
         const innerHtmlList = getInnerHtmlMetadataList(this);
         if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
         }
       }
 
+      private _isSyncing = false;
+
       private _syncDecorators() {
-        this._buildStateMap();
+        if (this._isSyncing) return;
+        this._isSyncing = true;
+        try {
+          this._buildStateMap();
+          this._syncEventListenersAndQueries();
+        } finally {
+          this._isSyncing = false;
+        }
+      }
+
+      private _syncEventListenersAndQueries() {
         const getSearchRoots = (rootOption?: string): Node[] => {
           const roots: Node[] = [];
           if (rootOption === 'shadow') {
@@ -243,7 +339,7 @@ export const elementDefine =
                     bound.add(eventKey);
                     if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
                     const addEventMethods = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
-                    addEventMethods?.forEach(m => {
+                    addEventMethods?.forEach((m: string | symbol) => {
                       if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
                     });
                   }
@@ -255,7 +351,6 @@ export const elementDefine =
       }
 
       private _buildStateMap() {
-        // 기존 바인딩 맵을 완전히 비우지 않고 유지하면서 새로운 노드만 추가함 (바인딩 소실 방지 핵심)
         const scan = (root: Node) => {
           const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
           let node: Node | null = null;
@@ -263,12 +358,92 @@ export const elementDefine =
             if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, 'text');
             else if (node.nodeType === Node.ELEMENT_NODE) {
               const el = node as HTMLElement;
+
               const alias = el.getAttribute('as');
               if (alias && !this._externalSources.has(alias)) {
                 this._externalSources.set(alias, el);
-                el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+                const aliasKey = `alias-event:${alias}`;
+                let bound = this._boundElements.get(el);
+                if (!bound) {
+                  bound = new Set();
+                  this._boundElements.set(el, bound);
+                }
+                if (!bound.has(aliasKey)) {
+                  el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+                  bound.add(aliasKey);
+                }
+              }
+
+              Array.from(el.attributes).forEach(attr => {
+                if (attr.name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(attr.name)) {
+                  const eventName = attr.name.substring(7);
+                  if (eventName === 'connected') {
+                    const eventKey = `attr-once:${attr.name}`;
+                    let bound = this._boundElements.get(el);
+                    if (!bound) {
+                      bound = new Set();
+                      this._boundElements.set(el, bound);
+                    }
+                    if (!bound.has(eventKey)) {
+                      const script = el.getAttribute(attr.name);
+                      if (script) {
+                        try {
+                          const $hosts = SwcUtils.findAllSwcHosts(el);
+                          const $firstHost = $hosts[0] || null;
+                          const $lastHost = $hosts[$hosts.length - 1] || null;
+                          const $host = $lastHost;
+                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                        } catch (e) {
+                          console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                        }
+                      }
+                      bound.add(eventKey);
+                    }
+                    return;
+                  }
+
+                  const eventKey = `attr-event:${attr.name}`;
+                  let bound = this._boundElements.get(el);
+                  if (!bound) {
+                    bound = new Set();
+                    this._boundElements.set(el, bound);
+                  }
+                  if (!bound.has(eventKey)) {
+                    const handler = (event: any) => {
+                      const rawScript = el.getAttribute(attr.name);
+                      if (rawScript) {
+                        try {
+                          const $hosts = SwcUtils.findAllSwcHosts(el);
+                          const $firstHost = $hosts[0] || null;
+                          const $lastHost = $hosts[$hosts.length - 1] || null;
+                          const $host = $lastHost;
+                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, rawScript)
+                            .call(el, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                        } catch (e) {
+                          console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                        }
+                      }
+                    };
+                    el.addEventListener(eventName, handler);
+
+                    bound.add(eventKey);
+                    if (config.autoRemoveEventListeners) this._activeListeners.push({ el, type: eventName, handler });
+                  }
+                }
+                this._parseAndBind(attr, 'attribute', el);
+              });
+
+              // --- Scope Protection: Don't scan inside child SWC components ---
+              // is 어트리뷰트 방식 커스텀 엘리먼트도 포함 (swc-for-of-*, swc-if-* 등)
+              const isSwcChild = (el as any)._swcId
+                || getElementConfig(el.constructor)
+                || (el.getAttribute('is')?.startsWith('swc-') ?? false);
+              if (isSwcChild) {
+                const next = walker.nextSibling();
+                if (!next) break;
+                node = next;
+                if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, 'text');
               }
-              Array.from(el.attributes).forEach(attr => this._parseAndBind(attr, 'attribute', el));
             }
           }
         };
@@ -278,99 +453,123 @@ export const elementDefine =
 
       private _parseAndBind(node: Node | Attr, type: 'text' | 'attribute', owner?: HTMLElement) {
         const tplKey = `__swc_original_${this._swcId}`;
-        // 이미 이 인스턴스에 의해 바인딩된 노드라면 스킵 (중복 방지)
         const isAlreadyBound = (node as any).__swc_bound_ids?.has(this._swcId);
-
-        // 텍스트는 원본 템플릿(tplKey)에서, 없으면 현재 내용에서 추출
         const content = (node as any)[tplKey] || node.textContent || '';
-        const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
-        if (matches.length === 0) return;
-
-        if (isAlreadyBound) return;
+        const matches = Array.from(content.matchAll(/{{(.*?)}}/g)) as any[];
+        if (matches.length === 0 || isAlreadyBound) return;
 
         matches.forEach(match => {
-          const fullPath = match[1].trim();
+          const fullPath = (match[1] as string).trim();
           const rootName = fullPath.split('.')[0];
-
           const isState = stateList?.some(s => s.options.name === rootName);
+          const isAttr = attributePropsList?.some(a => a.options.name === rootName);
           const isLogicKey = (this as any)._asKey === rootName || (this as any)._asIndexKey === rootName;
           const isExternal = this._externalSources.has(rootName);
           const isSelfAlias = this.getAttribute('as') === rootName;
-
-          if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+          const isInstanceProp = rootName in this;
+          if (!isState && !isAttr && !isLogicKey && !isExternal && !isSelfAlias && !isInstanceProp) return;
 
           if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
-
           if (!(node as any)[tplKey]) (node as any)[tplKey] = content;
-
-          // 바인딩 ID 기록
           if (!(node as any).__swc_bound_ids) (node as any).__swc_bound_ids = new Set();
           (node as any).__swc_bound_ids.add(this._swcId);
-
           this._stateBindings.get(rootName)!.push({ node, type, owner, path: fullPath });
           this._updateState(rootName);
         });
       }
 
+      private _isUpdatingState = false;
+
       private _updateState(stateName: string) {
         if (!this._stateBindings) return;
-        this._executeBindingUpdate(stateName);
-        const selfAlias = this.getAttribute('as');
-        if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-        this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+        if (this._isUpdatingState) return;
+        this._isUpdatingState = true;
+        try {
+          this._executeBindingUpdate(stateName);
+          const selfAlias = this.getAttribute('as');
+          if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
+          this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+        } finally {
+          this._isUpdatingState = false;
+        }
       }
 
       private _executeBindingUpdate(stateName: string) {
         const bindings = this._stateBindings.get(stateName);
         if (!bindings) return;
         const tplKey = `__swc_original_${this._swcId}`;
-
         bindings.forEach(bin => {
           let text = (bin.node as any)[tplKey];
           if (!text) return;
-
-          const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+          const matches = Array.from(text.matchAll(/{{(.*?)}}/g)) as RegExpMatchArray[];
           let updatedText = text;
-
           for (const match of matches) {
             const path = match[1].trim();
             const root = path.split('.')[0];
             let val: any = undefined;
             let current: HTMLElement | null = this as any as HTMLElement;
-
             while (current) {
               const currentNewClass = current as any;
               if (current.getAttribute('as') === root) {
                 val = SwcUtils.getValueByPath(current, path.split('.').slice(1).join('.') || 'value', 'value');
-                if (val !== undefined) break;
+                if (val !== SWC_NOT_FOUND) break;
               }
               const externalSource = currentNewClass._externalSources?.get(root);
               if (externalSource) {
                 val = SwcUtils.getValueByPath(externalSource, path.split('.').slice(1).join('.') || 'value', 'value');
-                if (val !== undefined) break;
+                if (val !== SWC_NOT_FOUND) break;
               }
               const cStates = getStateMetadataList(current.constructor);
               const cAttrs = getAttributeMetadataList(current.constructor);
               const sMeta = cStates?.find(s => s.options.name === root);
               const aMeta = cAttrs?.find(a => a.options.name === root);
               if (sMeta || aMeta) {
-                let aPath = path;
-                if (sMeta && sMeta.options.name !== String(sMeta.propertyKey)) aPath = path.replace(sMeta.options.name!, String(sMeta.propertyKey));
-                else if (aMeta && aMeta.options.name !== String(aMeta.propertyKey)) aPath = path.replace(aMeta.options.name!, String(aMeta.propertyKey));
-                val = SwcUtils.getValueByPath(current, aPath, root);
-                if (val !== undefined) break;
+                // 프로퍼티 키로 인스턴스에서 루트 값을 먼저 가져온 뒤 나머지 경로를 탐색
+                const propKey = sMeta ? String(sMeta.propertyKey) : String(aMeta!.propertyKey);
+                const rootVal = (current as any)[propKey];
+                const subPath = path.split('.').slice(1).join('.');
+                if (subPath) {
+                  // superUser.name → rootVal = superUser 객체, subPath = "name"
+                  val = SwcUtils.getValueByPath(rootVal, subPath, subPath.split('.')[0]);
+                  if (val === SWC_NOT_FOUND) {
+                    // 단순 점 경로 직접 접근
+                    const parts = subPath.split('.');
+                    let cur = rootVal;
+                    for (const p of parts) {
+                      if (cur === null || cur === undefined) { cur = SWC_NOT_FOUND; break; }
+                      cur = cur[p];
+                    }
+                    if (cur !== undefined && cur !== SWC_NOT_FOUND) val = cur;
+                  }
+                } else {
+                  // 루트 자체가 값 (e.g. {{superUser}} 전체)
+                  val = rootVal;
+                }
+                if (val !== SWC_NOT_FOUND && val !== undefined) break;
               }
+
+              // Fallback: check raw property on instance even if not @state
+              if (root in current) {
+                val = SwcUtils.getValueByPath(current, path, root);
+                if (val !== SWC_NOT_FOUND) break;
+              }
+
               current = current.parentElement || (current.getRootNode() as any).host;
             }
-
-            if (val !== undefined) {
-              const strVal = val === null || val === undefined ? '' : typeof val === 'object' ? '[Object]' : String(val);
+            if (val !== SWC_NOT_FOUND && val !== undefined) {
+              const strVal = val === null ? '' : typeof val === 'object' ? JSON.stringify(val) : String(val);
               updatedText = updatedText.replace(match[0], strVal);
-
               if (bin.type === 'attribute' && bin.owner) {
                 const attrName = (bin.node as Attr).name;
-                if (val === null || val === undefined) bin.owner.removeAttribute(attrName);
-                else {
+                const ownerAttrs = getAttributeMetadataList(bin.owner.constructor);
+                const attrMeta = ownerAttrs?.find(a => a.options.name === attrName);
+                const propName = attrMeta ? String(attrMeta.propertyKey) : attrName.replace(/-([a-z])/g, g => g[1].toUpperCase());
+
+                if (val === null || val === undefined) {
+                  bin.owner.removeAttribute(attrName);
+                  if (propName in bin.owner) (bin.owner as any)[propName] = val;
+                } else {
+                  if (propName in bin.owner) (bin.owner as any)[propName] = val;
                   bin.owner.setAttribute(attrName, updatedText);
                   if ((attrName === 'value' || attrName === 'checked') && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
                     (bin.owner as any)[attrName] = updatedText;
@@ -384,7 +583,8 @@ export const elementDefine =
       }
 
       disconnectedCallback() {
-        const bMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+        this._executeSwcScript('swc-on-before-disconnected');
+        const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
         bMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
@@ -394,26 +594,30 @@ export const elementDefine =
           this._activeListeners = [];
         }
         if (super.disconnectedCallback) super.disconnectedCallback();
-        const aMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+        const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
         aMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
+        this._executeSwcScript('swc-on-after-disconnected');
       }
 
       adoptedCallback() {
-        const bMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+        this._executeSwcScript('swc-on-before-adopted');
+        const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_ADOPTED_METADATA_KEY);
         bMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
         if (super.adoptedCallback) super.adoptedCallback();
-        const aMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+        const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_ADOPTED_METADATA_KEY);
         aMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
+        this._executeSwcScript('swc-on-after-adopted');
       }
 
       async connectedCallback() {
-        const bMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+        this._executeSwcScript('swc-on-before-connected');
+        const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_CONNECTED_METADATA_KEY);
         bMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
@@ -433,13 +637,78 @@ export const elementDefine =
         if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
         if (lContent) this.innerHTML = lContent;
         (this as any)._syncDecorators();
+
+        const isManagedByParent = !!SwcUtils.findNearestSwcHost(this as any);
+
+        if (!isManagedByParent) {
+          Array.from(this.attributes as any).forEach((attr: any) => {
+            if (attr.name.startsWith('swc-on-') && swcLifecycleAttributes.indexOf(attr.name) === -1) {
+              const eventName = attr.name.substring(7);
+              if (eventName === 'connected') {
+                const eventKey = `host-attr-once:${attr.name}`;
+                let bound = this._boundElements.get(this as any);
+                if (!bound) {
+                  bound = new Set();
+                  this._boundElements.set(this as any, bound);
+                }
+                if (!bound.has(eventKey)) {
+                  const script = (this as any).getAttribute(attr.name);
+                  if (script) {
+                    try {
+                      const $hosts = SwcUtils.findAllSwcHosts(this as any);
+                      const $firstHost = $hosts[0] || null;
+                      const $lastHost = $hosts[$hosts.length - 1] || null;
+                      const $host = $lastHost;
+                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(this, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                    } catch (e) {
+                      console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                    }
+                  }
+                  bound.add(eventKey);
+                }
+                return;
+              }
+
+              const eventKey = `host-attr-event:${attr.name}`;
+              let bound = this._boundElements.get(this as any);
+              if (!bound) {
+                bound = new Set();
+                this._boundElements.set(this as any, bound);
+              }
+
+              if (!bound.has(eventKey)) {
+                const handler = (event: any) => {
+                  const script = (this as any).getAttribute(attr.name);
+                  if (script) {
+                    try {
+                      const $hosts = SwcUtils.findAllSwcHosts(this as any);
+                      const $firstHost = $hosts[0] || null;
+                      const $lastHost = $hosts[$hosts.length - 1] || null;
+                      const $host = $lastHost;
+                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script)
+                        .call(this, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                    } catch (e) {
+                      console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                    }
+                  }
+                };
+                this.addEventListener(eventName, handler);
+
+                bound.add(eventKey);
+                if (config.autoRemoveEventListeners) this._activeListeners.push({ el: this as any, type: eventName, handler });
+              }
+            }
+          });
+        }
+
         this._observer = new MutationObserver(() => (this as any)._syncDecorators());
         this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
         if (super.connectedCallback) await super.connectedCallback();
-        const aMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+        const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_CONNECTED_METADATA_KEY);
         aMethods?.forEach(m => {
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
+        this._executeSwcScript('swc-on-after-connected');
       }
 
       attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
@@ -447,7 +716,12 @@ export const elementDefine =
         if (attributePropsList) {
           attributePropsList.forEach(meta => {
             if (meta.options.name === name) {
-              if (String((this as any)[meta.propertyKey]) !== String(newValue)) (this as any)[meta.propertyKey] = newValue;
+              const current = (this as any)[meta.propertyKey];
+              // 객체/배열 타입은 attributeChangedCallback에서 setter를 재호출하지 않음
+              // (setter에서 setAttribute를 하지 않으므로 이 경로로 들어올 일이 없고,
+              //  외부에서 attribute를 직접 바꾸는 경우만 처리)
+              if (typeof current === 'object' && current !== null) return;
+              if (String(current) !== String(newValue)) (this as any)[meta.propertyKey] = newValue;
             }
           });
         }
@@ -478,13 +752,16 @@ export const elementDefine =
           wMethodsKeys.forEach(key => {
             if (typeof (this as any)[key] === 'function') (this as any)[key](newValue, oldValue, name);
           });
+        this._executeSwcScript('swc-on-attribute-changed', { $new: newValue, $old: oldValue, $name: name });
       }
     };
 
     const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);
     if (registry && !registry.get(config.name)) {
-      registry.define(config.name, NewClass as any, config.extends ? { extends: config.extends } : undefined);
+      const options = config.extends ? { extends: config.extends } : undefined;
+      registry.define(config.name, NewClass as any, options);
     }
+
     ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
     return NewClass as any;
   };