lit / lit/lit

[ssr] It isn't possible to SSR a LitElement passed as node into a template

Open
#4,400 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.