55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import { WebComponent } from "../../src/index.js";
|
|
import {
|
|
html,
|
|
render as lit,
|
|
} from "https://unpkg.com/lit-html@3.1.0/lit-html.js";
|
|
|
|
export class LitCounter 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"
|
|
@click=${() => ++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>
|
|
`;
|
|
}
|
|
render() {
|
|
lit(this.template, this);
|
|
}
|
|
}
|
|
|
|
customElements.define("lit-counter", LitCounter);
|