[ssr] It isn't possible to SSR a LitElement passed as node into a template
- Dominant language
- TypeScript
- Stars
- 21.8k
- Forks
- 1.1k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 2
Description
### Which package(s) are affected?
SSR (@lit-labs/ssr)
### Description
The following code works in Lit, but doesn't work via SSR.
```
class SimpleGreeting extends LitElement { ... }
customElements.define('simple-greeting', SimpleGreeting);
render(html`${new SimpleGreeting()}`, container);
```
On the client SimpleGreeting is created correctly. Via SSR, `[object Object]` is rendered.
### Reproduction
See above.
### Workaround
The use case I ran into this was with a dynamic tag name. E.g. you have:
```
class MyCustomElement extends LitElement {}
customElements.define(tagNameVariable, MyCustomElement);
```
This happens in tests where you are reusing a class but generating new tag names.
Workaround was to use `unsafeHTML`, e.g.
```
unsafeHTML(`<${tagNameVariable}>`); // <- correctly SSRs the lit element.
```
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
N/A
### Browser/OS/Node environment
N/A
Contributor guide
Research direction
The affected area is the @lit-labs/ssr package; first reproduce the template with render(html`${new SimpleGreeting()}`, container) and inspect how SSR handles a node passed into a template. Done means the SSR output represents the custom element instead of [object Object], while preserving the existing unsafeHTML workaround scenario.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100