diff --git a/src/components/app-shadow/AppShadowElement.ts b/src/components/app-shadow/AppShadowElement.ts
new file mode 100644
index 0000000..f1c2fa5
--- /dev/null
+++ b/src/components/app-shadow/AppShadowElement.ts
@@ -0,0 +1,26 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services/";
+import { AppService, HttpClient, RouterService } from "core/services";
+import { AuthStore } from "core/store";
+
+@controller
+class AppShadowElement extends HTMLElement {
+ constructor() {
+ super();
+ }
+
+ @update
+ connectedCallback() {
+ this.attachShadow({ mode: "open" });
+ }
+
+ render() {
+ return html` `;
+ }
+
+ update() {
+ render(this.render(), this.shadowRoot!);
+ }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index c4c598e..a6e5dda 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from "./app-shadow/AppShadowElement";
export * from "./app-main/AppMainElement";
export * from "./app-link/AppLinkElement";
export * from "./input-field/InputFieldElement";
diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts
index 569973c..98503ca 100644
--- a/src/core/services/router-service/RouterService.ts
+++ b/src/core/services/router-service/RouterService.ts
@@ -7,7 +7,7 @@ class RouterService {
private domEvents: any = {
routechanged: new Event("routechanged"),
};
- constructor(private mainRoot: Element) {}
+ constructor(private mainRoot: ShadowRoot | HTMLElement) {}
get routerState() {
const historyLen = this.historyStack?.length;
diff --git a/src/index.html b/src/index.html
index b16b4a9..8cda3af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,6 @@
Wallet Web
-
+