table of content

Part 1: First steps

1 The framework without a framework

1.1 What are Web Components?

1.1.1 The date picker

1.1.2 The Shadow DOM

1.1.3 What do people mean when they say Web Components?

1.1.4 The problematic history of HTML Imports

1.1.5 Polymer Library and X-Tags

1.1.6 Modern Web Components

1.2 The future of Web Components

1.3 Beyond the single component

1.3.1 Web Components are just like any other DOM element

1.3.2 From individual component to application

1.4 Your project, your choice

1.5 Summary

2 Your first Web Component

2.1 Intro to HTMLElement

2.1.1 Crash course in inheritance

2.1.2 Inheritance in your favorite elements

2.2 Rules for naming your element

2.3 Defining your custom element (and handling collisions)

2.4 Extending HTMLElement to create custom component logic

2.5 Using your custom element in practice

2.6 Making a (useful) first component

2.6.1 Set up your web server

2.6.2 Writing our HTML tag

2.6.3 Creating our class

2.6.4 Adding content to our component

2.6.5 Styling our component

2.6.6 Component logic

2.6.7 Adding interactivity

2.6.8 Finishing touches

2.6.9 Improving the carousel

2.7 Notes on browser support

2.8 Summary

3 Making your component reuseable

3.1 A real-world component

3.1.1 A 3D search use case

3.1.2 Starting with an HTTP request

3.1.3 Wrapping our work up in a custom component

3.1.4 Rendering search results

3.1.5 Styling our component

3.2 Making our component configurable

3.2.1 Creating our component API with setters

3.2.2 Using our API from the outside looking in

3.3 Using attributes for configuration

3.3.1 An argument against a component API for configuration

3.3.2 Implementing attributes

3.3.3 Case sensitivity

3.4 Listening for attribute changes

3.4.1 Adding text input

3.4.2 The attribute changed callback

3.4.3 Observed attributes

3.5 Making more things even more customizable

3.5.1 Using hasAttribute to check if an attribute exists

3.5.2 Fully customizing the HTTP request URL for development

3.5.3 Best practice guides

3.5.4 Avoiding attributes for rich data

3.5.5 Property and attribute reflection

3.6 Updating the slider component

3.7 Summary

4 The component lifecycle

4.1 The Web Components API

4.2 The connectedCallback handler

4.2.1 Constructor vs. connected

4.3 The remaining Web Component lifecycle methods

4.3.1 Disconnected callback

4.3.2 Adopted callback

4.4 Comparing to React’s lifecycle

4.5 Comparing to a game engine lifecycle

4.6 Component lifecycle v0

4.7 Summary

5 Instrumenting a better web app through modules

5.1 Using the script tag to load your Web Components

5.1.1 Having to deal with many JS and CSS references

5.1.2 Tiny scripts are more organized, but make the reference problem worse

5.1.3 Including CSS for self-reliant components

5.1.4 Dependency hell

5.2 Using modules to solve dependency problems

5.2.1 Creating a musical instrument with Web Components and JS modules

5.2.2 Starting with the smallest component

5.2.3 Importing and nesting a Web Component within a Web Component

5.2.4 Using a Web Component to wrap an entire web application

5.3 Adding interactivity to our component

5.3.1 Listening for mouse movement

5.3.2 Passing data to child components

5.3.3 Making your components shake with CSS

5.4 Wrapping third-party libraries as modules

5.4.1 Frontend tooling for wrapping a module with Node.js

5.4.2 Not perfect, but does the job

5.4.3 Using the wrapped module to play some notes

5.4.4 No more audio autoplay

5.4.5 Playing the Web Harp

5.5 Summary

Part 2: Ways to Improve your Component Workflow

6 Markup managed

6.1 String theory

6.1.1 When inline HTML gets ugly

6.1.2 String syntax with the backtick

6.2 Using template literals

6.2.1 Business card creator

6.2.2 Iterating design with just HTML and CSS

6.3 Importing templates

6.3.1 Keeping markup out of the main component logic

6.3.2 A module just for HTML and CSS

6.4 Template logic

6.4.1 Creating menus from data

6.4.2 More generation logic, harder automation

6.5 Element caching

6.5.1 Don’t make me query-select in my component

6.6 Smart templating

6.6.1 Using lit-html

6.6.2 Repeating with templates

6.6.3 Should you use it?

6.6.4 Injecting event listeners into markup

6.7 Updating the slider component

6.8 Summary

7 Templating your content with HTML

7.1 R.I.P. HTML Imports

7.1.1 Polyfilling HTML Imports

7.1.2 What’s inside the import

7.2 The template tag

7.2.1 Document fragments

7.2.2 Using template content

7.3 Choose your own template adventure

7.4 Dynamically loading templates

7.5 Entering the Shadow DOM with slots

7.5.1 Slots without a name

7.6 Summary

8 The Shadow DOM

8.1 Encapsulation

8.1.1 Protecting your component’s API

8.1.2 Protecting your component’s DOM

8.2 Enter the Shadow DOM

8.2.1 The shadow root

8.2.2 Closed mode

8.2.3 Your component’s constructor vs. connectedCallback

8.3 The Shadow DOM today

8.4 Summary

9 Shadow CSS

9.1 Style creep

9.1.1 Style creep into component descendants

9.1.2 Style creep into your component

9.2 Style creep solved with the Shadow DOM

9.2.1 When styles creep

9.3 Shadow DOM workout plan

9.3.1 Application shell

9.3.2 Host and ID selectors

9.3.3 Grid and list containers

9.4 Adaptable components

9.4.1 Creating the exercise component

9.4.2 Exercise component style

9.5 Updating the slider component

9.6 Summary

10 Shadow CSS rough edges

10.1 Contextual CSS

10.1.1 A small bit of interactivity

10.1.2 Contextual style

10.1.3 Workaround for host-context

10.2 Component themes

10.2.1 Shadow and deep selectors

10.2.2 CSS Variables

10.2.3 Applying CSS Variables to our demo

10.3 Using the Shadow DOM in practice (today)

10.3.1 Browser support

10.3.2 Polyfilling

10.3.3 Design systems

10.4 Summary

Part 3: Putting your components together

11 A real-world UI component

11.1 Crafting a color picker

11.1.1 The components of our component

11.2 Coordinate picker component

11.2.1 The coordinate picker Web Component class

11.2.2 Coordinate picker HTML/CSS

11.2.3 Component demos

11.3 The color picker

11.3.1 Observing attribute changes for interaction

11.3.2 Responding to input fields

11.3.3 Responding to attribute changes

11.4 Adding a common design language

11.4.1 Swapping in CSS vars for a consistent design

11.4.2 Using imports for more complex CSS

11.5 Summary

12 Building and supporting older browsers

12.1 Backwards compatibility

12.1.1 Toggling the Shadow DOM

12.1.2 Comparing to polyfills

12.1.3 Shadow CSS and child elements

12.2 Building for the least common denominator

12.3 Build processes

12.3.1 Using NPM scripts

12.4 Building components

12.4.1 Why we build

12.4.2 Module bundling with Rollup

12.4.3 Running builds with npm

12.5 Transpiling for IE

12.5.1 Babel

12.5.2 CSS var ponyfill

12.6 Summary

13 Component testing

13.1 Unit testing and TDD

13.2 Web Component tester

13.2.1 Writing tests

13.3 Comparing to a standard test setup with Karma

13.3.1 Karma Web Components

13.3.2 Multiple tests in the same project

13.3.3 A note on Safari

13.4 Summary

14 Events and application data flow

14.1 Framework offerings

14.2 Events

14.2.1 Native events and WebComponentsReady

14.2.2 When custom elements are defined

14.2.3 Custom Events

14.2.4 Custom Event bubbling

14.3 Passing events through Web Components

14.3.1 Native event propagation through the Shadow DOM

14.3.2 Custom Event propagation through the Shadow DOM

14.4 Separate your data

14.4.1 Model-view-controller

14.4.2 Local storage

14.4.3 Wiring UI to the data model

14.5 Exercise playback view

14.6 Passing events with an event bus

14.6.1 Static getter event types

14.6.2 Design patterns as suggestions

14.7 Summary

15 Hiding your complexities

15.1 Looking to the Web Component future

15.2 3D and mixed reality

15.2.1 A-Frame

15.2.2 Model viewer component

15.2.3 Model-viewer + Poly search

15.2.4 AR with model-viewer

15.2.5 Your own 3D component

15.3 Video effects

15.3.1 Processing pixels with JS

15.3.2 WebGL shaders

15.4 Hand tracking and machine learning

15.5 Summary

Appendixes

Appendix A: ES2015 for Web Components

A.1 What is ES2015?

A.2 Rethinking variables with ES2015

A.2.1 Variable declaration with let

A.2.2 Variable declaration with const

A.2.3 Important by convention but not functionality

A.3 Classes

A.3.1 Constructor

A.3.2 Properties

A.3.3 Private properties in JS

A.3.4 Getters and setters

A.3.5 Static methods

A.4 Modules

A.4.1 Top-level objects in JS

A.4.2 Module syntax for importing and exporting

A.4.3 Working with multiple functions in the same module

A.5 Template literals

A.5.1 Inserting variables into a template literal

A.6 The fat arrow

A.6.1 The callback scope problem

A.6.2 Losing scope in classes

A.6.3 Managing scope with the fat arrow

Overview

15 Hiding your complexities

This chapter closes the book by arguing that the real power of Web Components is their ability to hide internal complexity behind simple, stable interfaces. After a bumpy standards journey (for example, HTML Imports fading out), the fundamentals are now broadly supported and unlikely to change soon. The author highlights upcoming HTML and CSS modules, shadow parts/themes, and design-system-friendly styling as the next big enablers, alongside a growing ecosystem of framework-agnostic tools. The message: encapsulation keeps components usable for years, regardless of the implementation details inside.

To illustrate, the chapter explores demanding domains where encapsulation shines. In 3D, VR, and AR, low-level WebGL and sensor fusion are daunting, yet higher-level approaches like A-Frame (with nonvisual, scene-defining tags) and Google’s model-viewer offer simple markup for complex scenes, interaction, and even AR handoffs. The author then builds a custom 3D scene component with Babylon.js, wiring cameras, lights, materials, and UI (like a color picker) into a single, easy-to-use element. Across these examples, components act as boundaries that separate intricate rendering and math from everyday page code.

The chapter then moves to live video effects and machine learning. A video component abstracts camera setup and frame access, first demonstrating CPU-based pixel filters and then upgrading to GPU-accelerated WebGL shaders for performance and custom effects. Finally, a hand-tracking component wraps a Tensorflow.js-based model, emitting high-level events that are effortlessly integrated into the earlier Web Harp app. The takeaway is consistent: by encapsulating complexity—graphics, performance, computer vision, or ML—Web Components make advanced functionality approachable, reusable, and future-proof, while keeping the core standards (and developer experience) simple.

Example A-Frame scene

Inspecting the A-Frame scene

Changing A-Frame objects live in the browser’s dev tools

Astronaut model over a colored background

Poly search component with model-viewer preview

Example AR glasses field of view

Placing a virtual object in the real world using ARCore

A 3D color picker application

3D color picker project structure

A live video stream with a black and white filter

Live camera feed with “snow” effect

Edge detection effect with a WebGL-based video Web Component

Radial fade around edges of a live camera feed

Handtracker Web Component demo

Web Harp with hand tracking

Summary

In this chapter, you learned

What may happen in the Web Component future
How Web Components can make intimidating technologies like mixed reality and machine learning approachable
Hiding your own complex systems, like a full 3D scene in a Web Component
Leveraging components created throughout this book for emerging technologies

FAQ

What does “hiding your complexities” mean in the context of Web Components?

It means encapsulating heavy internal logic (3D, shaders, ML, etc.) behind a simple, documented element API so users only set attributes or listen to events, while implementation details remain private and stable over time.

Why are upcoming HTML and CSS modules significant for Web Components?

They let you import HTML and small, modular styles directly, separating structure/style from logic. This lowers the JS barrier, improves team workflows, and helps design systems supply styles without piercing Shadow DOM.

How can design systems style Shadow DOM components?

By using CSS modules for granular styles, exposing styling hooks via shadow parts, and leveraging upcoming shadow themes. Together they enable theming and system-wide styling without leaking encapsulation.

What is A-Frame and how does it relate to Web Components?

A-Frame is an HTML-like framework for 3D/VR scenes (, , etc.). It isn’t built on today’s Custom Elements API (uses an older polyfilled API and no Shadow DOM), but it demonstrates the Web Component idea: declarative tags that hide complex 3D/VR plumbing.

What does Google’s model-viewer component provide?

It previews 3D models (glTF/.glb) with attributes like src, controls, auto-rotate, and background-color, and can enable AR. On iOS, AR works via Quick Look by supplying an ios-src (USDZ) asset; broader WebXR support is evolving.

How do you combine Poly search results with model-viewer?

Fetch GLTF results from Poly (e.g., a component), store each result’s GLTF URL on the thumbnail, then on click set that URL as the model-viewer’s src to preview the selected model interactively.

Why use 3D libraries like Three.js or Babylon.js instead of raw WebGL?

Raw WebGL is low-level and shader-centric. Libraries provide scene graphs, cameras, lights, loaders, and utilities, letting you focus on objects and interactions. The chapter’s custom scene uses Babylon.js for this reason.

What are the core pieces of a custom 3D scene component?

- A

How can Web Components simplify live video effects?

A video component can handle getUserMedia, canvas rendering, and frame events. You can apply CPU filters via JS or offload to GPU via WebGL shaders for performance. Custom shaders can be injected and the component emits frameupdate events for processing.

How is hand tracking integrated with Web Components?

Extend a video component, load the Handtrack.js (Tensorflow.js) model, detect hands each frame, render overlays, and dispatch a custom event (e.g., onHandLocation) with hand center points. Other components (like the Web Harp) can listen and react without knowing ML details.

pro $24.99 per month

access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
choose one free eBook per month to keep
exclusive 50% discount on all purchases
renews monthly, pause or cancel renewal anytime

lite $19.99 per month

access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more

eBook

pdf, ePub, online

$54.99 $27.49

you save $27.50 (50%)

include audio $19.99 $9.99

pro $24.99 per month

access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
choose one free eBook per month to keep
exclusive 50% discount on all purchases
renews monthly, pause or cancel renewal anytime

lite $19.99 per month

access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more

eBook

$54.99 $27.49

you save $27.50 (50%)

include audio $19.99 $9.99

eBook

pdf, ePub, online

$54.99 $27.49

you save $27.50 (50%)

include audio $19.99 $9.99

pro $24.99 per month

access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
choose one free eBook per month to keep
exclusive 50% discount on all purchases
renews monthly, pause or cancel renewal anytime

lite $19.99 per month

access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more