created main shadow element to store main app

This commit is contained in:
Fran Jurmanović
2021-05-30 14:40:43 +02:00
parent 9467101533
commit d7cfb58981
4 changed files with 29 additions and 2 deletions

View File

@@ -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` <app-main></app-main> `;
}
update() {
render(this.render(), this.shadowRoot!);
}
}

View File

@@ -1,3 +1,4 @@
export * from "./app-shadow/AppShadowElement";
export * from "./app-main/AppMainElement"; export * from "./app-main/AppMainElement";
export * from "./app-link/AppLinkElement"; export * from "./app-link/AppLinkElement";
export * from "./input-field/InputFieldElement"; export * from "./input-field/InputFieldElement";

View File

@@ -7,7 +7,7 @@ class RouterService {
private domEvents: any = { private domEvents: any = {
routechanged: new Event("routechanged"), routechanged: new Event("routechanged"),
}; };
constructor(private mainRoot: Element) {} constructor(private mainRoot: ShadowRoot | HTMLElement) {}
get routerState() { get routerState() {
const historyLen = this.historyStack?.length; const historyLen = this.historyStack?.length;

View File

@@ -7,6 +7,6 @@
<title>Wallet Web</title> <title>Wallet Web</title>
</head> </head>
<body> <body>
<app-main></app-main> <app-shadow></app-shadow>
</body> </body>
</html> </html>