@dooboostore/simple-web-component 1.0.35 → 1.0.37

package/src/decorators/attribute.ts

@@ -77,20 +77,21 @@ export const resolveTargetEls = (inst: any, selector: string, options: Attribute
     }
   };
 
-  if (selector === ':host' || !selector) {
+  if (selector === '$this' || !selector) {
     applyRoot(inst);
-  } else if (selector === ':window') {
+  } else if (selector === '$window') {
     results.push(currentWin);
-  } else if (selector === ':document') {
+  } else if (selector === '$document') {
     results.push(currentWin.document);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);
-    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);
-    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    if (selector === '$host') applyRoot(hostSet.$host);
+    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
     else {
       if (r === 'shadow') {
         const found = inst.shadowRoot?.querySelectorAll(selector);
@@ -189,29 +190,29 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
 }
 
 /**
- * @attributeHost decorator to sync a field value with the :host element's attribute.
+ * @attributeThis decorator to sync a field value with the $this element's attribute.
  */
-export function attributeHost(target: Object, propertyKey: string | symbol): void;
-export function attributeHost(options: AttributeFieldOptions): PropertyDecorator;
-export function attributeHost(attrName: string): PropertyDecorator;
-export function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
-export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
+export function attributeThis(target: Object, propertyKey: string | symbol): void;
+export function attributeThis(options: AttributeFieldOptions): PropertyDecorator;
+export function attributeThis(attrName: string): PropertyDecorator;
+export function attributeThis(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
+export function attributeThis(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
   if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
+    return attribute('$this', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
   }
 
   if (typeof targetOrAttrOrOptions === 'string') {
     const attrName = targetOrAttrOrOptions;
     const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;
-    return attribute(':host', { ...options, name: attrName });
+    return attribute('$this', { ...options, name: attrName });
   } else if (typeof targetOrAttrOrOptions === 'object') {
     const options = targetOrAttrOrOptions as AttributeFieldOptions;
     return (target: Object, propertyKey: string | symbol) => {
-      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);
+      return attribute('$this', { ...options, name: String(propertyKey) })(target, propertyKey);
     };
   } else {
     return (target: Object, propertyKey: string | symbol) => {
-      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);
+      return attribute('$this', { name: String(propertyKey) })(target, propertyKey);
     };
   }
 }

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

@@ -2,15 +2,15 @@ import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
-export interface ChangedAttributeHostOptions {
+export interface ChangedAttributeThisOptions {
   type?: typeof Number | typeof Boolean | typeof String;
   while?: 'connected';
 }
 
-export interface ChangedAttributeHostMetadata {
+export interface ChangedAttributeThisMetadata {
   attributeName: string;
   propertyKey: string | symbol;
-  options: ChangedAttributeHostOptions;
+  options: ChangedAttributeThisOptions;
 }
 
 const convertValue = (val: any, type: any): any => {
@@ -21,14 +21,12 @@ const convertValue = (val: any, type: any): any => {
 };
 
 /**
- * @changedAttributeHost decorator - fires when any attribute on :host changes
- * Usage: @changedAttributeHost('data-product-id')
- *        @changedAttributeHost('count', { type: Number })
+ * @changedAttributeThis decorator - fires when any attribute on $this changes
  */
-export function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {
+export function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];
+    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
     if (!metaList) {
       metaList = [];
       ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
@@ -43,16 +41,16 @@ export function changedAttributeHost(attributeName?: string, options: ChangedAtt
   };
 }
 
-export const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {
+export const getChangedAttributeMetadata = (target: any): ChangedAttributeThisMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
 };
 
-export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {
+export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeThisMetadata[]> => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeThisMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
 
-  const result = new Map<string, ChangedAttributeHostMetadata[]>();
+  const result = new Map<string, ChangedAttributeThisMetadata[]>();
   metaList.forEach(meta => {
     meta.forEach(item => {
       if (!result.has(item.attributeName)) {

package/src/decorators/elementDefine.ts

@@ -1,8 +1,8 @@
 import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
 import {getAddEventListenerMetadata} from './addEventListener';
-import {ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata} from './lifecycles';
+import {ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata, getOnConnectedBeforeMetadata, getOnConnectedAfterMetadata, ON_CONNECTED_COMPLETED_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
-import {findAllAttributeChangedMetadata, convertAttributeValue} from './changedAttributeHost';
+import {findAllAttributeChangedMetadata, convertAttributeValue} from './changedAttributeThis';
 import {findAllAttributeApplyMetadata} from './applyAttribute';
 import {findAllAttributeMetadata, getAttributeValue} from './attribute';
 import {getQueryMetadata} from './query';
@@ -10,8 +10,10 @@ import {getQueryAllMetadata} from './queryAll';
 import {SwcUtils} from '../utils/Utils';
 import {HTML_TAG_ENTRIES, DOM_EVENT_NAMES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
-import {InjectSituationType, HostSet, HelperHostSet} from '../types';
-import {ConvertUtils} from '@dooboostore/core-web';
+import {InjectSituationType, HostSet, HelperHostSet, SwcAppInterface} from '../types';
+import {ConvertUtils, NodeSlot} from '@dooboostore/core-web';
+import {isSSR} from "../elements/SwcApp";
+import {findAllApplySlotMetadata} from "./applySlot";
 
 // --- Core Interfaces & Types ---
 
@@ -35,9 +37,9 @@ export const getElementConfig = (target: any): ElementMetadata | undefined => {
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 
-export const ensureInit = (inst: any) => {
+export const ensureInit = (inst: any) => { // HTMLElement
   if (!inst.__swc_initialized) {
-    inst._swcId = Math.random().toString(36).substring(2, 11);
+    inst._swcId = inst?.getAttribute?.('swc-use-ssr') ?? Math.random().toString(36).substring(2, 11);
     inst._emitHandlers = new Map();
     inst._boundListeners = [];
     inst.__swc_initialized = true;
@@ -54,7 +56,7 @@ export const ensureInit = (inst: any) => {
     // ║                                                                                ║
     // ║ 이유:                                                                          ║
     // ║ 1. TypeScript는 초기값이 있는 필드를 constructor에서 own property로 생성       ║
-    // ║    @attributeHost('id') myId: string = "default"  →  this.myId = "default"    ║
+    // ║    @attributeThis('id') myId: string = "default"  →  this.myId = "default"    ║
     // ║                                                                                ║
     // ║ 2. JavaScript의 property lookup은 own property를 먼저 찾음                      ║
     // ║    - this.myId 접근                                                           ║
@@ -89,10 +91,16 @@ export const ensureInit = (inst: any) => {
         delete (inst as any)[meta.propertyKey];
       });
     }
+    const slotAllList = findAllApplySlotMetadata(target);
+    if (slotAllList) {
+      slotAllList.filter(it=>it.type === 'property').forEach(meta => {
+        delete (inst as any)[meta.propertyKey];
+      });
+    }
 
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
-    const appHosts = SwcUtils.findAllParentAppHostsDirect(inst);
+    const appHosts = SwcUtils.findAllAppHostsIncludingSelfDirect(inst);
     inst._executeSwcScript?.('swc-on-constructor', hostSet);
 
     // Call @onInitialize lifecycle methods
@@ -116,7 +124,7 @@ const handleGlobalSwcEvent = async (event: Event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host: any = SwcUtils.findNearestSwcHost(node);
+      const host: any = SwcUtils.findNearestSwcHostIncludingSelf(node);
       if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === 'function') {
         await host.__swc_executeAttributeEvent(node, attrName, script, event);
         (event as any).__swc_handled = true;
@@ -143,7 +151,7 @@ const getHandlers = (inst: any) => {
   return inst.__swc_attributeEventHandlers;
 };
 
-const setupPrototype = (proto: any) => {
+const setupPrototype = (proto: any, win: Window) => {
   if (proto.__swc_proto_setup) return;
   proto.__swc_proto_setup = true;
 
@@ -166,7 +174,7 @@ const setupPrototype = (proto: any) => {
   proto._resolveWindow = function (localConfig?: ElementConfig): Window {
     ensureInit(this);
     if (localConfig?.window) return localConfig.window;
-    const ancestors = SwcUtils.findAllSwcHosts(this as any);
+    const ancestors = SwcUtils.findAllSwcHostsIncludingSelf(this as any);
     for (let i = ancestors.length - 1; i >= 0; i--) {
       const aConf = getElementConfig(ancestors[i]);
       if (aConf?.window) return aConf.window;
@@ -177,7 +185,7 @@ const setupPrototype = (proto: any) => {
   proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
-    const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
+    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(win, this);
     const app = useHostSet?.$appHost?.simpleApplication;
     // console.log('---->hh',app, this, methodName);
     if (app) {
@@ -285,7 +293,7 @@ export const elementDefine =
       }
 
       const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
-      const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === ':host' || meta.selector === '');
+      const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === '$this' || meta.selector === '');
       const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
       const attrChangeMap = findAllAttributeChangedMetadata(constructor);
       const attributeList = findAllAttributeMetadata(constructor);
@@ -297,14 +305,14 @@ export const elementDefine =
       const attributeApplyNames = Array.from(applyAttributeMap.values())
         .map(it => it.options.name)
         .filter(Boolean) as string[];
-      const hostAttributes = attributeList.filter(it => it.selector === ':host').map(it => it.options.name || String(it.propertyKey));
+      const hostAttributes = attributeList.filter(it => it.selector === '$this').map(it => it.options.name || String(it.propertyKey));
       // Get original static observedAttributes before they're overwritten by Object.defineProperty
       const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
       const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
-      const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
+      // const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
       const proto = constructor.prototype;
-      setupPrototype(proto);
+      setupPrototype(proto, win);
 
       // 값을 기대하지않는다.
       let helperHostSet: HelperHostSet | null = null;
@@ -314,61 +322,69 @@ export const elementDefine =
         // connected 됐을시 최신화
         helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
         const appHost = helperHostSet.$appHost;
+        const useSsr = isSSR(this);
+        // console.log('isSsr', useSsr, this);
+        // console.log('----helperHostSet--->', this, helperHostSet, useSsr)
+        // let connectedApp: SwcAppInterface |undefined;
         try {
           if (appHost && typeof (appHost as any)._connected === 'function') {
-           await (appHost as any)._connected(this);
+            await (appHost as any)._connected(this);
           } else if (appHost && typeof (appHost as any)) {
-            (appHost as any)._connected_safari ??= [];
-            (appHost as any)._connected_safari.push(this);
+            (appHost as any)._connected_safari_and_standby ??= [];
+            (appHost as any)._connected_safari_and_standby.push(this);
           }
 
           // const hostSet = SwcUtils.getHostSet(this as any);
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const shadowMode = conf?.useShadow || connectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
+          const bMethods = getOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
+          // console.log('beforeConnected', bMethods)
+          if (bMethods) {
+            for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          }
+          (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
+
+          // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
+          //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
+          const targetConnectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const shadowMode = conf?.useShadow || targetConnectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
           if (shadowMode && !this.shadowRoot) {
             const mode = shadowMode === true ? 'open' : shadowMode;
             this.attachShadow({mode: mode as ShadowRootMode});
           }
 
-          const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-          if (bMethods) {
-            for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m, helperHostSet);
-          }
-          (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
-
-          if (connectedInnerHtmlList.length > 0) {
+          if (targetConnectedInnerHtmlList.length > 0) {
             let sContent = '',
               lContent = '';
-            for (const meta of connectedInnerHtmlList) {
+            for (const meta of targetConnectedInnerHtmlList) {
               // const res = (this as any)[meta.propertyKey]();
               let res = await (this as any)._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
               const actionExpression = new ActionExpression(res, {
                 expression: {
                   replace: {
-                    start: meta.options.replaceWrap?.start || '{%{',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[',
+                    end: meta.options.replaceWrap?.end || ']]'
                   },
                   callReturn: {
-                    start: meta.options.replaceWrap?.start || '{%{=',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[=',
+                    end: meta.options.replaceWrap?.end || ']]'
                   },
                   call: {
-                    start: meta.options.replaceWrap?.start || '{%{@',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[@',
+                    end: meta.options.replaceWrap?.end || ']]'
                   }
                 }
               });
 
               actionExpression.getExpressions().filter(it => it.type === 'replace').forEach(it => {
-                try {
-                  // const helperHostSet22 = SwcUtils.getHelperAndHostSet(win, this as any);
-                  const sr = FunctionUtils.executeReturn({script: it.script, context: this, args: helperHostSet});
-                  actionExpression.replace(it, sr);
-                } catch (e) {
-                  console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
-                }
+                actionExpression.replace(it, NodeSlot.slot(`${this._swcId}-${it.script}`));
+                // try {
+                //   const sr = FunctionUtils.executeReturn({script: it.script, context: this, args: helperHostSet});
+                //   actionExpression.replace(it, sr);
+                // } catch (e) {
+                //   console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
+                // }
               });
               res = actionExpression.getUnprocessedTemplate();
 
@@ -402,7 +418,7 @@ export const elementDefine =
           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 !== '') {
+            if (meta.options.delegate && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
               delegateListeners.push(meta);
             } else {
               nonDelegateListeners.push(meta);
@@ -482,17 +498,18 @@ export const elementDefine =
               }
             };
 
-            if (selector === ':window') bindTargets.push(currentWin);
-            else if (selector === ':document') bindTargets.push(currentWin.document);
-            else if (selector === ':parentHost') applyRootOption(helperHostSet.$parentHost);
-            else if (selector === ':appHost') applyRootOption(helperHostSet.$appHost);
-            else if (selector === ':firstHost') applyRootOption(helperHostSet.$firstHost);
-            else if (selector === ':lastHost') applyRootOption(helperHostSet.$lastHost);
-            else if (selector === ':firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
-            else if (selector === ':lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
-            else if (selector === ':hosts') helperHostSet.$hosts.forEach(applyRootOption);
-            else if (selector === ':appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
-            else if (selector === ':host' || !selector) applyRootOption(this);
+            if (selector === '$window') bindTargets.push(currentWin);
+            else if (selector === '$document') bindTargets.push(currentWin.document);
+            else if (selector === '$host') applyRootOption(helperHostSet.$host);
+            else if (selector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
+            else if (selector === '$appHost') applyRootOption(helperHostSet.$appHost);
+            else if (selector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
+            else if (selector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
+            else if (selector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
+            else if (selector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
+            else if (selector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
+            else if (selector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
+            else if (selector === '$this' || !selector) applyRootOption(this);
             else {
               const searchRoots: (HTMLElement | ShadowRoot)[] = [];
               if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
@@ -533,15 +550,18 @@ export const elementDefine =
 
           if (originalConnected) await (originalConnected.apply(this));
 
-          const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+          const aMethods = getOnConnectedAfterMetadata(this).filter(it => {
+            return useSsr ? !it.options.ssrFirst : true;
+          });
+          // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
           if (aMethods) {
-            for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m, helperHostSet);
+            for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           }
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
           (this as any).__swc_connected = true;
 
-          // Trigger @changedAttributeHost with while: 'connected'
+          // Trigger @changedAttributeThis with while: 'connected'
           for (let [name, metaList] of Array.from(attrChangeMap)) {
             for (const meta of metaList) {
               if (meta.options.while === 'connected') {
@@ -553,6 +573,9 @@ export const elementDefine =
             }
           }
         } finally {
+          for (let mPropertyKey of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
+            await (this as any)._invokeLifecycleMethod(mPropertyKey, helperHostSet);
+          }
           if (appHost && typeof (appHost as any)._connectedDone === 'function') {
             await (appHost as any)._connectedDone(this);
           }
@@ -563,7 +586,7 @@ export const elementDefine =
       proto.disconnectedCallback = function () {
         // const helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
         // Remove from appHost LAST when disconnected
-        console.log('disconnnnnnnnnnnnnnnnnnn', helperHostSet, this)
+        // console.log('disconnnnnnnnnnnnnnnnnnn', helperHostSet, this)
         const appHost = helperHostSet.$appHost;
         if (appHost && typeof (appHost as any)._disconnected === 'function') {
           (appHost as any)._disconnected(this);

package/src/decorators/emitCustomEvent.ts

@@ -60,25 +60,27 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
 
         const eventTargets: EventTarget[] = [];
-        if (selectorOrTarget === ':window') eventTargets.push(currentWin);
-        else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
-        else if (selectorOrTarget === ':parentHost') {
+        if (selectorOrTarget === '$window') eventTargets.push(currentWin);
+        else if (selectorOrTarget === '$document') eventTargets.push(currentWin.document);
+        else if (selectorOrTarget === '$host') {
+          if (hostSet.$host) eventTargets.push(hostSet.$host);
+        } else if (selectorOrTarget === '$parentHost') {
           if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selectorOrTarget === ':appHost') {
+        } else if (selectorOrTarget === '$appHost') {
           if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selectorOrTarget === ':firstHost') {
+        } else if (selectorOrTarget === '$firstHost') {
           if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selectorOrTarget === ':lastHost') {
+        } else if (selectorOrTarget === '$lastHost') {
           if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selectorOrTarget === ':firstAppHost') {
+        } else if (selectorOrTarget === '$firstAppHost') {
           if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selectorOrTarget === ':lastAppHost') {
+        } else if (selectorOrTarget === '$lastAppHost') {
           if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selectorOrTarget === ':hosts') {
+        } else if (selectorOrTarget === '$hosts') {
           hostSet.$hosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === ':appHosts') {
+        } else if (selectorOrTarget === '$appHosts') {
           hostSet.$appHosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === ':host' || !selectorOrTarget) {
+        } else if (selectorOrTarget === '$this' || !selectorOrTarget) {
           eventTargets.push(this as any);
         } else {
           const r = fullOptions.root || 'auto';
@@ -121,27 +123,20 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 };
 
 /**
- * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
- * Usage: @emitCustomEventHost('navigate') // default attributeName: 'on-emit-navigate'
- * Usage: @emitCustomEventHost('navigate', { attributeName: 'on-navigate' })
- *
- * The attributeName option is used to automatically observe attributes for this event.
- * For example, { attributeName: 'on-navigate' } will add 'on-navigate' to observedAttributes.
+ * @emitCustomEventThis decorator - simplified version of @emitCustomEvent for $this selector
  */
-export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
-export function emitCustomEventHost(type: string, attributeName: string): MethodDecorator ;
-export function emitCustomEventHost(type: string): MethodDecorator;
-export function emitCustomEventHost(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
+export function emitCustomEventThis(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
+export function emitCustomEventThis(type: string, attributeName: string): MethodDecorator ;
+export function emitCustomEventThis(type: string): MethodDecorator;
+export function emitCustomEventThis(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
   if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'string') {
-    return emitCustomEventHost(type, {attributeName: optionsOrAttributeaName});
+    return emitCustomEventThis(type, {attributeName: optionsOrAttributeaName});
   } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'object') {
     if (!optionsOrAttributeaName.attributeName) {
       optionsOrAttributeaName.attributeName = `on-emit-${type}`;
     }
-    return emitCustomEvent(':host', type, optionsOrAttributeaName);
+    return emitCustomEvent('$this', type, optionsOrAttributeaName);
   } else {
-    return emitCustomEvent(':host', type, {attributeName: `on-emit-${type}`});
+    return emitCustomEvent('$this', type, {attributeName: `on-emit-${type}`});
   }
-
-
 }

package/src/decorators/index.ts

@@ -1,7 +1,7 @@
 export * from './addEventListener';
 export * from './attribute';
 export * from './elementDefine';
-export * from './changedAttributeHost';
+export * from './changedAttributeThis';
 export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';
@@ -14,3 +14,4 @@ export * from './setProperty';
 export * from './subscribeSwcAppRouteChangeWhileConnected';
 export * from './subscribeSwcAppMessageWhileConnected';
 export * from './publishSwcAppMessage';
+export * from './applySlot';