@dooboostore/simple-web-component 1.0.13 → 1.0.14

package/src/elements/apps/SwcAppHeading.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-h1', extends: 'h1' })
 export class SwcAppHeading extends SwcHTMLHeadingElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppHeading extends SwcHTMLHeadingElementBase implements SwcAppIn
       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 SwcAppHeading extends SwcHTMLHeadingElementBase implements SwcAppIn
 
           // 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 SwcAppHeading extends SwcHTMLHeadingElementBase implements SwcAppIn
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppHeading extends SwcHTMLHeadingElementBase implements SwcAppIn
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppHr.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-hr', extends: 'hr' })
 export class SwcAppHr extends SwcHTMLHRElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppHr extends SwcHTMLHRElementBase 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 SwcAppHr extends SwcHTMLHRElementBase 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 SwcAppHr extends SwcHTMLHRElementBase 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 SwcAppHr extends SwcHTMLHRElementBase 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/SwcAppIFrame.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-iframe', extends: 'iframe' })
 export class SwcAppIFrame extends SwcHTMLIFrameElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppIFrame extends SwcHTMLIFrameElementBase 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 SwcAppIFrame extends SwcHTMLIFrameElementBase 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 SwcAppIFrame extends SwcHTMLIFrameElementBase 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 SwcAppIFrame extends SwcHTMLIFrameElementBase 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/SwcAppImage.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-img', extends: 'img' })
 export class SwcAppImage extends SwcHTMLImageElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppImage extends SwcHTMLImageElementBase 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 SwcAppImage extends SwcHTMLImageElementBase 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 SwcAppImage extends SwcHTMLImageElementBase 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 SwcAppImage extends SwcHTMLImageElementBase 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/SwcAppInput.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-input', extends: 'input' })
 export class SwcAppInput extends SwcHTMLInputElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppInput extends SwcHTMLInputElementBase 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 SwcAppInput extends SwcHTMLInputElementBase 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 SwcAppInput extends SwcHTMLInputElementBase 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 SwcAppInput extends SwcHTMLInputElementBase 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/SwcAppLabel.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-label', extends: 'label' })
 export class SwcAppLabel extends SwcHTMLLabelElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLabel extends SwcHTMLLabelElementBase 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 SwcAppLabel extends SwcHTMLLabelElementBase 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 SwcAppLabel extends SwcHTMLLabelElementBase 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 SwcAppLabel extends SwcHTMLLabelElementBase 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/SwcAppLegend.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-legend', extends: 'legend' })
 export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLegend extends SwcHTMLLegendElementBase 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 SwcAppLegend extends SwcHTMLLegendElementBase 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 SwcAppLegend extends SwcHTMLLegendElementBase 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 SwcAppLegend extends SwcHTMLLegendElementBase 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/SwcAppLi.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-li', extends: 'li' })
 export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLi extends SwcHTMLLIElementBase 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 SwcAppLi extends SwcHTMLLIElementBase 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 SwcAppLi extends SwcHTMLLIElementBase 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 SwcAppLi extends SwcHTMLLIElementBase 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/SwcAppLink.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-link', extends: 'link' })
 export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLink extends SwcHTMLLinkElementBase 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 SwcAppLink extends SwcHTMLLinkElementBase 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 SwcAppLink extends SwcHTMLLinkElementBase 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 SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {