const id = "takker-scheduler-dashboard"; export const makeDashboard = (): HTMLDivElement => { const div_ = document.getElementById(id); if (div_ instanceof HTMLDivElement) return div_; const div = document.createElement("div"); div.id = id; const shadowRoot = div.attachShadow({ mode: "open" }); shadowRoot.innerHTML = `<style> :host { position: fixed; top: 50px; left: 10px; z-index: 500; padding: 2px; border: solid 1px black; border-radius: 4px; background-color: var(--page-bg, #fefefe); color: var(--page-text-color, #4a4a4a); font: "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif; font-size: 1em; display: flex; } #reload { background: unset; color: unset; border: unset; cursor: pointer; } </style> <button id="reload" title="reload">🔄</button><div id="container"></div>`; document.body.append(div); return div; };