Learn LIT with Real Code Examples

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-counter')
export class LitCounter extends LitElement {
    @state() count = 0;
    @state() isDark = false;

    static styles = css`
        .dark-theme { background-color: #222; color: #eee; }
        .light-theme { background-color: #fff; color: #000; }
    `;

    render() {
        return html`
        <div class=${this.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: ${this.count}</h2>
        <div>
        <button @click=${() => this.count++}>+</button>
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count = 0}>Reset</button>
        </div>
        <button @click=${() => this.isDark = !this.isDark}>Switch to ${this.isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
        `;
    }
}

A basic LitElement counter component with dark/light theme toggle.

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-step-counter')
export class LitStepCounter extends LitElement {
    @state() count = 0;
    step = 2;
    render() {
        return html`<div>
        <h2>Counter: ${this.count}</h2>
        <button @click=${() => this.count += this.step}>+</button>
        <button @click=${() => this.count -= this.step}>-</button>
        <button @click=${() => this.count = 0}>Reset</button>
        </div>`;
    }
}

Counter increments/decrements by a specified step value.

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-max-counter')
export class LitMaxCounter extends LitElement {
    @state() count = 0;
    max = 5;
    render() {
        return html`<div>
        <h2>Counter: ${this.count}</h2>
        <button @click=${() => this.count < this.max ? this.count++ : null}>+</button>
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count = 0}>Reset</button>
        </div>`;
    }
}

Stops incrementing after a maximum count is reached.

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-auto-reset-counter')
export class LitAutoResetCounter extends LitElement {
    @state() count = 0;
    threshold = 10;
    render() {
        return html`<div>
        <h2>Counter: ${this.count}</h2>
        <button @click=${() => { this.count = (this.count + 1 > this.threshold) ? 0 : this.count + 1; }}>+</button>
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count = 0}>Reset</button>
        </div>`;
    }
}

Automatically resets when counter exceeds threshold.

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-history-counter')
export class LitHistoryCounter extends LitElement {
    @state() count = 0;
    @state() history = [];
    render() {
        return html`<div>
        <h2>Counter: ${this.count}</h2>
        <div>History: ${this.history.join(', ')}</div>
        <button @click=${() => { this.count++; this.history = [...this.history, 'Increment']; }}>+</button>
        <button @click=${() => { this.count--; this.history = [...this.history, 'Decrement']; }}>-</button>
        <button @click=${() => { this.count = 0; this.history = [...this.history, 'Reset']; }}>Reset</button>
        </div>`;
    }
}

Tracks increment/decrement history.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-dark-counter')
export class LitDarkCounter extends LitElement {
    @state() isDark = false;
    static styles = css`.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}`;
    render() {
        return html`<div class=${this.isDark?'dark-theme':'light-theme'}>
        <h2>Counter: 0</h2>
        <button @click=${() => this.isDark = !this.isDark}>Toggle Theme</button>
        </div>`;
    }
}

Static counter with only dark/light theme toggle.

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-auto-increment-counter')
export class LitAutoIncrementCounter extends LitElement {
    @state() count = 0;
    connectedCallback() { super.connectedCallback(); this.interval = setInterval(() => this.count++, 1000); }
    disconnectedCallback() { clearInterval(this.interval); super.disconnectedCallback(); }
    render() { return html`<div><h2>Counter: ${this.count}</h2></div>`; }
}

Automatically increments counter every second.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-conditional-theme-counter')
export class LitConditionalThemeCounter extends LitElement {
    @state() count = 0;
    static styles = css`.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}`;
    render() {
        const isDark = this.count % 2 === 0;
        return html`<div class=${isDark?'dark-theme':'light-theme'}>
        <h2>Counter: ${this.count}</h2>
        <button @click=${() => this.count++}>+</button>
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count=0}>Reset</button>
        </div>`;
    }
}

Theme changes automatically based on even/odd counter value.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-full-counter')
export class LitFullCounter extends LitElement {
    @state() count = 0;
    @state() history = [];
    @state() isDark = false;
    step = 2;
    max = 10;
    connectedCallback() { super.connectedCallback(); this.interval = setInterval(()=>{ let c=this.count+this.step; if(c>this.max)c=0; this.count=c; this.history=[...this.history,'Auto Increment']; },1000); }
    disconnectedCallback() { clearInterval(this.interval); super.disconnectedCallback(); }
    static styles = css`.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}`;
    render() { return html`<div class=${this.isDark?'dark-theme':'light-theme'}>
    <h2>Counter: ${this.count}</h2>
    <div>History: ${this.history.join(', ')}</div>
    <button @click=${()=>{ this.count+=this.step; this.history=[...this.history,'Increment']; }}>+</button>
    <button @click=${()=>{ this.count-=this.step; this.history=[...this.history,'Decrement']; }}>-</button>
    <button @click=${()=>{ this.count=0; this.history=[...this.history,'Reset']; }}>Reset</button>
    <button @click=${()=>this.isDark=!this.isDark}>Toggle Theme</button>
</div>`; }
}

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.