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
WebAssembly fulfills the long-awaited promise of web technologies: fast code, type-safe at compile time, execution in the browser, on emb...
New
PragmaticBookshelf
JavaScript is no longer to be feared or loathed—the world’s most popular and ubiquitous language has evolved into a respectable language....
New
PragmaticBookshelf
Web development is constantly changing, and you need to stay on top of your game. Discover a wide spectrum of web development techniques ...
New
CommunityNews
Microsoft’s Introduction to JavaScript video series will equip users with the basic skills to start building apps with the popular progra...
New
ManningBooks
In Modern C, Third Edition you’ll learn to harness C’s full potential using the latest tools and techniques. After a quick review of the ...
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
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
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
Kubernetes in Action, Second Edition lays out a complete introduction to container technologies and containerized applications along with...
New
ManningBooks
In Web Component Development with Modern Libraries and Tooling, you’ll learn how to build reusable web components that last well beyond t...
New

Other popular topics Top

New
PragmaticBookshelf
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
New
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
PragmaticBookshelf
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
PragmaticBookshelf
Quickly turn complex problems into simple, working solutions using functional programming, safe concurrency, and the expressive tools of ...
New