[REQUEST]: create a additional interface element stealify

[lemanschik]

Is your feature request related to a problem? Please describe

the incrementala upgraded stealify integration parts need space to integrate interface elements

Describe the solution you'd like

Integrate a small Stealify Panel as Custom Element Definition that extends HTMLElement so that we can use it as section anywhere on the page.

a panel is less intrusive and displays nice on all devices and sizes as it can expand to full screen and shrink to button

Describe alternatives you've considered

No alternatives given

Additional context

create a button in html let it appear fixed centered on top above all other elements via css. directly applyed to the container element (customeElement)

<my-panel>

note all custom elements need to contain a - in the name this is a web wide convention that the browser uses the return value is always HTMLElement as a type thats why you drive your definitiin like

// Note sneakCase to replace the - char this is also a web wide Convention.
export class myPanel extends HTMLElement {
  connectedCallback() {
    // Your code goes here
    this.innerHTML = `<button`
  }
}

// Note you will not define your element here and not apply your definition here
// customElements.define('my-panel', myPanel);
// does not get put into the module it self you leave that open to the integrator.

the benefits are that you can assign it to different elements or even more then one element
this comes in handy later when we do version management and all other kinds of production
code management. and i know it sounds like overhead at the beginning but you will soon see why this is avoiding a lot of overhead.

import('./my-panel.js').then(({ myPanel}) => customElements.define('other-panel', myPanel));

this is how you can code reuseable customElements