/
my-element.ts
123 lines (110 loc) · 2.37 KB
/
my-element.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { html, css, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import viteLogo from '/vite.svg'
import litLogo from './assets/lit.svg'
/**
* An example element.
*
* @slot - This element has a slot
* @csspart button - The button
*/
@customElement('my-element')
export class MyElement extends LitElement {
/**
* Copy for the read the docs hint.
*/
@property()
docsHint = 'Click on the Vite and Lit logos to learn more'
/**
* The number of times the button has been clicked.
*/
@property({ type: Number })
count = 0
render() {
return html`
<div>
<a href="https://vitejs.dev" target="_blank"
><img src="${viteLogo}" class="logo" alt="Vite logo"
/></a>
<a href="https://lit.dev" target="_blank"
><img src=${litLogo} class="logo" alt="Lit logo"
/></a>
</div>
<slot></slot>
<div class="card">
<button @click=${this._onClick} part="button">
count is ${this.count}
</button>
</div>
<p class="read-the-docs">${this.docsHint}</p>
`
}
private _onClick() {
this.count++
}
static styles = css`
:host {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
`
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement
}
}