forked from vitest-dev/vitest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
my-button.ts
56 lines (49 loc) · 1022 Bytes
/
my-button.ts
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
55
56
import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
/**
* An example button.
*
* @slot - This button has a slot
*/
@customElement('my-button')
export class MyButton extends LitElement {
static styles = css`
:host {
display: block;
border: solid 1px gray;
padding: 16px;
max-width: 800px;
}
`
/**
* The name to say "Hello" to.
*/
@property()
name = 'World'
/**
* The number of times the button has been clicked.
*/
@property({ type: Number })
count = 1
render() {
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick} role="button">
Click Count: ${this.count}
</button>
<slot></slot>
`
}
private _onClick() {
this.count++
this.dispatchEvent(new CustomEvent('count', { detail: this.count }))
}
foo(): string {
return 'foo'
}
}
declare global {
interface HTMLElementTagNameMap {
'my-button': MyButton
}
}