ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add lit-html usage example (#35)

Browse source
This commit is contained in:
Ayo Ayco 2023-12-21 12:59:25 +01:00 committed by GitHub
parent 9c41f2e29a
commit 83f30ae2c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/templating/index.html
View file

@ -1,12 +1,17 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title> <title>WC demo</title>
<script type="module" src="./index.js"></script> <script type="module" src="./index.js"></script>
<script type="module" src="./with-lit.js"></script>
</head> </head>
<body> <body>
<h2>With our html</h2>
<my-counter></my-counter> <my-counter></my-counter>
<hr />
<h2>With lit-html</h2>
<lit-counter></lit-counter>
</body> </body>
</html> </html>

55
examples/templating/with-lit.js Normal file
View file

@ -0,0 +1,55 @@
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);