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.
50 lines
945 B
TypeScript
50 lines
945 B
TypeScript
import { html, css, LitElement } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
|
|
@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";
|
|
@state() count = 0;
|
|
|
|
render() {
|
|
return html`
|
|
<h1>Hello, ${this.name}!</h1>
|
|
<button @click=${() => this.modify(1)} part="button">
|
|
Click Count: ${this.count}
|
|
</button>
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
|
|
modify(val: number) {
|
|
this.count += val;
|
|
}
|
|
|
|
reset() {
|
|
this.count = 0;
|
|
}
|
|
|
|
async firstUpdated() {
|
|
window.addEventListener(
|
|
"message",
|
|
(e: any) => {
|
|
const message = e.data;
|
|
const { command } = message;
|
|
if (command === "reset") {
|
|
this.reset();
|
|
}
|
|
},
|
|
false
|
|
);
|
|
}
|
|
}
|