use custom elements for application layout

This commit is contained in:
Fran Jurmanović
2021-05-31 14:23:13 +02:00
parent e1ab0e51d6
commit e065efc499
9 changed files with 110 additions and 15 deletions

View File

@@ -1,15 +1,15 @@
import { target } from "@github/catalyst";
class BaseLayoutElement extends HTMLElement {
@target slotted: HTMLElement;
@target appSlot: HTMLElement;
public isLayout: boolean = true;
public _slotted: string;
public _appSlot: string;
constructor() {
super();
}
get slotTag() {
return this.slotted?.firstElementChild?.tagName;
return this.appSlot?.firstElementChild?.tagName;
}
compareTags = (tag: string | HTMLElement): boolean => {
@@ -20,9 +20,9 @@ class BaseLayoutElement extends HTMLElement {
};
setElement = (newTag: string) => {
const _slotted = `<${newTag}></${newTag}>`;
this._slotted = _slotted;
this.slotted.innerHTML = _slotted;
const _appSlot = `<${newTag}></${newTag}>`;
this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot;
};
}