rodydavis
b9e42c3ef4
Build and Deploy / build-and-deploy (push) Has been cancelled
- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
57 lines
1017 B
TypeScript
57 lines
1017 B
TypeScript
import { html, css, LitElement } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
export const tagName = "my-element";
|
|
|
|
/**
|
|
* My Element
|
|
*/
|
|
@customElement(tagName)
|
|
export class MyElement extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
display: block;
|
|
border: solid 1px gray;
|
|
padding: 16px;
|
|
max-width: 800px;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* The name to say "Hello" to.
|
|
*/
|
|
@property()
|
|
name = "World";
|
|
|
|
/**
|
|
* The number of times the button has been clicked.
|
|
*/
|
|
@property({ type: Number })
|
|
count = 1;
|
|
|
|
render() {
|
|
return html`
|
|
<h1>Hello, ${this.name}!</h1>
|
|
<button @click=${this._onClick} role="button">
|
|
Click Count: ${this.count}
|
|
</button>
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
|
|
private _onClick() {
|
|
this.count++;
|
|
this.dispatchEvent(new CustomEvent("count", { detail: this.count }));
|
|
}
|
|
|
|
foo(): string {
|
|
return "foo";
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
[tagName]: MyElement;
|
|
}
|
|
}
|