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
The Elm language offers safer applications and fewer errors that come with functional programming, while being type-safe and easy to use....
New
PragmaticBookshelf
Dive right into React by defining components, the basic building blocks of a React application. Ludovico Fischer @ludofischer Edite...
New
AstonJ
If you know of any good learning resources for Svelte please post them here :smiley: Here’s some to get us started: The official tutori...
New
New
First poster: AstonJ
Welcome to Learn CSS! This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modul...
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
PragmaticBookshelf
Combine Rails 7, TypeScript, Turbo, Stimulus, and React to build rich user interaction into your websites using the best of both server a...
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
Erlang and OTP in Action teaches you the concepts of concurrent programming and the use of Erlang’s message-passing model. It walks you t...
New
ManningBooks
As a developer, having a command of the principles, patterns, and vocabulary of software architecture empowers you to contribute meaningf...
New

Other popular topics Top

PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
DevotionGeo
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
siddhant3030
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor? Also, I want to know if someone is using it for program...
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29994 760
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New