fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- 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.

lit-components/lit-vscode-extension/my-element.ts

@@ -0,0 +1,49 @@
+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
+    );
+  }
+}