Lit Web Components with Astro (Context, SSR)

I am in the process of building web components using Lit. I wanted to test the web components using the Astro framework, so I added the @astrojs/lit integration. However, to my surprise, it did not work.

I use @lit-labs/context to manage the state of the application, and it turned out that SSR is not yet supported. This caused the following error:

this.host.addEventListener is not a function

Astro has the client:only directive that skips SSR for the component. I added it to the component, but it did not work.

Here is an example of what I tried to do:

---
import "@example/components";
---

<example-card-component client:only="lit"></example-card-component>

This method generated another error.

Unable to find matching import statement for client:only component

A client:only component must match an import statement, either the default export or a named exported, and can't be derived from a variable in the frontmatter.

Fortunately, it turned out that the solution is simple. According to the message, the import must match the component name. I changed the import to the following, and it worked.

---
import { ExampleCardComponent } from "@example/components";
---

<ExampleCardComponent client:only="lit" />

No more errors!