Lit

Lit

Simple library for building fast, lightweight web components.

Quick Start

import { LitElement, html, css } from 'lit'
class MyElement extends LitElement {
  static properties = { name: { type: String } }
  static styles = css`h1 { color: blue; }`
  render() { return html`<h1>Hello, ${this.name}!</h1>` }
}
customElements.define('my-element', MyElement)

Reactive Properties & Lifecycle

static properties = { count: { type: Number } }
constructor() { super(); this.count = 0 }
connectedCallback() { super.connectedCallback(); console.log('mounted') }
updated(changedProperties) { if (changedProperties.has('count')) console.log('count changed') }

When to Use

• Framework-agnostic components
• Design system elements
• Micro-frontend architectures
• Shadow DOM encapsulation

Validation

1. Custom elements register and render
2. Properties update reactively
3. Shadow DOM isolates styles