Agentic Web Development

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.

An AI agent on your website works the way a screen reader does: it reads the page and guesses which button to press. WebMCP is the alternative. Your page hands the agent a list of things it can do (search this catalog, add this to the cart, set this address), described in your words and running your code, in the tab the visitor already has open.

WebMCP in Practice is a short, hands-on guide for web developers. You build one small shop, Kiosk, and every runnable listing was run before it was written about. You start with a working tool from a few HTML attributes on a form you already have. Then you register tools in JavaScript, write descriptions and errors an agent can act on, make tools appear and disappear as the page changes, and test them.

The part that matters most: a tool runs as the logged-in user, with no API key and no sandbox in between. Chapter 6 shows a prompt-injection attack on the book's own shop, step by step. Chapter 7 covers the annotations the platform offers, what they do not enforce, and how your page can ask the shopper before a consequential tool runs.

WebMCP is a W3C Community Group draft with one implementation, behind an origin trial in Chrome (149 through 156) and a matching trial in Edge. This book is for someone who wants to build on it anyway, with their eyes open. Every claim that depends on a version carries the version and the date it was checked. The places where the shipping code disagrees with the spec are listed in an appendix. Where a number matters, the book gives you the command to check it yourself.

What you'll learn

• Turn an ordinary HTML form into a WebMCP tool with a few attributes, and see it in Chrome DevTools.
• Register tools in JavaScript, and write descriptions, schemas, return values and errors an agent can act on.
• Make tools appear and disappear as the page changes, so an agent is only offered what makes sense right now.
• See how a poisoned product review can steer an agent, and how to narrow a tool so it cannot.
• Use the three annotations, and ask the shopper before a consequential tool runs.
• Test tools against the real platform, in jsdom and in a real Chrome, instead of a mock that hides failures.
• Ship it: feature detection, origin-trial tokens, the polyfill, keeping the site working with every tool off, and what production adds.
• Tell what is settled in this API from what is still open.

Who this book is for

A web developer who knows the DOM and can read JavaScript. You do not need to have used the Model Context Protocol or built an agent. You do not need an AI account or an API key, and no chapter calls a model. A skeptical reader is welcome: the book argues its case and shows the costs.