[labs/ssr] svg templates are surrounded with empty <svg></svg> tags when rendered #4265
Description
Which package(s) are affected?
SSR (@lit-labs/ssr)
Description
Any svg``-template is rendered wrapped in <svg>...</svg> when rendered with ssr.
This makes it impossible to create a valid svg, unless we do post-processing on the output.
Reproduction
import { render } from "@lit-labs/ssr/lib/render-lit-html.js";
import { svg } from "lit";
import { Readable } from "stream";
const readable = Readable.from(
render(svg`<svg xmlns="http://www.w3.org/2000/svg"
height="229.6"
width="300"
viewBox="-16 0 250 229.6">${[
svg`<path d="M116,33.9L116,38.06666666666667C116,42.23333333333333,116,50.56666666666666,116,58.9C116,67.23333333333333,116,75.56666666666668,116,79.73333333333333L116,83.9"></path>`,
svg`<path d="M116,33.9L116,38.06666666666667C116,42.23333333333333,116,50.56666666666666,116,58.9C116,67.23333333333333,116,75.56666666666668,116,79.73333333333333L116,83.9"></path>`
]}</svg>`)
);
const chunks = [];
readable.on("readable", () => {
let chunk;
while (null !== (chunk = readable.read())) {
chunks.push(chunk);
}
});
readable.on("end", () => {
const content = chunks.join("");
console.log(content);
});
outputs
<!--lit-part h4LS1XLQZw0=--><svg><svg xmlns="http://www.w3.org/2000/svg"
height="229.6"
width="300"
viewBox="-16 0 250 229.6"><!--lit-part--><!--lit-part XW/ddiU0ieA=--><svg><path d="M116,33.9L116,38.06666666666667C116,42.23333333333333,116,50.56666666666666,116,58.9C116,67.23333333333333,116,75.56666666666668,116,79.73333333333333L116,83.9"></path></svg><!--/lit-part--><!--lit-part XW/ddiU0ieA=--><svg><path d="M116,33.9L116,38.06666666666667C116,42.23333333333333,116,50.56666666666666,116,58.9C116,67.23333333333333,116,75.56666666666668,116,79.73333333333333L116,83.9"></path></svg><!--/lit-part--><!--/lit-part--></svg></svg><!--/lit-part-->
Workaround
I could imagine post-processing by regexp or by creating an XML-document and doing structural post-processing on that, but have not implemented any such thing.
Another work-around might be to use lit html instead of svg (e.g. import { html as svg } from lit); but that means having to pass the lit tagged template function (i.e. html or svg) to my own template functions. Especially with nested templates this will get messy.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
@lit-labs/ssr@3.1.7
Browser/OS/Node environment
Browser: n/a
Node: v18.15.0
npm: 9.6.6