30 lines
607 B
TypeScript
30 lines
607 B
TypeScript
|
import { LitElement, html, css } from "lit";
|
||
|
import { customElement, property } from "lit/decorators.js";
|
||
|
|
||
|
@customElement("hsl-calculator")
|
||
|
export class HslCalculator extends LitElement {
|
||
|
static styles = css`
|
||
|
:host {
|
||
|
display: block;
|
||
|
border: 1px solid gray;
|
||
|
padding: 16px;
|
||
|
max-width: 800px;
|
||
|
}
|
||
|
`;
|
||
|
|
||
|
@property()
|
||
|
name = "World";
|
||
|
|
||
|
render() {
|
||
|
return html`
|
||
|
<h1>Hello, ${this.name}!</h1>
|
||
|
`;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
declare global {
|
||
|
interface HTMLElementTagNameMap {
|
||
|
"hsl-calculator": HslCalculator;
|
||
|
}
|
||
|
}
|