Lit Islands

Web Components mit Lit - standardbasierte, wiederverwendbare Components.

Überblick

Bundle-Größe: 7-8kb (Lit Runtime)

Lit baut auf Web Components Standards für maximale Wiederverwendbarkeit.

Grundstruktur

// islands/counter.js
import { LitElement, html } from 'lit';

class CounterComponent extends LitElement {
  static properties = {
    title: { type: String },
    count: { type: Number }
  };

  // Disable Shadow DOM for Tailwind support
  createRenderRoot() {
    return this;
  }

  constructor() {
    super();
    this.title = 'Counter';
    this.count = 0;
  }

  increment() {
    this.count++;
  }

  render() {
    return html`
      <div class="p-6 bg-white rounded-lg border">
        <h3 class="text-lg font-semibold mb-4">${this.title}</h3>
        <p class="mb-2">Count: ${this.count}</p>
        <p class="mb-4 text-gray-600">Doubled: ${this.count * 2}</p>
        <div class="flex gap-2">
          <button @click=${() => this.count--} class="px-4 py-2 bg-gray-600 text-white rounded">-</button>
          <button @click=${this.increment} class="px-4 py-2 bg-blue-600 text-white rounded">+</button>
        </div>
      </div>
    `;
  }
}

// Unique name for HMR
const timestamp = Date.now();
const uniqueName = `counter-component-${timestamp}`;

if (!customElements.get(uniqueName)) {
  customElements.define(uniqueName, CounterComponent);
}

export default class CounterIsland {
  constructor(element, props = {}) {
    this.element = element;
    const component = document.createElement(uniqueName);
    Object.assign(component, props);
    element.appendChild(component);
    this.component = component;
  }

  destroy() {
    this.component?.remove();
  }
}

Kernkonzepte

Reaktive Properties

static properties = {
  title: { type: String },
  count: { type: Number },
  items: { type: Array }
};

Lifecycle

connectedCallback() {
  super.connectedCallback();
  // Component hinzugefügt
}

disconnectedCallback() {
  super.disconnectedCallback();
  // Component entfernt
}

updated(changedProperties) {
  // Nach Update
  if (changedProperties.has('count')) {
    console.log('Count changed');
  }
}

Templates

render() {
  return html`
    <div>
      <h3>${this.title}</h3>
      <button @click=${this.increment}>
        Count: ${this.count}
      </button>
    </div>
  `;
}

Vorteile

• ✅ Web Components Standard - Standardkonform
• ✅ Wiederverwendbarkeit - Auch außerhalb des CMS nutzbar
• ✅ Moderne API - Lit Template System
• ✅ Mittlere Bundle-Größe - 7-8kb

Nachteile

• ❌ Shadow DOM - Tailwind erfordert createRenderRoot()
• ❌ Verbosity - Mehr Code als Svelte
• ❌ Bundle-Größe - Größer als Svelte/Preact

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering