Web Component Development with Modern Libraries and Tooling

you own this product
Build, test, and scale framework-agnostic web components
  • MEAP began May 2026
  • Last updated May 2026
  • Publication in Fall 2026 (estimated)
  • ISBN 9781633433977
  • 300 pages (estimated)
  • printed in black & white

pro $24.99 per month

  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose one free eBook per month to keep
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime

lite $19.99 per month

  • access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more


Look inside
Development teams increasingly face pressure to future-proof their code—and that makes framework lock-in a serious liability. In Web Component Development with Modern Libraries and Tooling, you’ll learn how to build reusable web components that last well beyond the next library update. In this practical and easy-to-follow guide, author Mark Volkmann shows you how Web components deliver something no JavaScript framework can match: true portability. Built on W3C standards and supported natively by every modern browser, web components let you build UI elements once and reuse them anywhere, in React, Vue, Angular, Svelte, plain HTML, or even Markdown documents. No framework downloads and no immovable dependencies.

The early chapters introduce Web Awesome, one of the most popular web component libraries. Using Web Awesome, you’ll build a UI complete with color-changing radio buttons, animated progress indicators, and more. Then, as you progress into the middle chapters,, you’ll dive into creating your own web components in vanilla JavaScript, and discover 15 essential best practices that separate professional-grade components from ones that won’t stand the test of time.

Once you’ve learned how web components work, you’ll get a leg up with libraries like Google’s Lit, Microsoft’s FAST, Ionic’s Stencil, and wrec—a library created author Mark Volkmann. You’ll then integrate components with Angular, React, Solid, Svelte, and Vue, apply professional tooling for documentation, testing, and demonstration, and tackle server-side rendering. Finally, finish up with solid advice on utilizing LLMs to implement web components and use them in web applications.

In each chapter, you’ll work on progressively more sophisticated example components including hello-world, google-button, radio-group, sortable-table, and traffic-light. Every example is chosen to illustrate concepts in a flexible way you can adapt to your own real-world projects. And unlike scattered blog posts and lightweight video tutorials, this substantial book provides both a clear structured learning path and a valuable reference for your future projects.

what's inside

  • Implement vanilla web components
  • Augment development with Custom Elements Manifest, Storybook, and Playwright
  • Generate web component code with AI coding agents

about the reader

For working web developers who know basic HTML, CSS, and JavaScript.

about the author

Mark Volkmann is a Partner and Distinguished Engineer at Object Computing, Inc. (OCI) in St. Louis where he provides software consulting and training. He has assisted many companies with JavaScript, Node.js, Svelte, React, Vue, Angular, Swift/SwiftUI, and more. He has also authored Svelte and Sapper in Action, and Server-Driven Web Apps with htmx.
choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime
  • renews annually, pause or cancel renewal anytime
  • Web Component Development with Modern Libraries and Tooling ebook for free
choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • renews monthly, pause or cancel renewal anytime
  • renews annually, pause or cancel renewal anytime
  • Web Component Development with Modern Libraries and Tooling ebook for free