lunx.docs
DocsFrameworksLit

Lit Adapter

Standard Web Components with Lit — reactive properties, declarative templates, scoped styles via Shadow DOM, and zero framework dependencies at runtime.

Lit 3 · Web Components · Shadow DOM
Standard Web Components

Lit outputs spec-compliant custom elements — embeddable in React, Vue, Svelte, or plain HTML.

Shadow DOM scoping

Styles are encapsulated in Shadow DOM — no class collisions, no CSS leakage.

Reactive properties

@property() decorator creates reactive attributes. Property changes trigger efficient re-renders.

html`` templates

Tagged template literals with efficient diffing — updates only changed DOM nodes.

Custom elements

customElements.define() registers your component as a native HTML element.

~5KB runtime

Lit's entire reactive system is ~5KB. No virtual DOM — direct DOM updates via tagged templates.

Setup

bash
npm create lunx-dev@latest my-lit-app -- --framework lit --ts
cd my-lit-app && npm install && npm run dev

Lit component

typescriptsrc/components/my-counter.ts
import { LitElement, html, css } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'

@customElement('my-counter')
export class MyCounter extends LitElement {
  // External attribute — reflected to HTML attribute
  @property({ type: Number }) initialValue = 0

  // Internal reactive state
  @state() private count = 0

  connectedCallback() {
    super.connectedCallback()
    this.count = this.initialValue
  }

  static styles = css`
    :host { display: block; padding: 1rem; }
    .count { font-size: 2rem; font-weight: bold; }
    button { padding: 0.5rem 1rem; margin: 0.25rem; border-radius: 8px; cursor: pointer; }
  `

  private increment() { this.count++ }
  private decrement() { this.count-- }

  render() {
    return html`
      <div>
        <p class="count">${this.count}</p>
        <button @click=${this.decrement}>−</button>
        <button @click=${this.increment}>+</button>
        <button @click=${() => this.count = this.initialValue}>Reset</button>
      </div>
    `
  }
}

Using in HTML or any framework

html
<!-- Plain HTML — works anywhere -->
<my-counter initial-value="5"></my-counter>

<!-- React (with @lit/react wrapper) -->
<!-- const Counter = createComponent({ react: React, tagName: 'my-counter', elementClass: MyCounter }) -->

<!-- Vue -->
<my-counter :initial-value="startCount" />
Design systems with Lit
Lit is ideal for building cross-framework design systems. Define your UI components once as standard custom elements and use them in any frontend framework without adapters or wrappers. Lunx handles TypeScript compilation and bundling with full decorator support.
PreviousPreact AdapterNextAnalog Adapter