lit: [ssr] breaks when using expressions in `` and `<html>` tags</h1> <div class="body"><h1>Description</h1> <p>A clear and concise description of what the bug is.</p> <h1>Steps to Reproduce</h1> <ol> <li>Write this code in <code>test.js</code></li> </ol> <pre><code class="language-ts">import { Readable } from "stream"; import { render } from "@lit-labs/ssr/lib/render-with-global-dom-shim.js"; import { html } from 'lit-html'; const template = ({ title }) => html` <html> <head>  <title>${title}</title> </head> <body> <p>${title}</p> </body> </html> `; const ssrResult = render(template({ title: "hello" })); /***** HELPERS */ const stream = Readable.from(ssrResult); const ssrString = await streamToString(stream); console.log(ssrString); function streamToString(stream) { const chunks = []; return new Promise((resolve, reject) => { stream.on("data", (chunk) => chunks.push(Buffer.from(chunk))); stream.on("error", (err) => reject(err)); stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8"))); }); } </code></pre> <ol> <li>execute it via <code>node test.js</code></li> </ol> <h2>Expected Results</h2> <p>the ssr output</p> <h2>Actual Results</h2> <pre><code>$ node test.js node:internal/process/esm_loader:94 internalBinding('errors').triggerUncaughtException( ^ Error: unexpected final partIndex: 1 !== 2 at renderTemplateResult (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:514:15) at renderTemplateResult.next (<anonymous>) at renderValue (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:354:16) at renderValue.next (<anonymous>) at render (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:336:12) at render.next (<anonymous>) at next (node:internal/streams/from:86:20) at Readable.readable._read (node:internal/streams/from:53:7) at Readable.read (node:internal/streams/readable:487:10) at flow (node:internal/streams/readable:1012:34) </code></pre> <h2>Browsers Affected</h2> <ul> <li><input checked disabled type="checkbox"> Node 17</li> <li><input checked disabled type="checkbox"> Node 16</li> </ul> </div> </section> <section class="issueAnalyticsMobile" id="analytics"> <h2>About this issue</h2> <ul> <li><a href="https://github.com/lit/lit/issues/2441" rel="nofollow">Original URL</a></li> <li>State: closed</li> <li>Created 2 years ago</li> <li>Reactions: 4</li> <li>Comments: 17 (8 by maintainers)</li> </ul> </section><section class="issueComments" id="topComments"> <h2>Most upvoted comments</h2> <div class="comments"> <div class="comment" key="0"> <div class="commentBody"><p><a href="https://github.com/lit/lit/releases/tag/%40lit-labs%2Fssr%403.2.0">lit-labs/ssr@3.2.0</a> added <em>server only</em> templates which support <code><title></code> and <code><html></code> for templates that only render during SSR.</p> <p>Circling back to the example given in the issue description, the server only template version would be:</p> <pre><code>import {render, html} from '@lit-labs/ssr'; const template = ({ title, lang }) => html` <!DOCTYPE html> <html lang="${lang}"> <head>  <title>${title}</title> </head> <body> <p>${title}</p> </body> </html> `; </code></pre> <p>This template is rendered by Lit SSR as plain HTML (without any Lit marker comments). Therefore it cannot be hydrated or re-rendered on the client. This is by design as it’s not possible to hydrate <code><!doctype html></code> or <code><title></code>. One final note, server templates can contain client templates (e.g. html imported from ‘lit’), but client templates cannot contain server templates.</p> <p><a href="https://www.npmjs.com/package/@lit-labs/ssr#server-only-templates">Server only template documentation</a></p> <p>Try them out, and please file issues (or re-open this one) if issues persist or new ones arise! Thank you!</p> </div> <div class="commentMetadata"> <div class="reactions"> <span>+1</span> </div> <div class="attribution"> <a href="https://github.com/AndrewJakubowicz" rel="nofollow">AndrewJakubowicz</a> on <a href="https://github.com/lit/lit/issues/2441#issuecomment-1816903951" rel="nofollow">Nov 17, 2023</a> </div> </div> </div><div class="comment" key="1"> <div class="commentBody"><p>should <code><html></code> attrs be a special case in ssr-and-hydrate-only?</p> </div> <div class="commentMetadata"> <div class="reactions"> <span>+1</span> </div> <div class="attribution"> <a href="https://github.com/bennypowers" rel="nofollow">bennypowers</a> on <a href="https://github.com/lit/lit/issues/2441#issuecomment-1022866138" rel="nofollow">Jan 27, 2022</a> </div> </div> </div><div class="comment" key="2"> <div class="commentBody"><p><a href="https://github.com/aomarks">@aomarks</a> I can fix <code><title></code> real quick</p> </div> <div class="commentMetadata"> <div class="reactions"> <span>+1</span> </div> <div class="attribution"> <a href="https://github.com/justinfagnani" rel="nofollow">justinfagnani</a> on <a href="https://github.com/lit/lit/issues/2441#issuecomment-1022705991" rel="nofollow">Jan 26, 2022</a> </div> </div> </div> </div> <div class="moreComments"> <a href="https://github.com/lit/lit/issues/2441" rel="nofollow">Read more comments on GitHub</a> </div> </section><section class="issueNavigation"> <div class="back"> <a href="https://errorism.dev/issues/lit-lit-render-method-doesnt-work-as-spected"> ← lit: Render method doesn't work as spected </a> </div> <div class="forward"> <a href="https://errorism.dev/issues/lit-lit-ssr-lit-ssr-breaks-sass-with-polyfill"> lit: [ssr] Lit SSR breaks Sass with polyfill → </a> </div> </section> </div> <aside class="sidebar"> <div class="tocWrapper"> <span class="tocTitle">Table of contents</span> <a class="tocItem" href="#issueDescription">Issue description</a> <a class="tocItem" href="#topComments">Top comments</a> </div> <div class="analyticsWrapper"> <span class="analyticsTitle">About this issue</span> <a class="analyticsItem" href="https://github.com/lit/lit/issues/2441" rel="nofollow">Original URL</a> <span class="analyticsItem">State: closed</span> <span class="analyticsItem">Created 2 years ago</span> <span class="analyticsItem">Reactions: 4</span> <span class="analyticsItem">Comments: 17 (8 by maintainers)</span> </div> </aside> </div> </main>          </div> </body></html>