Demo ToDo app using pure vanilla Web Components, with:
- State management in the root
- Routing via History API
<form>
for input- Nested CSS and container queries
- Nested components:
todo-list
andtodo-form
with input/output events - LocalStorage "backend" with simulated 400ms delay
- Uses Baseline 2025 features: container queries, declarative shadow DOM, etc.
- Add, edit, delete todos
- Routing:
/
(list),/add
,/edit?id=...
- All code is modern, no framework, just native browser features
Open index.html
directly in a modern browser (Chrome, Edge, Firefox, Safari 2025+).
index.html
— Entry pointapp-root.js
— Application root, routing, statetodo-list.js
— List componenttodo-form.js
— Form component
- Nested selectors
- Container queries (works in Baseline 2025)
- CSS variables
- Data is stored in LocalStorage.
- Fake backend delays (400ms) for all mutations.