</head>
<script type="module">
-import { LitElement, html } from "https://cdn.pika.dev/lit-element";
+import { LitElement, html, css } from "https://cdn.pika.dev/lit-element";
class HelloWorld extends LitElement {
render() {
}
}
+class ClickCounter extends LitElement {
+ static get properties() {
+ return { value: { type: Number } };
+ }
+
+ static get styles() {
+ return css`
+ button { color: red; font-size: 150%; };
+ `;
+ }
+
+ constructor() {
+ super();
+ this.value = 0;
+ }
+
+ render() {
+ return html`<button type="button" @click="${ e => { this.value += 1 } }">${ this.value }</button>`;
+ }
+}
+
customElements.define('hello-world', HelloWorld);
+customElements.define('click-counter', ClickCounter);
</script>
<body>
<h1>lit-html CDN examples</h1>
<h3>Hello World</h3>
-<hello-world />
+<hello-world></hello-world>
+
+<h3>Stateful and with shadow DOM styling</h3>
+<p>Click counter: <click-counter></click-counter> and one with a non-default
+attribute: <click-counter value="10"></click-counter></p>
</body>
projects / webcomponents.git / commitdiff