@dooboostore/simple-web-component 1.0.13 → 1.0.14

package/dist/umd-bundle/dooboostore-simple-web-component.umd.js

@@ -1990,15 +1990,16 @@ var dooboostoreSimpleWebComponent = (() => {
   };
   var InjectMetadataKey = Symbol("Inject");
   var getInject = (target, propertyKey) => {
-    if (target != null && target !== void 0 && typeof target === "object") {
-      target = Object.getPrototypeOf(target).constructor;
-    }
-    if (propertyKey) {
-      const parameters = Reflect.getOwnMetadata(InjectMetadataKey, target, propertyKey);
-      return parameters;
-    } else {
-      return ReflectUtils.getMetadata(InjectMetadataKey, target) ?? [];
+    if (target == null) return [];
+    let searchTarget = typeof target === "object" ? target.constructor : target;
+    while (searchTarget && searchTarget !== Object) {
+      const data = propertyKey ? Reflect.getOwnMetadata(InjectMetadataKey, searchTarget, propertyKey) : ReflectUtils.getMetadata(InjectMetadataKey, searchTarget);
+      if (data) return data;
+      const proto = Object.getPrototypeOf(searchTarget);
+      searchTarget = proto && typeof proto === "function" ? proto : proto?.constructor || null;
+      if (searchTarget === target) break;
     }
+    return propertyKey ? [] : [];
   };
 
   // src/elements/SwcInterfaces.ts
@@ -10797,7 +10798,6 @@ var dooboostoreSimpleWebComponent = (() => {
       });
     }
     async executeBindParameterSimPromise({ target, targetKey, firstCheckMaker, parameterCount, inputParameters }, otherStorage) {
-      console.log("--vvvaaaaaaaaaaaa");
       const binds = this.getParameterSim({ target, targetKey, firstCheckMaker, otherStorage, parameterCount, inputParameters });
       if (typeof target === "object" && targetKey) {
         const targetMethod = target[targetKey];
@@ -12580,6 +12580,155 @@ var dooboostoreSimpleWebComponent = (() => {
     }
   };
 
+  // src/router/ElementRouter.ts
+  var ElementRouter = class extends Router {
+    constructor(config) {
+      const { firstUrl, ...rest } = config;
+      super(rest);
+      this._history = [];
+      this._currentIndex = -1;
+      const startUrl = firstUrl ?? "/";
+      this._history = [{ url: startUrl, data: null }];
+      this._currentIndex = 0;
+      if (firstUrl) {
+        this.replace(firstUrl, { config: { noEventAndPublish: true } });
+      }
+    }
+    // Override pushState to manage internal history
+    pushState(data, title, path, config) {
+      const behaviorSubject = this.behaviorSubject;
+      if (!config?.noEventAndPublish && behaviorSubject) {
+        behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: "start" });
+      }
+      if (!this._history) this._history = [];
+      this._history = this._history.slice(0, this._currentIndex + 1);
+      this._history.push({ url: path, data, title });
+      this._currentIndex++;
+      if (!config?.noEventAndPublish && behaviorSubject) {
+        behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: "end" });
+      }
+      return { data };
+    }
+    // Override replaceState to manage internal history
+    replaceState(data, title, path, config) {
+      const behaviorSubject = this.behaviorSubject;
+      if (!config?.noEventAndPublish && behaviorSubject) {
+        behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: "start" });
+      }
+      if (!this._history) this._history = [];
+      if (this._currentIndex === -1) {
+        this._history.push({ url: path, data, title });
+        this._currentIndex = 0;
+      } else {
+        this._history[this._currentIndex] = { url: path, data, title };
+      }
+      if (!config?.noEventAndPublish && behaviorSubject) {
+        behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: "end" });
+      }
+      return { data };
+    }
+    push(path, state2) {
+      this.pushState(state2?.data, state2?.title, this.toUrl(path), state2?.config);
+    }
+    replace(path, state2) {
+      this.replaceState(state2?.data, state2?.title, this.toUrl(path), state2?.config);
+    }
+    back(config) {
+      if (this._currentIndex > 0) {
+        this.go(-1, config);
+      }
+    }
+    forward(config) {
+      if (this._currentIndex < this._history.length - 1) {
+        this.go(1, config);
+      }
+    }
+    go(config, changeStateConfig) {
+      if (typeof config === "number") {
+        const targetIndex = this._currentIndex + config;
+        if (this._history && targetIndex >= 0 && targetIndex < this._history.length) {
+          const behaviorSubject = this.behaviorSubject;
+          if (!changeStateConfig?.noEventAndPublish && behaviorSubject) {
+            behaviorSubject.next({ ...this.getRouteData(), triggerPoint: "start" });
+          }
+          this._currentIndex = targetIndex;
+          const entry = this._history[this._currentIndex];
+          if (!changeStateConfig?.noEventAndPublish && behaviorSubject) {
+            behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: entry.url }), triggerPoint: "end" });
+          }
+        }
+        return;
+      }
+      return super.go(config, changeStateConfig);
+    }
+    getData() {
+      return this._history?.[this._currentIndex]?.data;
+    }
+    getUrl() {
+      return this._history?.[this._currentIndex]?.url ?? this.config?.firstUrl ?? "/";
+    }
+    getHref() {
+      return this.getUrl();
+    }
+    getPathName() {
+      return this.getUrl().split("?")[0];
+    }
+    getSearch() {
+      const parts = this.getUrl().split("?");
+      return parts[1] ? `?${parts[1]}` : "";
+    }
+    getSearchParams(data) {
+      const search = this.getSearch();
+      const searchParams = new URLSearchParams(search);
+      return UrlUtils.manipulateSearchParams(searchParams, data);
+    }
+    getHashSearchParams(data) {
+      const url = this.getUrl();
+      const hashIdx = url.indexOf("#");
+      const hash = hashIdx !== -1 ? url.slice(hashIdx + 1) : "";
+      const searchParams = new URLSearchParams(hash);
+      return UrlUtils.manipulateSearchParams(searchParams, data);
+    }
+    pushAddSearchParam(params, state2) {
+      const s = this.getSearchParams({ append: params });
+      this.push({ searchParams: s }, state2);
+    }
+    pushDeleteHashSearchParam(name, state2) {
+      const s = this.getHashSearchParams({ delete: Array.isArray(name) ? name : [name] });
+      const url = this.getUrl().split("#")[0];
+      const size = Array.from(s.entries()).length;
+      this.push(url + (size > 0 ? "#" + s.toString() : ""), state2);
+    }
+    pushDeleteSearchParam(name, state2) {
+      const s = this.getSearchParams({ delete: Array.isArray(name) ? name : [name] });
+      this.push({ searchParams: s }, state2);
+    }
+    pushUpsertSearchParam(params, state2) {
+      const s = this.getSearchParams();
+      UrlUtils.upsertSearchParam(s, params);
+      this.push({ searchParams: s }, state2);
+    }
+    replaceAddSearchParam(params, state2) {
+      const s = this.getSearchParams({ append: params });
+      this.replace({ searchParams: s }, state2);
+    }
+    replaceDeleteHashSearchParam(name, state2) {
+      const s = this.getHashSearchParams({ delete: Array.isArray(name) ? name : [name] });
+      const url = this.getUrl().split("#")[0];
+      const size = Array.from(s.entries()).length;
+      this.replace(url + (size > 0 ? "#" + s.toString() : ""), state2);
+    }
+    replaceDeleteSearchParam(name, state2) {
+      const s = this.getSearchParams({ delete: Array.isArray(name) ? name : [name] });
+      this.replace({ searchParams: s }, state2);
+    }
+    replaceUpsertSearchParam(params, state2) {
+      const s = this.getSearchParamObject();
+      UrlUtils.upsertSearchParam(s, params);
+      this.replace({ searchParams: s }, state2);
+    }
+  };
+
   // src/elements/apps/SwcApp.ts
   var __decorate = function(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -12605,12 +12754,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -12621,8 +12776,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -12634,7 +12789,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -12646,7 +12801,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -12682,12 +12837,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -12698,8 +12859,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -12711,7 +12872,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -12723,7 +12884,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -12759,12 +12920,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -12775,8 +12942,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -12788,7 +12955,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -12800,7 +12967,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -12836,12 +13003,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -12852,8 +13025,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -12865,7 +13038,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -12877,7 +13050,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -12913,12 +13086,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -12929,8 +13108,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -12942,7 +13121,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -12954,7 +13133,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -12990,12 +13169,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13006,8 +13191,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13019,7 +13204,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13031,7 +13216,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13067,12 +13252,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13083,8 +13274,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13096,7 +13287,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13108,7 +13299,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13144,12 +13335,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13160,8 +13357,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13173,7 +13370,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13185,7 +13382,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13221,12 +13418,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13237,8 +13440,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13250,7 +13453,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13262,7 +13465,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13298,12 +13501,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13314,8 +13523,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13327,7 +13536,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13339,7 +13548,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13375,12 +13584,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13391,8 +13606,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13404,7 +13619,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13416,7 +13631,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13452,12 +13667,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13468,8 +13689,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13481,7 +13702,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13493,7 +13714,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13529,12 +13750,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13545,8 +13772,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13558,7 +13785,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13570,7 +13797,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13606,12 +13833,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13622,8 +13855,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13635,7 +13868,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13647,7 +13880,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13683,12 +13916,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13699,8 +13938,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13712,7 +13951,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13724,7 +13963,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13760,12 +13999,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13776,8 +14021,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13789,7 +14034,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13801,7 +14046,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13837,12 +14082,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13853,8 +14104,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13866,7 +14117,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13878,7 +14129,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13914,12 +14165,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -13930,8 +14187,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -13943,7 +14200,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -13955,7 +14212,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -13991,12 +14248,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14007,8 +14270,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14020,7 +14283,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14032,7 +14295,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14068,12 +14331,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14084,8 +14353,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14097,7 +14366,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14109,7 +14378,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14145,12 +14414,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14161,8 +14436,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14174,7 +14449,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14186,7 +14461,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14222,12 +14497,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14238,8 +14519,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14251,7 +14532,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14263,7 +14544,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14299,12 +14580,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14315,8 +14602,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14328,7 +14615,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14340,7 +14627,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14376,12 +14663,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14392,8 +14685,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14405,7 +14698,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14417,7 +14710,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14453,12 +14746,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14469,8 +14768,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14482,7 +14781,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14494,7 +14793,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14530,12 +14829,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14546,8 +14851,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14559,7 +14864,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14571,7 +14876,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14607,12 +14912,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14623,8 +14934,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14636,7 +14947,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14648,7 +14959,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14684,12 +14995,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14700,8 +15017,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14713,7 +15030,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14725,7 +15042,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14761,12 +15078,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14777,8 +15100,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14790,7 +15113,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14802,7 +15125,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14838,12 +15161,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14854,8 +15183,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14867,7 +15196,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14879,7 +15208,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14915,12 +15244,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -14931,8 +15266,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -14944,7 +15279,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -14956,7 +15291,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -14992,12 +15327,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15008,8 +15349,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15021,7 +15362,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15033,7 +15374,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15069,12 +15410,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15085,8 +15432,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15098,7 +15445,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15110,7 +15457,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15146,12 +15493,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15162,8 +15515,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15175,7 +15528,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15187,7 +15540,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15223,12 +15576,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15239,8 +15598,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15252,7 +15611,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15264,7 +15623,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15300,12 +15659,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15316,8 +15681,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15329,7 +15694,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15341,7 +15706,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15377,12 +15742,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15393,8 +15764,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15406,7 +15777,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15418,7 +15789,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15454,12 +15825,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15470,8 +15847,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15483,7 +15860,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15495,7 +15872,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15531,12 +15908,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15547,8 +15930,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15560,7 +15943,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15572,7 +15955,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15608,12 +15991,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15624,8 +16013,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15637,7 +16026,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15649,7 +16038,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15685,12 +16074,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15701,8 +16096,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15714,7 +16109,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15726,7 +16121,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15762,12 +16157,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15778,8 +16179,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15791,7 +16192,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15803,7 +16204,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15839,12 +16240,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15855,8 +16262,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15868,7 +16275,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15880,7 +16287,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15916,12 +16323,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -15932,8 +16345,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -15945,7 +16358,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -15957,7 +16370,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -15993,12 +16406,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16009,8 +16428,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16022,7 +16441,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16034,7 +16453,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16070,12 +16489,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16086,8 +16511,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16099,7 +16524,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16111,7 +16536,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16147,12 +16572,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16163,8 +16594,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16176,7 +16607,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16188,7 +16619,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16224,12 +16655,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16240,8 +16677,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16253,7 +16690,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16265,7 +16702,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16301,12 +16738,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16317,8 +16760,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16330,7 +16773,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16342,7 +16785,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16378,12 +16821,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16394,8 +16843,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16407,7 +16856,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16419,7 +16868,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16455,12 +16904,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16471,8 +16926,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16484,7 +16939,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16496,7 +16951,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16532,12 +16987,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16548,8 +17009,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16561,7 +17022,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16573,7 +17034,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16609,12 +17070,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16625,8 +17092,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16638,7 +17105,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16650,7 +17117,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16686,12 +17153,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16702,8 +17175,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16715,7 +17188,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16727,7 +17200,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16763,12 +17236,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16779,8 +17258,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16792,7 +17271,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16804,7 +17283,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16840,12 +17319,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16856,8 +17341,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16869,7 +17354,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16881,7 +17366,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16917,12 +17402,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -16933,8 +17424,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -16946,7 +17437,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -16958,7 +17449,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);
@@ -16994,12 +17485,18 @@ var dooboostoreSimpleWebComponent = (() => {
           const userConfig = new Function(`return ${applicationConfigStr}`).apply(this);
           if (userConfig) {
             const _config = {
-              routeType: "path",
+              routeType: "element",
               window,
               ...userConfig
             };
-            this._router = _config.routeType === "path" ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-            this.routerSubscription = this._router.observable.subscribe((route) => {
+            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) => {
               if (route.triggerPoint === "end") {
                 this.routingProcess(route.path);
               }
@@ -17010,8 +17507,8 @@ var dooboostoreSimpleWebComponent = (() => {
             });
             this.simpleApplication = new SimpleApplication(option);
             const otherInstanceSim = /* @__PURE__ */ new Map();
-            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);
@@ -17023,7 +17520,7 @@ var dooboostoreSimpleWebComponent = (() => {
               }
             }
             if (_config.path) {
-              await this._router?.go(_config.path);
+              await this.router?.go(_config.path);
             }
           }
         } catch (e) {
@@ -17035,7 +17532,7 @@ var dooboostoreSimpleWebComponent = (() => {
       this.routerSubscription?.unsubscribe();
     }
     async routing(path) {
-      await this._router?.go(path);
+      await this.router?.go(path);
     }
     async routingProcess(path) {
       await this.simpleApplication?.routing(path);