| 12 | */ |
| 13 | @customElement('my-element') |
| 14 | export class MyElement extends LitElement { |
| 15 | /** |
| 16 | * The number of times the button has been clicked. |
| 17 | */ |
| 18 | @property({ type: Number }) |
| 19 | count = 0 |
| 20 | |
| 21 | render() { |
| 22 | return html` |
| 23 | <section id="center"> |
| 24 | <div class="hero"> |
| 25 | <img src=${heroImg} class="base" width="170" height="179" alt="" /> |
| 26 | <img src=${litLogo} class="framework" alt="Lit logo" /> |
| 27 | <img src=${viteLogo} class="vite" alt="Vite logo" /> |
| 28 | </div> |
| 29 | <div> |
| 30 | <slot></slot> |
| 31 | <p> |
| 32 | Edit <code>src/my-element.ts</code> and save to test |
| 33 | <code>HMR</code> |
| 34 | </p> |
| 35 | </div> |
| 36 | <button |
| 37 | type="button" |
| 38 | class="counter" |
| 39 | @click=${this._onClick} |
| 40 | part="button" |
| 41 | > |
| 42 | Count is ${this.count} |
| 43 | </button> |
| 44 | </section> |
| 45 | |
| 46 | <div class="ticks"></div> |
| 47 | |
| 48 | <section id="next-steps"> |
| 49 | <div id="docs"> |
| 50 | <svg class="icon" role="presentation" aria-hidden="true"> |
| 51 | <use href="/icons.svg#documentation-icon"></use> |
| 52 | </svg> |
| 53 | <h2>Documentation</h2> |
| 54 | <p>Your questions, answered</p> |
| 55 | <ul> |
| 56 | <li> |
| 57 | <a href="https://vite.dev/" target="_blank"> |
| 58 | <img class="logo" src=${viteLogo} alt="" /> |
| 59 | Explore Vite |
| 60 | </a> |
| 61 | </li> |
| 62 | <li> |
| 63 | <a href="https://lit.dev/" target="_blank"> |
| 64 | <img class="button-icon" src=${litLogo} alt="" /> |
| 65 | Learn more |
| 66 | </a> |
| 67 | </li> |
| 68 | </ul> |
| 69 | </div> |
| 70 | <div id="social"> |
| 71 | <svg class="icon" role="presentation" aria-hidden="true"> |