7373d61cdc
* feat: pass all slots to renderers * refactor: pass `slots` as top-level props * test: add named slot test for frameworks * fix: nested hydration, slots that are not initially rendered * test: add nested-recursive e2e test * fix: render unmatched custom element children * chore: update lockfile * fix: unrendered slots for client:only * fix(lit): ensure lit integration uses new slots API * chore: add changeset * chore: add changesets * fix: lit slots * feat: convert dash-case or snake_case slots to camelCase for JSX * feat: remove tmpl special logic * test: add slot components-in-markdown test * refactor: prefer Object.entries.map() to for/of loop Co-authored-by: Nate Moore <nate@astro.build> |
||
---|---|---|
.. | ||
src | ||
test | ||
.gitignore | ||
CHANGELOG.md | ||
client-shim.js | ||
client-shim.min.js | ||
hydration-support.js | ||
package.json | ||
README.md | ||
server-shim.js | ||
server.js | ||
tsconfig.json |
@astrojs/lit 🔥
This Astro integration enables server-side rendering and client-side hydration for your Lit custom elements.
Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
(experimental) 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
To install @astrojs/lit
, run the following from your project directory and follow the prompts:
# Using NPM
npx astro add lit
# Using Yarn
yarn astro add lit
# Using PNPM
pnpx astro add lit
If you run into any hiccups, feel free to log an issue on our GitHub and try the manual installation steps below.
Install dependencies manually
First, install the @astrojs/lit
integration like so:
npm install @astrojs/lit
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 lit
and @webcomponents/template-shadowroot
:
npm install lit @webcomponents/template-shadowroot
Now, apply this integration to your astro.config.*
file using the integrations
property:
astro.config.mjs
import lit from '@astrojs/lit';
export default {
// ...
integrations: [lit()],
}
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:
src/components/my-element.js
import { LitElement, html } from 'lit';
export const tagName = 'my-element';
class MyElement extends LitElement {
render() {
return html` <p>Hello world! From my-element</p> `;
}
}
customElements.define(tagName, MyElement);
Note that exporting the
tagName
is 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.
src/pages/index.astro
---
import '../components/my-element.js';
---
<my-element></my-element>
Note that Lit requires browser globals such as
HTMLElement
andcustomElements
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.
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 '../components/my-element.js';
---
<my-element 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.
More documentation
Check our Astro Integration Documentation for more on integrations.