Table of Contents

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