Building your own overlay

Getting Started

Lets take a look at the Slippi-HUD template structure.

import { html, css } from 'lit';
import { repeat } from 'lit/directives/repeat.js';

import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';

export const template = function () {

if (!this.ready)
return html``;

return html`
<Everything that makes up the overlay>
'

export const style = function () {

return css`

:host {
}


`;
}

To make this work with the overlay switching compatibility of the dashboard you will style script the webpage with the <style></style> tags in the return html instead of the return css LIT function.