ManningBooks

ManningBooks

Devtalk Sponsor

Web Component Development with Modern Libraries and Tooling (Manning)

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.

Mark Volkmann

If your team has ever rebuilt the same UI component for React, then again for Vue, then again for whatever comes next, this book will feel very relevant. Web components offer a standards-based way to build UI pieces that work across frameworks, in plain HTML, and even in places like Markdown documents. They’re supported by modern browsers and aren’t tied to a single frontend ecosystem.

Mark Volkmann takes a practical route through the subject. The book starts with why web components are worth learning, then moves quickly into building and using them.

You’ll work with examples such as:

  • hello-world

  • google-button

  • radio-group

  • sortable-table

  • traffic-light

The early chapters introduce Web Awesome, the successor to Shoelace, and show how to use prebuilt components for inputs, dialogs, drawers, progress indicators, ratings, and more. From there, the book digs into vanilla web components: custom elements, attributes and properties, lifecycle callbacks, Shadow DOM, styling, form participation, and shared state.

There’s also a full chapter on best practices, based on the web.dev custom elements checklist. It covers details that matter once components move beyond demos: reflecting primitive properties, avoiding rich data in attributes, using slots well, respecting the hidden attribute, dispatching events correctly, and more.

Later chapters cover the libraries and tools many teams use in production:

  • Lit

  • Stencil

  • FAST

  • wrec

  • JavaScript decorators

  • Custom Elements Manifest

  • Storybook

  • Playwright

  • server-side rendering

  • AI-assisted component generation

The book also shows how to use web components inside Angular, React, Solid, Svelte, and Vue, which is especially useful if you’re trying to share a design system across multiple apps.

Mark brings a lot of practical experience to this topic. He’s a Partner and Distinguished Engineer at Object Computing, Inc., and has worked with JavaScript, Node.js, Svelte, React, Vue, Angular, Swift/SwiftUI, and more. He’s also the author of Svelte and Sapper in Action and Server-Driven Web Apps with htmx.

This book is aimed at working web developers who know the basics of HTML, CSS, and JavaScript and want a structured path into web components instead of piecing everything together from scattered posts and examples.


Don’t forget you can get 45% off with your Devtalk discount! Just use the coupon code “devtalk.com” at checkout :+1:

Most Liked

peterchancc

peterchancc

Finally. I have been waiting for a good book on web components. :

Where Next?

Popular Frontend topics Top

PragmaticBookshelf
It’s hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for i...
New
PragmaticBookshelf
The Elm language offers safer applications and fewer errors that come with functional programming, while being type-safe and easy to use....
New
chaptuck
A fun/silly website I used to learn Flexbox is https://flexboxfroggy.com/. It is surprisingly helpful for learning all the pieces of flex...
New
ManningBooks
Math for Frontend Web Dev reveals the mathematical principles behind beautiful, accessible, and functional web designs, giving you the sk...
New
ManningBooks
For over fifteen years, The Well-Grounded Rubyist has taught beginner and developing Ruby programmers the veteran secrets of Ruby. This n...
New
ManningBooks
In Fabulous Adventures in Data Structures and Algorithms, language designer and C# legend Eric Lippert explores exciting, esoteric, and e...
New
ManningBooks
Latency: Reduce delay in software systems shows you how to troubleshoot latency in existing applications and create low-latency systems f...
New
pragdave
New code becomes cheaper every day, but maintenance does not. Bugs are faster, subtler, and harder to catch, and dealing with them is inc...
New
ManningBooks
Vanilla Web is your guide to building serious web applications using the tools built right into the browser. You’ll learn to use “plain v...
New
ManningBooks
Architecting Accessibility shows you how to build web applications that work for everyone. Rather than treating accessibility as a checkl...
New

Other popular topics Top

AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
AstonJ
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
AstonJ
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
PragmaticBookshelf
Build modern server-driven web applications using htmx. Whatever programming language you use, you’ll write less (and cleaner) code. ...
New
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New
mindriot
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New
xiji2646-netizen
Woke up to this today: Claude Code’s complete source code exposed via npm source map. Not a snippet. All 512,000 lines. 1,900 TypeScript ...
New