This Astro integration enables server-side rendering and client-side hydration for your Lit custom elements.
InstallationSection titled Installation
There are two ways to add integrations to your project. Let’s try the most convenient option first!
Section titled astro add command
astro add command
Astro includes a CLI tool for adding first party integrations:
astro add. This command will:
- (Optionally) Install all necessary dependencies and peer dependencies
- (Also optionally) Update your
astro.config.*file to apply this integration
@astrojs/lit, run the following from your project directory and follow the prompts:
If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.
Install dependencies manuallySection titled Install dependencies manually
First, install the
@astrojs/lit integration like so:
Most package managers will install associated peer dependencies as well. Still, if you see a “Cannot find package ‘lit’” (or similar) warning when you start up Astro, you’ll need to install
Now, apply this integration to your
astro.config.* file using the
Getting startedSection titled Getting started
To use your first Lit component in Astro, head to our UI framework documentation. This explains:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🤝 opportunities to mix and nest frameworks together
However, there’s a key difference with Lit custom elements over conventional components: you can use the element tag name directly.
Astro needs to know which tag is associated with which component script. We expose this through exporting a
tagName variable from the component script. It looks like this:
Note that exporting the
tagNameis required if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
In your Astro template import this component as a side-effect and use the element.
Note that Lit requires browser globals such as
customElementsto be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You might run into libraries that work incorrectly because of this.
Polyfills & HydrationSection titled Polyfills & Hydration
The renderer automatically handles adding appropriate polyfills for support in browsers that don’t have Declarative Shadow DOM. The polyfill is about 1.5kB. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
Hydration is also handled automatically. You can use the same hydration directives such as
client:visible as you can with other libraries that Astro supports.
TroubleshootingSection titled Troubleshooting
For help, check out the
#support channel on Discord. Our friendly Support Squad members are here to help!
You can also check our Astro Integration Documentation for more on integrations.
Common issues are listed below:
Browser globalsSection titled Browser globals
The Lit integration’s SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes
These globals can interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.
Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
The correct order might be different depending on the underlying cause of the problem. This is not guaranteed to fix every issue however, and some libraries cannot be used if you are using the Lit integration because of this.
Strict package managersSection titled Strict package managers
When using a strict package manager like
pnpm, you may get an error such as
ReferenceError: module is not defined when running your site. To fix this, hoist Lit dependencies with an
LimitationsSection titled Limitations
The Lit integration is powered by
@lit-labs/ssr which has some limitations. See their limitations documentation to learn more.
ContributingSection titled Contributing
This package is maintained by Astro’s Core team. You’re welcome to submit an issue or PR!