Web Component

Frameworks come and go. The components you build on the browser's own element model don't have to.

Web Components with Lit teaches the platform first — custom elements, shadow DOM, slots, the upgrade problem, retargeted events — with no framework in sight, because Lit is a thin layer over those primitives and the layer makes more sense once you've felt the bare platform. Then it builds up Lit itself: reactive properties, the update lifecycle, templates and directives, reactive controllers, context, state management, and forms that work inside a native <form>.

One project runs through the whole book. Cinder is a small design system, published as cinder-ui. It starts in Chapter 6 as a button that does almost nothing and ends as a versioned, documented, server-renderable npm package with a React wrapper and written guidance for every other framework. Along the way you build an icon, a text field and checkbox that participate in form validation, an accessible dialog, a toast system, and a theming layer driven by design tokens.

The book is written to be read four ways. If you're new to web components, Part I teaches the platform from zero. If you're coming from React, Vue, or Angular, it shows you the parts of the browser your framework hides and where Lit's reactivity diverges from what you know. If you already ship Lit, it starts you at the patterns most Lit codebases get wrong — controllers, context, state, forms — and the delivery material that's hardest to find written down: accessibility, testing, visual regression, localization, server-side rendering, and publishing.

Every example is plain JavaScript. Lit needs no compiler and no build step to start, and the standards-only syntax — static properties, no decorators — is the version that will still run unchanged years from now. Where TypeScript changes the picture, a short callout shows the decorator equivalent, and an appendix collects all of it.

Every runnable listing in the book was actually run, in a real browser or a real terminal, before the text described what it does — including the listings that are meant to fail. Every cross-reference was checked. Every version number was verified against the live source. Where checking the code caught the first draft being wrong, the correction was left in the text.

Targets Lit 3.3.3. 36 chapters, 5 appendices, 102 figures.

You'll learn how to:

• Define custom elements and manage their lifecycle without a framework

• Use shadow DOM, slots, and CSS encapsulation deliberately

• Model reactive state with Lit's properties and update lifecycle

• Write templates, use built-in directives, and build your own

• Style and theme components with custom properties, parts, and design tokens

• Extract behavior into reactive controllers and share state with context and stores

• Build form-associated components that validate inside a native <form>

• Make components accessible: focus management, overlays, ARIA across the shadow boundary

• Test components, add visual-regression and end-to-end coverage, and wire up CI

• Localize, server-render and hydrate, and publish a component library to npm

• Consume the library from React and other frameworks

Who it's for: developers who can write modern JavaScript and have touched the DOM directly at least once. No TypeScript, no build tool, and no prior component-library experience required.

Web Components & Design Systems teaches you to build durable, framework-agnostic UI on the platform itself, through one running project: Prism DS, a genuinely real design system built up chapter by chapter — design tokens, themed components, an accessible form-control library, a component manifest, a documentation pipeline, and (in the book's second half) an MCP server that lets an AI coding agent consume your design system correctly instead of guessing at it.

You don't need prior web-components experience — Part I starts from the platform's own primitives (custom elements, shadow DOM, templates and slots). You do need to be comfortable with JavaScript and the DOM already.

What's inside:

• Custom elements, shadow DOM, and templates — not the folklore version, the current one
• Building robust, accessible, form-associated components with ElementInternals
• Design tokens with the DTCG spec and Style Dictionary
• Styling strategy: adopted stylesheets, ::part, custom states, container queries
• Testing, packaging, versioning, and publishing web components for real consumers
• Scoped custom element registries — and the exact collision bug they fix
• Design-system process: adoption, governance, and what teams actually measure (and don't)
• Part VI: agent-assisted workflows, MCP servers, and evaluating AI-generated component code

458 pages. Twenty-seven chapters plus three reference appendices. Every runnable example ships as a companion code download.