@useavalon/lit

Lit integration for Avalon. Server-side rendering and client-side hydration for Lit web components as islands.

Features

• Lit 3 with decorators and Shadow DOM
• Server-side rendering via @lit-labs/ssr
• Declarative shadow DOM for SSR
• All hydration strategies (on:client, on:visible, on:idle, on:interaction)

Usage

// components/MyButton.lit.ts
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('my-button')
export class MyButton extends LitElement {
  @property() label = 'Click me';

  static styles = css`
    button { background: #324FFF; color: white; padding: 8px 16px; border: none; border-radius: 4px; }
  `;

  render() {
    return html`<button>${this.label}</button>`;
  }
}

// pages/index.tsx
import MyButton from '../components/MyButton.lit.ts';

export default function Home() {
  return <MyButton island={{ condition: 'on:visible' }} label="Click me" />;
}

Links

• Documentation
• GitHub

License

MIT