@dooboostore/simple-web-component 1.0.13 → 1.0.14

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

package/src/elements/apps/SwcAppDetails.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-details', extends: 'details' })
 export class SwcAppDetails extends SwcHTMLDetailsElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppDetails extends SwcHTMLDetailsElementBase 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 SwcAppDetails extends SwcHTMLDetailsElementBase 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 SwcAppDetails extends SwcHTMLDetailsElementBase 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 SwcAppDetails extends SwcHTMLDetailsElementBase 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/SwcAppDialog.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-dialog', extends: 'dialog' })
 export class SwcAppDialog extends SwcHTMLDialogElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppDialog extends SwcHTMLDialogElementBase 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 SwcAppDialog extends SwcHTMLDialogElementBase 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 SwcAppDialog extends SwcHTMLDialogElementBase 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 SwcAppDialog extends SwcHTMLDialogElementBase 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/SwcAppDiv.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-div', extends: 'div' })
 export class SwcAppDiv extends SwcHTMLDivElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppDiv extends SwcHTMLDivElementBase 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 SwcAppDiv extends SwcHTMLDivElementBase 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 SwcAppDiv extends SwcHTMLDivElementBase 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 SwcAppDiv extends SwcHTMLDivElementBase 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/SwcAppDl.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-dl', extends: 'dl' })
 export class SwcAppDl extends SwcHTMLDListElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppDl extends SwcHTMLDListElementBase 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 SwcAppDl extends SwcHTMLDListElementBase 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 SwcAppDl extends SwcHTMLDListElementBase 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 SwcAppDl extends SwcHTMLDListElementBase 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/SwcAppEmbed.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-embed', extends: 'embed' })
 export class SwcAppEmbed extends SwcHTMLEmbedElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppEmbed extends SwcHTMLEmbedElementBase 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 SwcAppEmbed extends SwcHTMLEmbedElementBase 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 SwcAppEmbed extends SwcHTMLEmbedElementBase 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 SwcAppEmbed extends SwcHTMLEmbedElementBase 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/SwcAppFieldSet.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-fieldset', extends: 'fieldset' })
 export class SwcAppFieldSet extends SwcHTMLFieldSetElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppFieldSet extends SwcHTMLFieldSetElementBase implements SwcApp
       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 SwcAppFieldSet extends SwcHTMLFieldSetElementBase implements SwcApp
 
           // 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 SwcAppFieldSet extends SwcHTMLFieldSetElementBase implements SwcApp
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppFieldSet extends SwcHTMLFieldSetElementBase implements SwcApp
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppForm.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-form', extends: 'form' })
 export class SwcAppForm extends SwcHTMLFormElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppForm extends SwcHTMLFormElementBase 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 SwcAppForm extends SwcHTMLFormElementBase 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 SwcAppForm extends SwcHTMLFormElementBase 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 SwcAppForm extends SwcHTMLFormElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {