Add PatternFly Elements CDN demo
[webcomponents.git] / cdn.html
1 <head>
2     <title>lit-html CDN example</title>
3     <meta charset="utf-8">
4 </head>
5
6 <script type="module">
7 import { LitElement, html, css } from "https://cdn.pika.dev/lit-element";
8
9 class HelloWorld extends LitElement {
10   render() {
11     return html`<p>Hello world! Came here from ${document.referrer}</p>`;
12   }
13 }
14
15 class ClickCounter extends LitElement {
16   static get properties() {
17     return { value: { type: Number } };
18   }
19
20   static get styles() {
21     return css`
22       button { color: red; font-size: 150%; };
23     `;
24   }
25
26   constructor() {
27      super();
28      this.value = 0;
29   }
30
31   render() {
32     return html`<button type="button" @click="${ e => { this.value += 1 } }">${ this.value }</button>`;
33   }
34 }
35
36 customElements.define('hello-world', HelloWorld);
37 customElements.define('click-counter', ClickCounter);
38 </script>
39
40 <body>
41
42 <h1>lit-html CDN examples</h1>
43
44 <h3>Hello World</h3>
45 <hello-world></hello-world>
46
47 <h3>Stateful and with shadow DOM styling</h3>
48 <p>Click counter: <click-counter></click-counter> and one with a non-default
49 attribute: <click-counter value="10"></click-counter></p>
50
51 </body>