11 A real-world UI component

This chapter turns earlier concepts into a practical, shareable UI by building a full color picker out of small, reusable Web Components. It recaps core techniques—Shadow DOM for encapsulation, ES module-based templates, the Custom Elements API with attribute reflection, and event bubbling—then applies them in a realistic workflow. Along the way it emphasizes decomposition, reusability, and maintainability, showing how a well-scoped component can serve multiple contexts and evolve without unnecessary complexity.

The solution is composed of three parts: a generic slider reused for hue and transparency, a two-axis coordinate picker for saturation and brightness, and ordinary text/number inputs for RGB, alpha, and hex. The coordinate picker mirrors the slider’s patterns but exposes x/y attributes and updates a draggable thumb across both axes. The top-level color picker aggregates these pieces, caches key DOM references, and wires interaction through a MutationObserver that watches attribute changes across the shadow subtree. A separate handler module centralizes state and color conversions, keeping the component class lean while synchronizing UI from any source (sliders, picker, or inputs). Input fields are captured with a single change listener that leverages event bubbling in the Shadow DOM, and the component reflects hex and alpha via observed attributes with sensible defaults initialized in connectedCallback.

After functionality, the chapter adds a lightweight, consistent design layer using CSS variables and importable CSS modules. Shared tokens (colors, radii, spacing, typography) replace hard-coded styles, and focused modules style input fields and an optional “modal” treatment applied inside the shadow boundary. This approach preserves encapsulation while enabling global theming—tweaking variables instantly restyles the component and any broader app. The chapter closes by reflecting on extensibility (for example, alternate backgrounds via slots or multi-thumb sliders) and on best practices for deciding when to use Shadow DOM, setting the stage for ensuring broad browser support next.

Slider UI component we’ve been building throughout the book

Gradient creator at cssgradient.io

Using the input element’s color picker

Two very similar sliders that we can create one Web Component for

Saturation and brightness picker as a candidate for a web component

Starting structure for our color picker component project

The coordinate picker component, which allows saturation and brightness selection simultaneously

A reminder on files and folders for our component while adding a new demo

Color picker component

Figure.11.10 Hue and transparency slider backgrounds

A Mutation Observer in action

Project structure with new modules

Events bubbling to the shadow root

The new color picker demo, wired up to change page color and text transparency

Our project file structure including the CSS vars and the design system imports

Style input fields after applying a rudimentary design system

The color picker component style with a quick and dirty module-based design system

The color picker design is easily tweaked by changing the CSS modules or the CSS vars

• How to plan a semi-complex UI component by breaking an inspiration reference design down into multiple pieces, some of which become their own smaller components
• To break down a component into its inputs and outputs and plan an API around them, including using the concept of reflection to enforce a common API when using tag attributes or JS
• To create separate and universal styling rules, whether through CSS vars or importable modules that can be used in your components and in the larger system to enforce design consistency throughout

FAQ