2 files changed, 77 insertions, 0 deletions
diff --git a/test/snippets/package.json b/test/snippets/package.json
index 07b349f86..0c05b97be 100644
--- a/test/snippets/package.json
+++ b/test/snippets/package.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.4.1",
+    "lit": "^2.4.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/test/snippets/simple-lit-example.ts b/test/snippets/simple-lit-example.ts
new file mode 100644
index 000000000..34446e418
--- /dev/null
+++ b/test/snippets/simple-lit-example.ts
@@ -0,0 +1,76 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, eventOptions } from "lit/decorators.js";
+
+var loadedResolve;
+var loadedPromise = new Promise((resolve) => {
+  loadedResolve = resolve;
+});
+
+if (document?.readyState === "loading") {
+  document.addEventListener(
+    "DOMContentLoaded",
+    () => {
+      loadedResolve();
+    },
+    { once: true }
+  );
+} else {
+  loadedResolve();
+}
+
+@customElement("my-element")
+export class MyElement extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      padding: 10px;
+      background: lightgray;
+    }
+    .planet {
+      color: var(--planet-color, blue);
+    }
+  `;
+
+  @property() planet = "Earth";
+
+  render() {
+    return html`
+      <span @click=${this.togglePlanet} class="planet" id="planet-id"
+        >${this.planet}</span
+      >
+    `;
+  }
+
+  @eventOptions({ once: true })
+  togglePlanet() {
+    this.planet = this.planet === "Earth" ? "Mars" : "Earth";
+  }
+}
+
+function setup() {
+  let element = document.createElement("my-element");
+  element.id = "my-element-id";
+  document.body.appendChild(element);
+}
+
+export async function test() {
+  setup();
+  await loadedPromise;
+
+  let element = document.getElementById("my-element-id");
+  let shadowRoot = element.shadowRoot;
+  let planet = shadowRoot.getElementById("planet-id");
+  if (element.__planet !== "Earth") {
+    throw new Error("Unexpected planet name: " + element.__planet);
+  }
+  planet.click();
+  if (element.__planet !== "Mars") {
+    throw new Error("Unexpected planet name: " + element.__planet);
+  }
+  planet.click();
+  if (element.__planet !== "Mars") {
+    throw new Error("Unexpected planet name: " + element.__planet);
+  }
+
+  return testDone(import.meta.url);
+}