49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
// @ts-check
|
|
import { WebComponent, html } from '../../src/index.js'
|
|
|
|
export class Counter extends WebComponent {
|
|
static props = {
|
|
count: 123,
|
|
}
|
|
get template() {
|
|
const list = ['a', 'b', 'c', 'what']
|
|
const links = [
|
|
{
|
|
url: 'https://ayco.io',
|
|
text: 'Ayo Ayco',
|
|
},
|
|
{
|
|
url: 'https://ayco.io/gh/McFly',
|
|
text: 'McFly',
|
|
},
|
|
]
|
|
|
|
return html`
|
|
<button
|
|
class="hey"
|
|
id="btn"
|
|
onClick=${() => ++this.props.count}
|
|
style="background-color: green; color: white;"
|
|
about="Elephant"
|
|
data-name="thing"
|
|
aria-name="thingz"
|
|
>
|
|
<span>${this.props.count}</span>
|
|
</button>
|
|
<form style="margin: 1em 0;">
|
|
<label data-my-name="Ayo" for="the-input">Name</label>
|
|
<input id="the-input" type="foo" value="Name:" />
|
|
</form>
|
|
${list.map((item) => html`<p>${item}</p>`)}
|
|
<h3 about="Elephant">Links</h3>
|
|
<ul>
|
|
${links.map(
|
|
(link) =>
|
|
html`<li><a href=${link.url} target="_blank">${link.text}</a></li>`
|
|
)}
|
|
</ul>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('my-counter', Counter)
|