---
name: "lit-web-components-reactive"
description: "Build fast, standards-based Web Components with reactive properties and scoped Shadow DOM."
metadata:
  author: "Lit"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create lit web component"
  - "lit reactive property"
  - "scoped styles shadow dom lit"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Lit Lightweight Reactive Web Components & Shadow DOM

Develops custom elements with Lit: extending LitElement, defining reactive properties with @property decorator, html tagged template literals, scoped CSS with css tagged templates, and cross-framework integration.

## When to Invoke
Invoke this skill whenever you need to:
- create lit web component
- lit reactive property
- scoped styles shadow dom lit

## Execution SOP & Rules
1. Define custom element: @customElement('my-element') export class MyElement extends LitElement { ... }.
2. Declare reactive properties: @property({ type: String }) name = 'World';.
3. Render template: render() { return html`<h1>Hello, ${this.name}!</h1>`; }.
4. Style component: static styles = css`:host { display: block; padding: 16px; }`.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.