Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs/better document and clarify Lit SSR plugin usage caveats #1337

Merged
merged 2 commits into from
Dec 14, 2024
Merged

docs/better document and clarify Lit SSR plugin usage caveats #1337

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7c1c93
document native HTMLElement caveat when using Lit SSR
thescientist13 Dec 2, 2024
fc64924
flesh out additional caveats
thescientist13 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/plugin-renderer-lit/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,19 @@ $ yarn add @greenwood/plugin-renderer-lit --dev
$ pnpm add -D @greenwood/plugin-renderer-lit
```

For **pnpm**, you will also want to add this to your _.npmrc_ file
```sh
public-hoist-pattern[]=@lit-labs/*
```

## Caveats

1. Please familiarize yourself with some of the [caveats](https://lit.dev/docs/ssr/overview/#library-status) called out in the Lit docs, like:
1. Lit SSR [does not support native `HTMLElement`](https://github.com/lit/lit/discussions/2092) which means **_you will need to use `LitElement` as your base class in all instances where you are pre-rendering or using SSR_**.
1. Be aware of the known documented [caveats](https://lit.dev/docs/ssr/overview/#library-status) as called out in the Lit SSR docs, such as:
- Lit SSR [**only** renders into declarative shadow roots](https://github.com/lit/lit/issues/3080#issuecomment-1165158794), so you will have to keep browser support and polyfill usage in mind.
- At this time, `LitElement` does not support `async` work. You can follow along with this issue [in the Lit repo](https://github.com/lit/lit/issues/2469).
- At this time, `LitElement` does not support `async` work (e.g. for `connectedCallback`). You can follow along with this issue [in the Lit repo](https://github.com/lit/lit/issues/2469).
1. Lit only supports templates on the server side for HTML generated content, thus Greenwood's `getBody` API must be used. We would love for [server only components](https://github.com/lit/lit/issues/2469#issuecomment-1759583861) to be a thing though!
1. Lit does not support [`CSSStyleSheet` (aka CSS Modules) in their SSR DOM shim](https://github.com/lit/lit/issues/2631#issuecomment-1065400805).
1. Lit does not support [`CSSStyleSheet` (aka CSS Modules) in their SSR DOM shim](https://github.com/lit/lit/issues/4862). As an alternative, you may consider using Greenwood's [**Raw adapter**](https://greenwoodjs.dev/docs/plugins/raw/) to inline CSS in `<style>` tags into your custom elements.
1. Full hydration support is not available yet. See [this Greenwood issue](https://github.com/ProjectEvergreen/greenwood/issues/880) to follow along with when it will land.

> See [this repo](https://github.com/thescientist13/greenwood-lit-ssr) for a full demo of isomorphic Lit SSR with SSR pages and API routes deployed to Vercel serverless functions.
Expand Down
Loading