From b9d7ebaac34025641ab8dda470de52fef761b32a Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 30 May 2026 19:10:45 -0400
Subject: [PATCH] feature(plugins): #1646 support lit ssr default export for
 pages and layouts

---
 packages/plugin-renderer-lit/README.md        |  10 +-
 packages/plugin-renderer-lit/package.json     |   8 +-
 .../src/execute-route-module.js               |  97 ++++++-
 .../cases/serve.default/serve.default.spec.js | 249 +++++++++++++++---
 .../cases/serve.default/src/layouts/album.js  |  36 +++
 .../serve.default/src/pages/album/foo.html    |   9 +
 .../serve.default/src/pages/artist/[name].js  |  16 ++
 .../serve.default/src/pages/product/[id].js   |  18 ++
 .../cases/serve.default/src/pages/products.js |  32 +++
 yarn.lock                                     |  22 +-
 10 files changed, 435 insertions(+), 62 deletions(-)
 create mode 100644 packages/plugin-renderer-lit/test/cases/serve.default/src/layouts/album.js
 create mode 100644 packages/plugin-renderer-lit/test/cases/serve.default/src/pages/album/foo.html
 create mode 100644 packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artist/[name].js
 create mode 100644 packages/plugin-renderer-lit/test/cases/serve.default/src/pages/product/[id].js
 create mode 100644 packages/plugin-renderer-lit/test/cases/serve.default/src/pages/products.js

diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md
index 1c4c1d33d..ed268be53 100644
--- a/packages/plugin-renderer-lit/README.md
+++ b/packages/plugin-renderer-lit/README.md
@@ -74,13 +74,15 @@ import type { LitRendererPlugin } from '@greenwood/plugin-renderer-lit';
 ## Caveats
 
 1. Lit SSR [does not support native `HTMLElement`](https://github.com/lit/lit/discussions/2092) which means **_you will need to use `LitElement` as your base class in all instances where you are pre-rendering or using SSR_**.
-1. Be aware of the known documented [caveats](https://lit.dev/docs/ssr/overview/#library-status) as called out in the Lit SSR docs, such as:
-    - Lit SSR [**only** renders into declarative shadow roots](https://github.com/lit/lit/issues/3080#issuecomment-1165158794), so you will have to keep browser support and polyfill usage in mind.
-    - At this time, `LitElement` does not support `async` work (e.g. for `connectedCallback`).  You can follow along with this issue [in the Lit repo](https://github.com/lit/lit/issues/2469).
-1. Lit only supports templates on the server side for HTML generated content, thus Greenwood's `getBody` API must be used.  We would love for [server only components](https://github.com/lit/lit/issues/2469#issuecomment-1759583861) to be a thing though!
+1. Be aware of the known [caveats](https://lit.dev/docs/ssr/overview/#library-status) as called out in the Lit SSR docs, such as:
+    - Lit SSR [**only** renders into declarative shadow roots](https://github.com/lit/lit/issues/3080#issuecomment-1165158794), so you will have to keep browser support (and polyfill usage) in mind.
+    - At this time, `LitElement` does not support `async` work (e.g. for `connectedCallback`).  You can follow along with [this issue](https://github.com/lit/lit/issues/2469) and [this issue](https://github.com/lit/lit/issues/4866) from the Lit repo.
+1. For constructor props support, you will have to [map attributes to properties](https://greenwoodjs.dev/docs/plugins/lit-ssr/#usage)
 1. Lit does not support [`CSSStyleSheet` (aka CSS Modules) in their SSR DOM shim](https://github.com/lit/lit/issues/4862).  As an alternative, you may consider using Greenwood's [**Raw adapter**](https://greenwoodjs.dev/docs/plugins/raw/) to inline CSS in `<style>` tags into your custom elements.
 1. Full hydration support is not available yet.  See [this Greenwood issue](https://github.com/ProjectEvergreen/greenwood/issues/880) to follow along with when it will land.
 
+_**Note**: As `LitElement` [only renders into Shadow Roots](https://github.com/lit/lit/issues/3080#issuecomment-1165158794), for pages and layouts this plugin will extract the HTML contents of the SSR'd `<template>` tag and output those content into the **Light DOM** of your page._
+
 > See [this repo](https://github.com/thescientist13/greenwood-lit-ssr) for a full demo of isomorphic Lit SSR with SSR pages and API routes deployed to Vercel serverless functions.
 
 ## Usage
diff --git a/packages/plugin-renderer-lit/package.json b/packages/plugin-renderer-lit/package.json
index c00296c6e..4a3dfaee1 100644
--- a/packages/plugin-renderer-lit/package.json
+++ b/packages/plugin-renderer-lit/package.json
@@ -37,14 +37,14 @@
   },
   "peerDependencies": {
     "@greenwood/cli": "^0.33.0",
-    "lit": "^3.1.0"
+    "lit": "^3.3.3"
   },
   "dependencies": {
-    "@lit-labs/ssr": "^3.2.0",
-    "@lit-labs/ssr-client": "^1.1.6"
+    "@lit-labs/ssr": "^4.1.0",
+    "@lit-labs/ssr-client": "^1.1.8"
   },
   "devDependencies": {
     "@greenwood/cli": "^0.34.0-alpha.5",
-    "lit": "^3.1.0"
+    "lit": "^3.3.3"
   }
 }
diff --git a/packages/plugin-renderer-lit/src/execute-route-module.js b/packages/plugin-renderer-lit/src/execute-route-module.js
index 2e5355987..402fec7f8 100644
--- a/packages/plugin-renderer-lit/src/execute-route-module.js
+++ b/packages/plugin-renderer-lit/src/execute-route-module.js
@@ -1,6 +1,6 @@
-import { render } from "@lit-labs/ssr";
+import { render, LitElementRenderer } from "@lit-labs/ssr";
 import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
-import { html } from "lit";
+import { html, literal, unsafeStatic } from "lit/static-html.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 async function executeRouteModule({
@@ -10,7 +10,9 @@ async function executeRouteModule({
   prerender,
   htmlContents,
   scripts,
+  request,
   contentOptions = {},
+  params = {},
 }) {
   const data = {
     layout: null,
@@ -48,16 +50,95 @@ async function executeRouteModule({
       data.hydration = true;
     }
 
-    if (body && getBody) {
-      const templateResult = await getBody(compilation, page, data.pageData);
+    if (body) {
+      if (module.default) {
+        // for the Lit implementation, we render the custom element programmatically
+        // and then extract the contents of the `<template>`
+        const tagName = `${page.id}-page`;
+        const tagNameLiteral = literal`${unsafeStatic(tagName)}`;
+        // since Lit does not support passing data to the `constructor` have to map params to attributes for now
+        const attributes =
+          Object.entries(params).length > 0
+            ? Object.entries(params)
+                .map(([key, value]) => `${key}="${value}"`)
+                .join(" ")
+            : "";
+        const litAttributes = literal`${unsafeStatic(attributes)}`;
+        const pageTemplate = html`<${tagNameLiteral} ${litAttributes}"></${tagNameLiteral}>`;
 
-      data.body = await collectResult(render(templateResult));
+        customElements.define(tagName, module.default);
+
+        // only enable when default export is a LitElement
+        // TODO: provide options for additional tag names from config
+        // https://github.com/ProjectEvergreen/greenwood/issues/1687
+        LitElementRenderer.renderOptions.push((element) =>
+          element.localName === tagName ? { connectedCallback: true } : undefined,
+        );
+
+        // TODO: support disabling SSR on a per element basis from config
+        // https://github.com/ProjectEvergreen/greenwood/issues/1687
+        // LitElementRenderer.renderOptions.push((element) =>
+        //   element.localName === 'my-element' ? {disableSsr: true} : undefined
+        // );
+
+        const ssrResult = render(pageTemplate);
+        const ssrContent = await collectResult(ssrResult);
+        const ssrContentsMatch =
+          /<template shadowroot="open" shadowrootmode="open">(.*.)<\/template>/s;
+
+        data.body = ssrContent.match(ssrContentsMatch)[1];
+      } else if (getBody) {
+        const templateResult = await getBody(compilation, page, request, params);
+
+        data.body = await collectResult(render(templateResult));
+      }
     }
 
-    if (layout && getLayout) {
-      const templateResult = await getLayout(compilation, page);
+    // TODO: layouts as SSR pages
+    // TODO: constructor props / dynamic routing
+    // https://github.com/ProjectEvergreen/greenwood/issues/1248
+
+    if (layout) {
+      // support dynamic layouts that are just custom elements vs calls to getLayout
+      if (!getLayout && !data.body && !page.isSSR && module.default) {
+        // for the Lit implementation, we render the custom element programmatically
+        // and then extract the contents of the `<template>`
+        const tagName = `${page.id}-layout`;
+        const tagNameLiteral = literal`${unsafeStatic(tagName)}`;
+        // since Lit does not support passing data to the `constructor` have to map params to attributes for now
+        const attributes =
+          Object.entries(params).length > 0
+            ? Object.entries(params)
+                .map(([key, value]) => `${key}="${value}"`)
+                .join(" ")
+            : "";
+        const litAttributes = literal`${unsafeStatic(attributes)}`;
+        const layoutTemplate = html`<${tagNameLiteral} ${litAttributes}"></${tagNameLiteral}>`;
+
+        customElements.define(tagName, module.default);
+
+        // only enable when default export is a LitElement
+        // TODO: provide options for additional tag names from config
+        LitElementRenderer.renderOptions.push((element) =>
+          element.localName === tagName ? { connectedCallback: true } : undefined,
+        );
+
+        // TODO: support disabling SSR on a per element basis from config
+        // LitElementRenderer.renderOptions.push((element) =>
+        //   element.localName === 'my-element' ? {disableSsr: true} : undefined
+        // );
+
+        const ssrResult = render(layoutTemplate);
+        const ssrContent = await collectResult(ssrResult);
+        const ssrContentsMatch =
+          /<template shadowroot="open" shadowrootmode="open">(.*.)<\/template>/s;
+
+        data.layout = ssrContent.match(ssrContentsMatch)[1];
+      } else if (getLayout) {
+        const templateResult = await getLayout(compilation, page, request, params);
 
-      data.layout = await collectResult(render(templateResult));
+        data.layout = await collectResult(render(templateResult));
+      }
     }
 
     if (frontmatter && getFrontmatter) {
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js b/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js
index ccd95a83e..fa0802132 100644
--- a/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js
@@ -26,7 +26,12 @@
  *   pages/
  *     api/
  *       search.js
+ *     artist/
+ *       [name].js
+ *     product/
+ *       [id].js
  *     artists.js
+ *     products.js
  *     users.js (isolation = false)
  *   layouts/
  *     app.html
@@ -71,41 +76,34 @@ describe("Serve Greenwood With: ", function () {
       });
     });
 
-    let artistsResponse = {};
-    let usersResponse = {};
-    let artists = [];
-    let data;
-    let dom;
-    let usersPageDom;
-    let usersPageHtml;
-    let artistsPageGraphData;
+    describe("Serve command with HTML route response using getBody, getLayout and getFrontmatter for the artists page", function () {
+      let response = {};
+      let data;
+      let dom;
+      let artists = [];
+      let artistsPageGraphData;
 
-    before(async function () {
-      const graph = JSON.parse(
-        await fs.promises.readFile(path.join(outputPath, "public/graph.json"), "utf-8"),
-      );
-      artists = JSON.parse(
-        await fs.promises.readFile(new URL("./artists.json", import.meta.url), "utf-8"),
-      );
-
-      artistsPageGraphData = graph.filter((page) => page.route === "/artists/")[0];
-
-      artistsResponse = await fetch(`${hostname}/artists/`);
-      data = await artistsResponse.text();
-      dom = new JSDOM(data);
-
-      usersResponse = await fetch(`${hostname}/users/`);
-      usersPageHtml = await usersResponse.text();
-      usersPageDom = new JSDOM(usersPageHtml);
-    });
+      before(async function () {
+        const graph = JSON.parse(
+          await fs.promises.readFile(path.join(outputPath, "public/graph.json"), "utf-8"),
+        );
+        artists = JSON.parse(
+          await fs.promises.readFile(new URL("./artists.json", import.meta.url), "utf-8"),
+        );
+
+        artistsPageGraphData = graph.filter((page) => page.route === "/artists/")[0];
+
+        response = await fetch(`${hostname}/artists/`);
+        data = await response.text();
+        dom = new JSDOM(data);
+      });
 
-    describe("Serve command with HTML route response using getBody, getLayout and getFrontmatter for the artists page", function () {
       it("should return a 200 status", function () {
-        expect(artistsResponse.status).to.equal(200);
+        expect(response.status).to.equal(200);
       });
 
       it("should return the correct content type", function () {
-        expect(artistsResponse.headers.get("content-type")).to.equal("text/html");
+        expect(response.headers.get("content-type")).to.equal("text/html");
       });
 
       it("should return a response body", function () {
@@ -183,7 +181,21 @@ describe("Serve Greenwood With: ", function () {
       });
     });
 
-    describe("Serve command with HTML route response using LitElement as a getPage export with an <app-footer> component for the users page", function () {
+    describe("Serve command with HTML route response using LitElement as a getBody export with an <app-footer> component for the users page", function () {
+      let usersResponse = {};
+      let usersPageDom;
+      let usersPageHtml;
+      let users = [];
+
+      before(async function () {
+        users = JSON.parse(
+          await fs.promises.readFile(new URL("./artists.json", import.meta.url), "utf-8"),
+        );
+        usersResponse = await fetch(`${hostname}/users/`);
+        usersPageHtml = await usersResponse.text();
+        usersPageDom = new JSDOM(usersPageHtml);
+      });
+
       it("the response body should be valid HTML from JSDOM", function (done) {
         expect(usersPageDom).to.not.be.undefined;
         done();
@@ -195,7 +207,7 @@ describe("Serve Greenwood With: ", function () {
 
       it("should have the expected users length text in the <body>", function () {
         expect(usersPageHtml).to.contain(
-          `<div id="users"><!--lit-part-->${artists.length}<!--/lit-part--></div>`,
+          `<div id="users"><!--lit-part-->${users.length}<!--/lit-part--></div>`,
         );
       });
 
@@ -216,6 +228,179 @@ describe("Serve Greenwood With: ", function () {
       });
     });
 
+    describe("Serve command with HTML route response using LitElement with custom element definition as a layout", function () {
+      let albumResponse = {};
+      let albumPageDom;
+      let albumPageHtml;
+
+      before(async function () {
+        albumResponse = await fetch(`${hostname}/album/foo/`);
+        albumPageHtml = await albumResponse.text();
+        albumPageDom = new JSDOM(albumPageHtml);
+      });
+
+      it("the response body should be valid HTML from JSDOM", function (done) {
+        expect(albumPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it("should have the expected <h1> text in the <body>", function () {
+        const heading = albumPageDom.window.document.querySelectorAll("h1");
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal("Album Page");
+      });
+
+      it("should have the expected <h2> title text in the <body>", function () {
+        const heading = albumPageDom.window.document.querySelectorAll("h2");
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal("Foo Artist");
+      });
+
+      it("should have the expected <ul> items from layout connected callback", function () {
+        const list = albumPageDom.window.document.querySelectorAll("ul li");
+
+        expect(list.length).to.equal(2);
+        expect(list[0].textContent).to.equal("1) Foo");
+        expect(list[1].textContent).to.equal("2) Bar");
+      });
+    });
+
+    describe("Serve command with HTML route response using LitElement as a default export for the products page", function () {
+      let productsResponse = {};
+      let productsPageDom;
+      let productsPageHtml;
+
+      before(async function () {
+        productsResponse = await fetch(`${hostname}/products/`);
+        productsPageHtml = await productsResponse.text();
+        productsPageDom = new JSDOM(productsPageHtml);
+      });
+
+      it("the response body should be valid HTML from JSDOM", function (done) {
+        expect(productsPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it("should have the expected <h1> text in the <body>", function () {
+        const heading = productsPageDom.window.document.querySelectorAll("h1");
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal("Products Page");
+      });
+
+      it("should have the expected products list output", function () {
+        const productsList = productsPageDom.window.document.querySelectorAll("ul li");
+
+        expect(productsList.length).to.equal(2);
+        expect(productsList[0].textContent).to.equal("1) Product 1");
+        expect(productsList[1].textContent).to.equal("2) Product 2");
+      });
+
+      it("should have the expected lit hydration script in the <head>", function () {
+        const scripts = Array.from(
+          productsPageDom.window.document.querySelectorAll("head script"),
+        ).filter(
+          (script) =>
+            !script.getAttribute("src") &&
+            script.textContent?.indexOf("globalThis.litElementHydrateSupport") >= 0,
+        );
+
+        expect(scripts.length).to.equal(1);
+      });
+    });
+
+    describe("Serve command with HTML route response using LitElement as a default export for a dynamic route with params", function () {
+      const productId = 1;
+      let productDetailsResponse = {};
+      let productDetailsPageDom;
+      let productDetailsPageHtml;
+
+      before(async function () {
+        productDetailsResponse = await fetch(`${hostname}/product/${productId}/`);
+        productDetailsPageHtml = await productDetailsResponse.text();
+        productDetailsPageDom = new JSDOM(productDetailsPageHtml);
+      });
+
+      it("the response body should be valid HTML from JSDOM", function (done) {
+        expect(productDetailsPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it("should have the expected heading text in the <body>", function () {
+        const heading = productDetailsPageDom.window.document.querySelectorAll("h1");
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal("Product Details Page");
+      });
+
+      it("should have the expected product id text in the <body>", function () {
+        const paragraph = productDetailsPageDom.window.document.querySelectorAll("p");
+
+        expect(paragraph.length).to.equal(1);
+        expect(paragraph[0].textContent).to.equal(`Product ID: ${productId}`);
+      });
+
+      it("should have the expected lit hydration script in the <head>", function () {
+        const scripts = Array.from(
+          productDetailsPageDom.window.document.querySelectorAll("head script"),
+        ).filter(
+          (script) =>
+            !script.getAttribute("src") &&
+            script.textContent?.indexOf("globalThis.litElementHydrateSupport") >= 0,
+        );
+
+        expect(scripts.length).to.equal(1);
+      });
+    });
+
+    describe("Serve command with HTML route response using getBody a dynamic route with params", function () {
+      const artistName = "Analog";
+      let artistDetailsResponse = {};
+      let artistDetailsPageDom;
+      let artistDetailsPageHtml;
+
+      before(async function () {
+        artistDetailsResponse = await fetch(`${hostname}/artist/${artistName.toLowerCase()}/`);
+        artistDetailsPageHtml = await artistDetailsResponse.text();
+        artistDetailsPageDom = new JSDOM(artistDetailsPageHtml);
+      });
+
+      it("the response body should be valid HTML from JSDOM", function (done) {
+        expect(artistDetailsPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it("should have the expected heading text in the <body>", function () {
+        const heading = artistDetailsPageDom.window.document.querySelectorAll("h1");
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal(artistName);
+      });
+
+      it("should have the expected artist image tag in the <body>", function () {
+        const img = artistDetailsPageDom.window.document.querySelectorAll("img");
+
+        expect(img.length).to.equal(1);
+        expect(img[0].getAttribute("src").endsWith(`${artistName.toLowerCase()}.jpg`)).to.equal(
+          true,
+        );
+      });
+
+      it("should have the expected lit hydration script in the <head>", function () {
+        const scripts = Array.from(
+          artistDetailsPageDom.window.document.querySelectorAll("head script"),
+        ).filter(
+          (script) =>
+            !script.getAttribute("src") &&
+            script.textContent?.indexOf("globalThis.litElementHydrateSupport") >= 0,
+        );
+
+        expect(scripts.length).to.equal(1);
+      });
+    });
+
     describe("Serve command with API route server rendering LitElement <app-card> components as an HTML response", function () {
       const term = "Analog";
       let resp;
@@ -255,7 +440,7 @@ describe("Serve Greenwood With: ", function () {
         const cardDom = new JSDOM(cards[0].innerHTML);
 
         expect(cards.length).to.equal(1);
-        // TODO this should be real data (see issue with static in card.js)
+        // TODO this should be using real data from attributes (see issue with static in card.js)
         expect(cardDom.window.document.querySelectorAll("h3")[0].textContent).to.equal("Foo");
         expect(cardDom.window.document.querySelectorAll("img")[0].getAttribute("src")).to.equal(
           "bar.png",
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/layouts/album.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/layouts/album.js
new file mode 100644
index 000000000..c09bc7064
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/src/layouts/album.js
@@ -0,0 +1,36 @@
+import { LitElement, html } from "lit";
+
+// TODO: constructor props - https://github.com/ProjectEvergreen/greenwood/issues/1248
+export default class AlbumPageLayout extends LitElement {
+  // TODO: async connectedCallback - https://github.com/lit/lit/issues/2469#issuecomment-1759583861
+  connectedCallback() {
+    this.albums = [
+      {
+        id: 1,
+        name: "Foo",
+      },
+      {
+        id: 2,
+        name: "Bar",
+      },
+    ];
+  }
+
+  render() {
+    const { albums } = this;
+
+    return html`
+      <body>
+        <h1>Album Page</h1>
+        <output for="content"></output>
+        <ul>
+          ${albums.map((album) => {
+            const { id, name } = album;
+
+            return html`<li>${id}) ${name}</li>`;
+          })}
+        </ul>
+      </body>
+    `;
+  }
+}
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/album/foo.html b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/album/foo.html
new file mode 100644
index 000000000..af1b7629c
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/album/foo.html
@@ -0,0 +1,9 @@
+---
+layout: album
+---
+
+<html>
+  <body>
+    <h2>Foo Artist</h2>
+  </body>
+</html>
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artist/[name].js b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artist/[name].js
new file mode 100644
index 000000000..204524683
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artist/[name].js
@@ -0,0 +1,16 @@
+import { html } from "lit";
+import fs from "node:fs/promises";
+
+async function getBody(compilation, page, request, params) {
+  const artists = JSON.parse(
+    await fs.readFile(new URL("../../../artists.json", import.meta.url), "utf-8"),
+  );
+  const artist = artists.find((artist) => artist.name.toLowerCase() === params.name);
+
+  return html`
+    <h1>${artist.name}</h1>
+    <img src="${artist.imageUrl}" /></td>
+  `;
+}
+
+export { getBody };
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/product/[id].js b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/product/[id].js
new file mode 100644
index 000000000..80779c71a
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/product/[id].js
@@ -0,0 +1,18 @@
+import { LitElement, html } from "lit";
+
+export default class ProductDetailsPage extends LitElement {
+  static get properties() {
+    return {
+      id: { type: Number },
+    };
+  }
+
+  render() {
+    const { id } = this;
+
+    return html`
+      <h1>Product Details Page</h1>
+      <p>Product ID: ${id}</p>
+    `;
+  }
+}
diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/products.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/products.js
new file mode 100644
index 000000000..1df9f63d5
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/products.js
@@ -0,0 +1,32 @@
+import { LitElement, html } from "lit";
+
+export default class ProductsPage extends LitElement {
+  // TODO: async connectedCallback - https://github.com/lit/lit/issues/2469#issuecomment-1759583861
+  connectedCallback() {
+    this.products = [
+      {
+        id: 1,
+        name: "Product 1",
+      },
+      {
+        id: 2,
+        name: "Product 2",
+      },
+    ];
+  }
+
+  render() {
+    const { products } = this;
+
+    return html`
+      <h1>Products Page</h1>
+      <ul>
+        ${products.map((product) => {
+          const { id, name } = product;
+
+          return html`<li>${id}) ${name}</li>`;
+        })}
+      </ul>
+    `;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index c9db4ee27..5995da423 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2509,7 +2509,7 @@
   dependencies:
     "@lit/reactive-element" "^1.0.0 || ^2.0.0"
 
-"@lit-labs/ssr-client@^1.1.6", "@lit-labs/ssr-client@^1.1.7":
+"@lit-labs/ssr-client@^1.1.7", "@lit-labs/ssr-client@^1.1.8":
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-client/-/ssr-client-1.1.8.tgz#0a1099e9698450150f4d6f28c4ec06e035432bc3"
   integrity sha512-PjGh81oKsoI64m3IDjTqqjhC7dr2uC/o0jrllUb5gRAyp/RlAHxapgJrjq9kWz97faCHLQ8jUlTi6tGm+8fgyA==
@@ -2518,21 +2518,20 @@
     lit "^3.1.2"
     lit-html "^3.1.2"
 
-"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0", "@lit-labs/ssr-dom-shim@^1.3.0", "@lit-labs/ssr-dom-shim@^1.5.0":
+"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0", "@lit-labs/ssr-dom-shim@^1.5.0", "@lit-labs/ssr-dom-shim@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz#693e129b809741fd23e98fcb57e41fd3d082db1a"
   integrity sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==
 
-"@lit-labs/ssr@^3.2.0":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-3.3.1.tgz#39bcb47b0343442b7201231d6cf25b37a0e97c42"
-  integrity sha512-JlF1PempxvzrGEpRFrF+Ki0MHzR3HA51SK8Zv0cFpW9p0bPW4k0FeCwrElCu371UEpXF7RcaE2wgYaE1az0XKg==
+"@lit-labs/ssr@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-4.1.0.tgz#529e6c6d50ed049e3c3bc6d348472bd279d02b15"
+  integrity sha512-m0zymVVlHB1ddJQ1lastsV8ROW3whFOiHJhVPQWd04MnGTkTlUUVLQctux1QlyD9BtLXNN6iASxv388vhgKMFg==
   dependencies:
     "@lit-labs/ssr-client" "^1.1.7"
-    "@lit-labs/ssr-dom-shim" "^1.3.0"
+    "@lit-labs/ssr-dom-shim" "^1.6.0"
     "@lit/reactive-element" "^2.0.4"
     "@parse5/tools" "^0.3.0"
-    "@types/node" "^16.0.0"
     enhanced-resolve "^5.10.0"
     lit "^3.1.2"
     lit-element "^4.0.4"
@@ -5120,11 +5119,6 @@
   dependencies:
     undici-types ">=7.24.0 <7.24.7"
 
-"@types/node@^16.0.0":
-  version "16.18.126"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.126.tgz#27875faa2926c0f475b39a8bb1e546c0176f8d4b"
-  integrity sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==
-
 "@types/node@^22.13.1":
   version "22.19.19"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.19.19.tgz#3124bf26ded54168b768138321fef99b420c6112"
@@ -12323,7 +12317,7 @@ lit@^2.0.0-rc.2, lit@^2.8.0:
     lit-element "^3.3.0"
     lit-html "^2.8.0"
 
-"lit@^2.5.0 || ^3.1.3", lit@^3.1.0, lit@^3.1.2, lit@^3.2.0, lit@^3.2.1:
+"lit@^2.5.0 || ^3.1.3", lit@^3.1.0, lit@^3.1.2, lit@^3.2.0, lit@^3.2.1, lit@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/lit/-/lit-3.3.3.tgz#93579885e51a20a772c68482a34706fe1636e8f0"
   integrity sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==