Web Components in Action

Teaches by example, demonstrating concepts through compelling projects that illuminate realistic use cases. From the Foreword by Gray Norton, Polymer Project, Google Web Components are a standardized way to build reusable custom elements for web pages and applications using HTML, CSS, and JavaScript. A Web Component is well-encapsulated, keeping its internal structure separate from other page elements so they don’t collide with the rest of your code. In Web Components in Action you’ll learn to design, build, and deploy reusable Web Components from scratch. 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

About the Technology

The right UI can set your sites and web applications apart from the ordinary. Using the Web Components API, you can build Custom Elements and then add them to your pages with just a simple HTML tag. This standards-based design approach gives you complete control over the style and behavior of your components and makes them radically easier to build, share, and reuse between projects.

About the book

Web Components in Action teaches you to build and use Web Components from the ground up. You’ll start with simple components and component-based applications, using JavaScript, HTML, and CSS. Then, you’ll customize them and apply best design practices to maximize reusability. Through hands-on projects, you’ll learn to build production-ready Web Components for any project, including color pickers, advanced applications using 3D models, mixed reality, and machine learning.

What's inside

Creating reusable Custom Elements without a framework Using the Shadow DOM for ultimate component encapsulation Leveraging newer JS features to organize and reuse code Fallback strategies for using Web Components on older browsers

About the reader

Written for web developers experienced with HTML, CSS, and JavaScript.

About the author

Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team.