A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in Lit (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ Live weather conditions
• 📅 7-day weather forecast
• 🔍 City search functionality
• 📍 Geolocation support
• 💾 Persistent location storage
• 📱 Responsive design
• ♿ Accessible interface
• 🎨 Multi-theme support
• 🧪 Fully unit tested
• 🌐 Internationalized

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

First, follow the repo setup instructions. Then cd apps/lit and use the following commands:

npm run dev    # Start dev server (vite --port 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (vite build)
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

The weather-app.js extends LitElement and registers as <weather-app> using customElements.define(). All components are true Web Components that work in any framework.

Lit uses JavaScript tagged template literals for both HTML templates (html\`) and CSS styles (css``). This provides syntax highlighting and type safety without build-time compilation.

Static properties are defined with static properties = { _isLoading: { state: true } }. Changes to these properties automatically trigger re-renders of only the affected parts.

The shared-styles.js demonstrates Lit's CSS module system using css tagged template literals for design system consistency across components.

Each Lit component renders in its own Shadow DOM, providing true style encapsulation without CSS-in-JS runtime overhead.

Lit is a framework from Google built around Web Components. It’s minimal, modern and uses standard browser APIs rather than reinventing the wheel. Great when you want reusable components without a massive framework overhead. It’s gaining traction for design systems and apps that need native-feeling components.

Lit can feel like stepping back into the old React class component days, but actually the cohesion to web standards makes Lit pretty... lit. It's built around Web Components, which is both its greatest strength and biggest frustration. Everything is properly encapsulated and framework-agnostic, but the developer experience feels surprisingly verbose for 2025.

The weird expression syntax has caught me out a lot. Want to bind a property? Use .value="${this.temp}". A boolean attribute? ?disabled="${this.loading}". An event listener? @click="${this.handleClick}". It's functional once you memorize the symbols, but it breaks the flow when you're trying to think about business logic.

Class-based components can feel outdated after years of hooks and functional patterns. Creating a simple weather display requires extending LitElement, defining @property decorators, implementing render(), and handling lifecycle methods manually. It works, but feels like unnecessary ceremony.

The shadow DOM isolation is cool in theory - your styles can't leak, global CSS can't interfere. But in practice, it creates more problems than it solves. Want to style components consistently? Good luck getting your design system to work across shadow boundaries. Because of this, I really struggled to get the shared weather styles working across the Lit app. If you want to submit a PR to fix this, please do!

But Lit really does shine for design systems and component libraries where you need true framework-agnostic components. I did build Email Comparison in Lit, but in heindsite, I think that was a mistake!

Since the weather app is very simple, it may be helpful to see a more practical implementation of a Lit app. So, checkout:

Email Comparison - An objective comparison of privacy-respecting email providers
🐙 Get it on GitHub at github.com/Lissy93/email-comparison
🌐 View the website at email-comparison.as93.net

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.