From f7c1c93fe5193b58c369a55240b72eb74903023e Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 2 Dec 2024 16:43:27 -0500 Subject: [PATCH 1/2] document native HTMLElement caveat when using Lit SSR --- packages/plugin-renderer-lit/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md index d14217df2..7c20be278 100644 --- a/packages/plugin-renderer-lit/README.md +++ b/packages/plugin-renderer-lit/README.md @@ -41,6 +41,7 @@ $ pnpm add -D @greenwood/plugin-renderer-lit 1. Please familiarize yourself with some of the [caveats](https://lit.dev/docs/ssr/overview/#library-status) called out in the Lit docs, like: - 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). +1. Lit SSR does [not support native `HTMLElement`](https://github.com/lit/lit/discussions/2092) so you will need to use `LitElement` as your base class in all instances. 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. 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. From fc64924d008b45f2827cfa181179c3e53341bb5f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 13 Dec 2024 12:06:44 -0500 Subject: [PATCH 2/2] flesh out additional caveats --- packages/plugin-renderer-lit/README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md index 7c20be278..1ae687bb9 100644 --- a/packages/plugin-renderer-lit/README.md +++ b/packages/plugin-renderer-lit/README.md @@ -36,14 +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). -1. Lit SSR does [not support native `HTMLElement`](https://github.com/lit/lit/discussions/2092) so you will need to use `LitElement` as your base class in all instances. + - 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 `