Web Components At Work

A guide to building effective and maintainable web components

Table of Contents

1. Introduction
2. Custom element fundamentals
   1. Defining your element
      Subclassing HTMLElement for fun and profit
   2. The custom element lifecycle
      Connecting, disconnecting, and reacting
   3. Effective attributes
      Configuration and communication
   4. Using a base class
      Eliminating element boilerplate
3. Structuring components
   1. Behavioral components
      Encapsulated events and manual markup
   2. Shadow DOM
      Who knows what lurks in the depths of the DOM?
   3. Slots
      Bringing shadow DOM back to the light
   4. CSS and Theming
      Variables, selectors, and hosts
4. Platform design patterns
   1. Inputs and outputs
      Attributes, properties, events, and methods
   2. Component microformats
      DOM-specific languages
   3. Visibility and observation
      Out of sight, out of mind
   4. Frameworks and integration
      DOM-specific languages
   5. Association and control
      "for" the win
5. Case studies
   1. Custom element base class
   2. Autocomplete input
   3. WebGL shader preview
   4. Media controller
   5. Podcast client
   6. 2020 primary election results