Leanpub Header

Skip to main content
Go to Leanpub.com

Web Components Handson

Ten Accessible, Tested Components Built with Lit

Web Components Handson
This book is 100% completeLast updated on 2026-10-03
Sandeep Kumar Patel

Tabs are easy until someone presses a key. Build ten web components hard enough to expose the real problems: focus, forms, keyboard models, virtualization and pointer geometry. Every one is built with Lit, tested in a real browser, and accessible by construction. Read the concept, build the component, run the tests, then try the exercises and compare with tested solutions.

Minimum price

$7.00

$9.00

You pay

Author earns

$

Also available for 1 book credit with a Reader Membership

Buying multiple copies for your team? See below for a discount!

PDF
EPUB
About

About

About the Book

Web Components Handson teaches web components by building ten of the hardest ones with Lit 3: tabs, dialogs and popovers, form-associated inputs, a combobox, a date range picker, a virtualized data table, a tree view, a carousel, a multi-step stepper and an image cropper. Each is a standalone package with its own tests and demo page, built on one shared set of design tokens.

The book explains each concept before the code, builds the component step by step, and ends every chapter with its styling API, accessibility behavior, real test output and the mistakes to avoid. Every listing is pasted from the real package files, and the tests pass against them: 270 in the chapters, plus tested solutions to all 55 exercises in Appendix E. Appendices cover token naming, packaging for npm, using the components in frameworks and an accessibility checklist, followed by a glossary and an index.

It is written for front-end developers who already know JavaScript or TypeScript. It is not an introduction to web components. The code was tested with Lit 3.3.3, in Google Chrome, and the components are browser only.

Share this book

Categories

Web Development

Feedback

Email the Author

Team Discounts

Team Discounts

Get a team discount on this book!

  • Up to 3 members

    Minimum price
    $17.00
    Suggested price
    $22.00

  • Up to 5 members

    Minimum price
    $28.00
    Suggested price
    $36.00

  • Up to 10 members

    Minimum price
    $49.00
    Suggested price
    $63.00

  • Up to 15 members

    Minimum price
    $70.00
    Suggested price
    $90.00

  • Up to 25 members

    Minimum price
    $105
    Suggested price
    $135

Bundle

Bundles that include this book

Author

About the Author

Sandeep Kumar Patel

Sandeep Kumar Patel is a senior web developer and founder of www.tutorialsavvy.com, a widely- read programming blog since 2012. He has more than six years of experience in object-oriented JavaScript and JSON-based web applications development. He is GATE-2005 Information Technology (IT) qualified and has a Masters degree from VIT University, Vellore

Contents

Table of Contents

Table of Contents

  • Preface
    • Who This Book Is For
    • What You Need
    • How This Book Is Organized
    • How We Build Each Component
    • Conventions Used in This Book
    • Using Code Examples
  • Getting Started: Tokens and the Package Template
    • What We Are Building, and Why
    • Technical Requirements
    • Concepts You Need Before Writing Code
    • Step 1: The Token Files
    • Step 2: Themes
    • Step 3: The Component Template
    • Step 4: Tooling
    • Step 5: The First Test
    • Step 6: Enforcing the Token Rules
    • Seeing the Component Run
    • Styling API
    • Accessibility
    • Pitfalls
    • Summary
    • Exercises
  • Part I: Compound Components
    • Chapter 1. Tabs
      • What We Are Building, and Why
      • Technical Requirements
      • The Pattern You Are Implementing
      • Concepts You Need Before Writing Code
      • Designing the Markup
      • Step 1: The Tab
      • Step 2: The Panel
      • Step 3: The Parent and Its Slots
      • Step 4: One Function That Makes Everything Agree
      • Step 5: Roving Tabindex
      • Step 6: The Keyboard
      • Step 7: A Cancelable Event
      • Step 8: The Sliding Indicator
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 2. Dialog, Popover, and Tooltip
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Positioning Math
      • Step 2: The Position Controller
      • Step 3: The Dialog
      • Step 4: The Popover
      • Step 5: The Tooltip
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
  • Part II: Forms and Input
    • Chapter 3. Form-Associated Inputs
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Form Control Mixin
      • Step 2: Wrapping a Native Input
      • Step 3: The Select and the Slider
      • Step 4: Building from Scratch, the Rating
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 4. Combobox
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Structure
      • Step 2: Loading Options with a Task
      • Step 3: Keyboard and Selection
      • Step 4: Taking Part in a Form
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 5. Date Range Picker
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: Date Utilities
      • Step 2: The Range State Machine
      • Step 3: The Calendar
      • Step 4: The Keyboard
      • Step 5: Choosing a Day
      • Step 6: The Picker
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
  • Part III: Data and Hierarchy
    • Chapter 6. Data Table
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Data Pipeline
      • Step 2: The Table
      • Step 3: Sharing State with Context
      • Step 4: Selection
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 7. Tree View
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Pure Model
      • Step 2: Rendering the Tree
      • Step 3: Focus, Clicks and the Keyboard
      • Step 4: Selection
      • Step 5: Lazy Loading
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
  • Part IV: Motion, Flow and Pointer Input
    • Chapter 8. Carousel
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: Describing the Slides
      • Step 2: Scroll Snap Layout
      • Step 3: Knowing Which Slide Is Current
      • Step 4: Moving
      • Step 5: Keyboard and Announcements
      • Step 6: Autoplay
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 9. Stepper
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: The Navigation Rules
      • Step 2: Collecting and Restoring Values
      • Step 3: The Steps
      • Step 4: The Stepper's State
      • Step 5: Navigation
      • Step 6: Branching in Practice
      • Step 7: The Progress List
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
    • Chapter 10. Image Cropper
      • What We Are Building, and Why
      • Technical Requirements
      • Concepts You Need Before Writing Code
      • Step 1: Moving and Resizing a Rectangle
      • Step 2: Orientation
      • Step 3: The View, Zoom and Pan
      • Step 4: Drawing
      • Step 5: Dragging
      • Step 6: Keyboard and Numbers
      • Step 7: Exporting
      • Seeing the Component Run
      • Styling API
      • Accessibility
      • Testing
      • Pitfalls
      • Summary
      • Exercises
  • Appendices
    • Appendix A. Token Naming and Publishing
      • A.1 The Naming Grammar
      • A.2 The Package
      • A.3 Enforcement
      • A.4 Changing and Retiring Tokens
      • A.5 Generating Tokens from a Design Tool
    • Appendix B. Packaging for npm
      • B.1 Building
      • B.2 What Ships
      • B.3 Dependencies
      • B.4 Describing the Components
      • B.5 Versioning and Release
    • Appendix C. Using the Components in Frameworks
      • C.1 The Four Interfaces of a Component
      • C.2 Attributes or Properties
      • C.3 Events
      • C.4 Slots and Children
      • C.5 Forms
      • C.6 Server-Side Rendering
      • C.7 A Checklist for Integration
    • Appendix D. Accessibility Testing Checklist
      • D.1 What Was Tested
      • D.2 What Automated Tests Cannot Check
      • D.3 A Manual Test Script for Each Component
      • D.4 Per-Component Notes
      • D.5 Making It Routine
    • Appendix E. Exercise Solutions
      • E.1 How the Solutions Are Built and Run
      • E.2 Getting Started: Tokens and the Package Template
      • E.3 Chapter 1 Solutions: Tabs
      • E.4 Chapter 2 Solutions: Dialogs, Popovers and Tooltips
      • E.5 Chapter 3 Solutions: Form Inputs
      • E.6 Chapter 4 Solutions: Combobox
      • E.7 Chapter 5 Solutions: Date Range Picker
      • E.8 Chapter 6 Solutions: Data Table
      • E.9 Chapter 7 Solutions: Tree View
      • E.10 Chapter 8 Solutions: Carousel
      • E.11 Chapter 9 Solutions: Stepper
      • E.12 Chapter 10 Solutions: Image Cropper
      • E.13 What the Exercises Found
    • Appendix F. Further Reading
      • F.1 Lit and Web Components
      • F.2 Accessibility Patterns
      • F.3 Platform References
      • F.4 Testing and Tooling
  • Glossary
  • Index
  • About the Author

Get the free sample chapters

Click the buttons to get the free sample in PDF or EPUB, or read the sample online here

Download Sample PDFDownload Sample EPUB

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $15 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub