53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
|
|
* This code may only be used under the BSD style license found at
|
|
* http://polymer.github.io/LICENSE.txt
|
|
* The complete set of authors may be found at
|
|
* http://polymer.github.io/AUTHORS.txt
|
|
* The complete set of contributors may be found at
|
|
* http://polymer.github.io/CONTRIBUTORS.txt
|
|
* Code distributed by Google as part of the polymer project is also
|
|
* subject to an additional IP rights grant found at
|
|
* http://polymer.github.io/PATENTS.txt
|
|
*/
|
|
|
|
import { LitElement, html, customElement, property, css } from 'lit-element';
|
|
|
|
@customElement('my-element')
|
|
export class MyElement extends LitElement {
|
|
|
|
static styles = css`
|
|
:host {
|
|
display: block;
|
|
border: solid 1px gray;
|
|
padding: 16px;
|
|
max-width: 800px;
|
|
}
|
|
`;
|
|
|
|
@property()
|
|
name = 'World';
|
|
|
|
@property({type: Number})
|
|
count = 0;
|
|
|
|
render() {
|
|
return html`
|
|
<h1>Hello, ${this.name}!</h1>
|
|
<button @click=${this._onClick}>Click Count: ${this.count}</button>
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
|
|
private _onClick() {
|
|
this.count++;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'my-element': MyElement;
|
|
}
|
|
}
|