@dooboostore/simple-web-component 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -81,8 +81,8 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-web": "1.0.9",
     "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/core-web": "1.0.9",
     "@dooboostore/simple-boot": "1.0.53"
   },
   "scripts": {

package/src/decorators/elementDefine.ts

@@ -583,6 +583,7 @@ export const elementDefine =
       }
 
       async connectedCallback() {
+        // await new Promise(resolve => setTimeout(resolve, 0));
         const hostSet = SwcUtils.getHostSet(this as any);
         this._executeSwcScript('swc-on-before-connected', hostSet);
         const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_CONNECTED_METADATA_KEY);

package/src/elements/SwcInterfaces.ts

@@ -1,5 +1,7 @@
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { ConstructorType, Optional } from '@dooboostore/core/types';
+import { Router } from '@dooboostore/core-web/routers/Router';
+
 export enum InjectSituationType {
   HOST_SET = 'SIMPLE_WEB_COMPONENT://HOSTSET',
   APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',
@@ -9,8 +11,9 @@ export enum InjectSituationType {
   FIRST_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTHOST',
   LAST_HOST = 'SIMPLE_WEB_COMPONENT://LASTHOST',
   FIRST_APP_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTAPPHOST',
-  LAST_APP_HOST = 'SIMPLE_WEB_COMPONENT://LASTAPPHOST',
+  LAST_APP_HOST = 'SIMPLE_WEB_COMPONENT://LASTAPPHOST'
 }
+
 export type HostSet = {
   $host: SwcHTMLElementInterface | null;
   $hosts: SwcHTMLElementInterface[];
@@ -36,7 +39,7 @@ export interface SwcHTMLElementInterface extends HTMLElement {
 
 export type SwcConfigType = {
   rootRouter: ConstructorType<any>;
-  routeType: 'path' | 'hash';
+  routeType: 'path' | 'hash' | 'element';
   path?: string;
   window: Window;
 };
@@ -45,5 +48,6 @@ export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'wind
 
 export interface SwcAppInterface extends SwcHTMLElementInterface {
   simpleApplication?: SimpleApplication;
+  router?: Router;
   routing(path: string): Promise<void>;
 }

package/src/elements/apps/SwcApp.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app', extends: undefined })
 export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppAnchor.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-a', extends: 'a' })
 export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInte
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInte
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInte
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInte
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppArea.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-area', extends: 'area' })
 export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterfac
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppAudio.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-audio', extends: 'audio' })
 export class SwcAppAudio extends SwcHTMLAudioElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppAudio extends SwcHTMLAudioElementBase implements SwcAppInterf
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppAudio extends SwcHTMLAudioElementBase implements SwcAppInterf
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppAudio extends SwcHTMLAudioElementBase implements SwcAppInterf
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppAudio extends SwcHTMLAudioElementBase implements SwcAppInterf
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppBase.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-base', extends: 'base' })
 export class SwcAppBase extends SwcHTMLBaseElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppBase extends SwcHTMLBaseElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppBase extends SwcHTMLBaseElementBase implements SwcAppInterfac
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppBase extends SwcHTMLBaseElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppBase extends SwcHTMLBaseElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppBody.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-body', extends: 'body' })
 export class SwcAppBody extends SwcHTMLBodyElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppBody extends SwcHTMLBodyElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppBody extends SwcHTMLBodyElementBase implements SwcAppInterfac
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppBody extends SwcHTMLBodyElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppBody extends SwcHTMLBodyElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppButton.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-button', extends: 'button' })
 export class SwcAppButton extends SwcHTMLButtonElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppButton extends SwcHTMLButtonElementBase implements SwcAppInte
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppButton extends SwcHTMLButtonElementBase implements SwcAppInte
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppButton extends SwcHTMLButtonElementBase implements SwcAppInte
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppButton extends SwcHTMLButtonElementBase implements SwcAppInte
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppCanvas.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-canvas', extends: 'canvas' })
 export class SwcAppCanvas extends SwcHTMLCanvasElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppCanvas extends SwcHTMLCanvasElementBase implements SwcAppInte
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppCanvas extends SwcHTMLCanvasElementBase implements SwcAppInte
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppCanvas extends SwcHTMLCanvasElementBase implements SwcAppInte
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppCanvas extends SwcHTMLCanvasElementBase implements SwcAppInte
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {