[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_29":-5,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"routes/_store+/_readers+/email_author.$slug/route",{"_9":10,"_11":-5,"_12":-5},"book",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24},"currentUser","formToken","id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvODQyODc","title","Web Components with Lit","state","published","contactAuthorMethod","email","aboutText","

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.

","authors",[25],{"_13":26,"_27":28,"_29":30},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci84OTk1MA","name","Sandeep Kumar Patel","user",{"_31":32},"avatar",{"_33":34,"_35":36,"_37":38},"url","https://d39qdlcrvnra4b.cloudfront.net/avatars/238434/medium/avatar.jpg?1789304859","styleName","medium","exists",true,"shoppingCartId","shoppingCart",{"_13":72,"_73":74,"_75":38,"_76":77,"_78":79,"_80":81,"_82":38},"locale","en","readerTheme","light","constants",{"_70":71},"publishers",{"_66":67,"_68":69},"learnerOrganizations",[],"needsLocaleCookieSync",false,"announcements",{"_60":61,"_62":-5},"sentryEnvironment","production","sentryRelease","f72692f2e45c0c62e1437375dedddcf2717e20cd","announcement_store",{"_63":53,"_64":65},"announcement_authors","flag","text","

Kick off your book project, get started with GhostAI, get better at marketing, or spend the day doing all three! Free live workshops on Zoom. Saturday, June 27, 2026.

\n","companies",[],"universities",[],"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","no-cart","count",0,"free","updatedAt","","paymentGateway","STRIPE","cartItems",[],"loading"]

Email the Author