-
Notifications
You must be signed in to change notification settings - Fork 0
/
LitCounter.js
54 lines (47 loc) · 1.33 KB
/
LitCounter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { html, LitElement } from "https://esm.sh/lit@3.1.0";
/**
* A counter component implemented with Lit.
*
* @class LitCounter @extends LitElement
* @classdesc Counter with increment/decrement buttons written as a Lit custom element
* @property { object } properties - Holds the component's reactive properties
* @property { number } properties.count - Holds the current count value
* @module LitCounter
*/
export class LitCounter extends LitElement {
static #INITIAL_COUNT = 3;
static properties = { count: 0 };
constructor() {
super();
this.count = LitCounter.#INITIAL_COUNT;
}
// Turn off shadow DOM
createRenderRoot() {
return this;
}
increment = () => {
this.count = this.count + 1;
};
decrement = () => {
this.count = this.count - 1;
};
render() {
return html`
<div class="flex gap-8 py-6">
<button class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
@click=${this.decrement}>
-1
</button>
<p class="text-3xl">${this.count}</p>
<button class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
@click=${this.increment}>
+1
</button>
</div>
`;
}
}
customElements.define(
"lit-counter",
LitCounter,
);