diff options
Diffstat (limited to '')
-rw-r--r-- | static/components/tab-element.ts | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/static/components/tab-element.ts b/static/components/tab-element.ts new file mode 100644 index 00000000..9403a737 --- /dev/null +++ b/static/components/tab-element.ts @@ -0,0 +1,40 @@ +export { TabElement } + +/* <tab-element /> */ +class TabElement extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + // this.replaceChildren(template.cloneNode(true)); + let template + = (document.getElementById('tab-template') as HTMLTemplateElement) + .content + // const shadowRoot = this.attachShadow({ mode: 'open' }) + // .appendChild(template.cloneNode(true)); + // console.log(this); + let label = this.querySelector('[slot="label"]') + let content = this.querySelector('[slot="content"]') + if (!verifySlot(label)) throw "Bad label"; + if (!verifySlot(content)) throw "Bad content"; + + /* TODO set label hover title somewhere around here */ + + this.replaceChildren(template.cloneNode(true)); + this.querySelector('slot[name="label"]')!.replaceWith(label); + this.querySelector('slot[name="content"]')!.replaceWith(content); + } +} + +function verifySlot(el: Node | null): el is HTMLElement { + if (el === null) { + console.error("Element is null"); + return false; + } + if (!(el instanceof HTMLElement)) { + console.error("Node is not an HTMLElement", el); + return false; + } + return true +} |