lit / lit/lit

[labs/ssr] LitElement renders content inside a Declarative Shadow DOM when using `createRenderRoot` server side

Open
#3,080 14 comments 14 reactions 0 assignees View on GitHub
Contributions Welcome
Dominant language
TypeScript
Stars
21.8k
Forks
1.1k
Avg merge
18h 25m
Merged PRs (30d)
2

Description

# Description

When using Lit SSR and enabling `createRenderRoot` for a custom element, Lit is rendering the content inside declarative shadow DOM `` tag.

# Steps to Reproduce

1. Given the sample Greeting component that uses `createRenderRoot`
```js
import { html, css, LitElement } from 'lit';

export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;

static properties = {
name: {type: String},
};

constructor() {
super();
this.name = 'Somebody';
}

createRenderRoot(){
return this;
}

render() {
return html`

Hello, ${this.name}!

`;
}
}

customElements.define('simple-greeting', SimpleGreeting);
```
1. Server Render the component
```js
import { render } from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
import { html } from 'lit';
import './greeting.js';

import Koa from 'koa';
import koaNodeResolve from 'koa-node-resolve';
import { Readable } from 'stream';

const { nodeResolve } = koaNodeResolve;
const app = new Koa();
const port = 8080;

app.use(async (ctx) => {
ctx.type = 'text/html';
ctx.body = Readable.from(render(html`


`));
});
app.use(nodeResolve({}));

app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
```

## Live Reproduction Link

https://stackblitz.com/github/thescientist13/lit-ssr-create-render-root

## Expected Results

No Declarative Shadow DOM would be present, just like in [the Lit Playground](https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUdyZWV0aW5nIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgcCB7IGNvbG9yOiBibHVlIH1gO1xuXG4gIHN0YXRpYyBwcm9wZXJ0aWVzID0ge1xuICAgIG5hbWU6IHt0eXBlOiBTdHJpbmd9LFxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5uYW1lID0gJ1NvbWVib2R5JztcbiAgfVxuXG4gIGNyZWF0ZVJlbmRlclJvb3QoKSB7XG4gICAgcmV0dXJuIHRoaXM7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgPHA-SGVsbG8sICR7dGhpcy5uYW1lfSE8L3A-YDtcbiAgfVxufVxuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdzaW1wbGUtZ3JlZXRpbmcnLCBTaW1wbGVHcmVldGluZyk7XG4ifSx7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhRE9DVFlQRSBodG1sPlxuPGhlYWQ-XG4gIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vc2ltcGxlLWdyZWV0aW5nLmpzXCI-PC9zY3JpcHQ-XG48L2hlYWQ-XG48Ym9keT5cbiAgPHNpbXBsZS1ncmVldGluZyBuYW1lPVwiV29ybGRcIj48L3NpbXBsZS1ncmVldGluZz5cbjwvYm9keT5cbiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4yLjAuMFwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjEuMC4wXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl4zLjAuMFwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMi4wLjBcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfV0)

```html

p { color: blue }

Hello, Somebody!

```

Screen Shot 2022-06-23 at 9 27 51 PM

## Actual Results

Declarative Shadow DOM is still rendered
```html


p { color: blue }

Hello, Somebody!


```

Screen Shot 2022-06-23 at 9 42 18 PM

## Browsers Affected

- [ ] Chrome
- [ ] Firefox
- [ ] Edge
- [ ] Safari 11
- [ ] Safari 10
- [ ] IE 11
- [x] NodeJS

Contributor guide

Open the contributing guide

Research direction

Start with the sample component's createRenderRoot() and the @lit-labs/ssr/lib/render-with-global-dom-shim.js render entry point, using the linked StackBlitz reproduction. Compare the generated output with the expected HTML and verify that a component rendering into itself does not produce a declarative shadow-DOM template.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.