Web Components in Action
Ben Farrell
  • MEAP began May 2018
  • Publication in Summer 2019 (estimated)
  • ISBN 9781617295775
  • 325 pages (estimated)
  • printed in black & white

A great introduction to the field of web components in their rawest form.

Clive Harber
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.
Table of Contents detailed table of contents

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 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 Setup 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.7 Notes on Browser Support

2.8 Summary

3 Making your Component Re-Useable

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 Summary

4 The Component Lifecycle

4.1 The Web Component API

4.2 The connectedCallback handler

4.3 Constructor vs Connected

4.4 The Remaining Web Component Lifecycle Methods

4.4.1 Disconnected Callback

4.4.2 Adopted Callback

4.5 Comparing to React’s Lifecycle

4.6 Comparing to a Game Engine Lifecycle

4.7 Component Lifecycle v0

4.8 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 3rd Party Libraries as Modules

5.4.1 Front End 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 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 Creating a Customizable Business Card

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.3.3 Populating Markup with Automated Tools

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.5.2 Automatic Element Caching

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 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.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 Summary

Part 3: Putting your components together

10 Events

11 Building and Testing

12 3D and Mixed Reality


Appendix A: ES2015 For Web Components

About the Technology

Web components are a set of web platform APIs that allow you to create reusable modular HTML tags for your web apps and pages. With web components, you can easily make your own share buttons, date pickers, and more in a way that makes it easy to customize and share between your different projects. Learning how to make your own components from scratch gives you complete control over how you want them to look and act, perfect for making your web apps not only better looking, but more user friendly.

About the book

Web Components in Action teaches you how to build and use web components without relying on a framework like Polymer. You’ll start by learning what goes into a web component, using JavaScript, HTML, and CSS. After you experiment with a few simple components, you’ll learn how to customize them and apply best design practices to maximize reusability and build complete Web Component based applications with strategies that help make your components work together. This hands-on book guides you through several interesting projects, as well as some non-traditional use-cases including an audio player, geolocation components, and unique components suitable for 3D web and VR! Finally, you’ll make everything production-ready, with gulp and npm for builds and other strategies for smooth component-based projects.

What's inside

  • Creating Reusable Custom Elements
  • Using the Shadow DOM for ultimate component encapsulation
  • Strategies for HTML and CSS templating in your components
  • Strategies for building web applications using components
  • 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 used to HTML, CSS, and JavaScript. No prior experience with web components is needed.

About the author

Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team. Ben, alongside his team, helps shape and realize the UX of products and features in the middleground between design and engineering. Ben has been primarily web focused his entire career, but has worked on award winning projects using a wide variety of platforms and languages.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $39.99 pBook + eBook + liveBook
MEAP eBook $31.99 pdf + ePub + kindle + liveBook

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks