From 83f30ae2c46d8d9328c1483e7a8b77b15c097a01 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Thu, 21 Dec 2023 12:59:25 +0100 Subject: [PATCH] feat: add lit-html usage example (#35) --- examples/templating/index.html | 7 ++++- examples/templating/with-lit.js | 55 +++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 examples/templating/with-lit.js diff --git a/examples/templating/index.html b/examples/templating/index.html index 6aeeac2..fb8ac4c 100644 --- a/examples/templating/index.html +++ b/examples/templating/index.html @@ -1,12 +1,17 @@ - + WC demo + +

With our html

+
+

With lit-html

+ diff --git a/examples/templating/with-lit.js b/examples/templating/with-lit.js new file mode 100644 index 0000000..fa568a0 --- /dev/null +++ b/examples/templating/with-lit.js @@ -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` + +
+ + +
+ ${list.map((item) => html`

${item}

`)} +

Links

+ + `; + } + render() { + lit(this.template, this); + } +} + +customElements.define("lit-counter", LitCounter);