@astrojs/ lit

This Astro integration enables server-side rendering and client-side hydration for your Lit custom elements.

Installation

Section titled Installation

Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

To install @astrojs/lit, run the following from your project directory and follow the prompts:

npm

npx astro add lit

pnpm

pnpm astro add lit

Yarn

yarn astro add lit

If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

Manual Install

Section titled Manual Install

First, install the @astrojs/lit package:

npm

npm install @astrojs/lit

pnpm

pnpm add @astrojs/lit

Yarn

yarn add @astrojs/lit

Most package managers will install associated peer dependencies as well. If you see a “Cannot find package ‘lit’” (or similar) warning when you start up Astro, you’ll need to install lit and @webcomponents/template-shadowroot:

npm

npm install lit @webcomponents/template-shadowroot

pnpm

pnpm add lit @webcomponents/template-shadowroot

Yarn

yarn add lit @webcomponents/template-shadowroot

Then, apply the integration to your astro.config.* file using the integrations property:

astro.config.mjs

import { defineConfig } from 'astro/config';
import lit from '@astrojs/lit';

export default defineConfig({
  // ...
  integrations: [lit()],
});

Getting started

Section 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

Writing and importing a Lit component in Astro looks like this:

src/components/my-element.js

import { LitElement, html } from 'lit';

export class MyElement extends LitElement {
  render() {
    return html`<p>Hello world! From my-element</p>`;
  }
}

customElements.define('my-element', MyElement);

Now, the component is ready to be imported via the Astro frontmatter:

src/pages/index.astro

---
import { MyElement } from '../components/my-element.js';
---

<MyElement />

Note

Lit requires browser globals such as HTMLElement and customElements to 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.

Experimental Decorators

Section titled Experimental Decorators

To use experimental decorators in Lit, add the following to your tsconfig.json file:

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
  }
}

This allows you to use experimental decorators such as @customElement and @state to register a custom element and define a state property in your Lit component:

src/components/my-element.ts

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("my-element")
export class MyElement extends LitElement {
    @state() name = "my-element";

    override render() {
        return html`<p>Hello world! From ${this.name}</p>`;
    }
}

Polyfills & Hydration

Section 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:load, client:idle and client:visible as you can with other libraries that Astro supports.

---
import { MyElement } from '../components/my-element.js';
---

<MyElement client:visible />

The above will only load the element’s JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.

Troubleshooting

Section 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 globals

Section 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 window, document, and location.

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:

astro.config.mjs

  import { defineConfig } from 'astro/config';
  import vue from '@astrojs/vue';
  import lit from '@astrojs/lit';

  export default defineConfig({
    integrations: [vue(), lit()]
    integrations: [lit(), vue()]
  });

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 managers

Section 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 .npmrc file:

.npmrc

public-hoist-pattern[]=*lit*

Limitations

Section titled Limitations

• The Lit integration is powered by @lit-labs/ssr which has some limitations. See their limitations documentation to learn more.

• Astro does not support IntelliSense for Lit components.

Mais integrações

Frameworks de UI

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores de SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Outras integrações

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind