Table of Contents
Part I
- First Steps
- 1 Framework without a Framework
- 2 Your First Web Component
- 3 Making Your Component Reusable
- 4 The Component Lifecycle
- 5 Building Better Web Apps with Modules
Part II Ways to Improve Your Component Workflow
- 6 Managing Markup
- 7 Templating Content with HTML
- 8 The Shadow DOM
- 9 Shadow CSS
- 10 Shadow CSS Challenges
Part III Bringing Components Together
- 11 A Real-World UI Component
- 12 Bundling and Supporting Older Browsers
- 13 Testing Components
- 14 Events and Application Data Flow
- 15 Hiding Complexity
Overview
Ben Farrell's book "Web Components in Action" is dedicated to native web components as a standalone technology for creating reusable interface elements without relying on popular JavaScript frameworks. The author systematically demonstrates how the modern browser stack (Custom Elements, Shadow DOM, HTML Templates, and ES modules) can be used to build a full-fledged web application.
In the first part of the book, the reader gets acquainted with the basic principles of web components: creating your own element, managing its lifecycle, reusability, and modular architecture. The author emphasizes that web components are not an abstract concept but a practical tool available today in most browsers.
The second part focuses on the internal structure of components. It covers ways to manage markup, content templating, working with the Shadow DOM, and CSS isolation. Separate chapters are devoted to the problems and limitations of the shadow model, allowing readers to look at the technology from both a positive and a critical perspective.
The third part of the book concentrates on building more complex solutions: combining components into a single interface, organizing events and data flows, testing, and supporting older browsers. Ultimately, the author step by step arrives at creating a real user interface, hiding internal complexity behind carefully designed components.
The book is practical in nature and structured so that examples gradually become more complex and evolve from chapter to chapter, forming a coherent architecture. This makes it useful for developers who want to gain a deeper understanding of the native capabilities of the web platform and consciously evaluate web components as an alternative or supplement to frameworks.
My Take
A book about web components and their use. Considering I'm in the camp of people who think this branch of web development is somewhat of a dead end and unpromising because I've been working on projects for about 10 years where SEO optimization is important, there are surely people who are ready to build every other project on web components. So I read this book with skepticism, although I was interested in getting a closer look at native web components without using JS frameworks. Definitely one of the book's strengths is how, from chapter to chapter, the author improves his work and ends up with a quite complete and interesting result.
