[labs/ssr] LitElement renders content inside a Declarative Shadow DOM when using `createRenderRoot` server side
- 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!
```

## Actual Results
Declarative Shadow DOM is still rendered
```html
p { color: blue }
Hello, Somebody!
```

## Browsers Affected
- [ ] Chrome
- [ ] Firefox
- [ ] Edge
- [ ] Safari 11
- [ ] Safari 10
- [ ] IE 11
- [x] NodeJS
Contributor 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