Web Components At Work

Web Components At Work

A guide to building effective and maintainable web components

Table of Contents

Introduction

Custom element fundamentals

Defining your element<br>Subclassing HTMLElement for fun and profit

The custom element lifecycle<br>Connecting, disconnecting, and reacting

Effective attributes<br>Configuration and communication

Using a base class<br>Eliminating element boilerplate

Structuring components

Behavioral components<br>Encapsulated events and manual markup

Shadow DOM<br>Who knows what lurks in the depths of the DOM?

Slots<br>Bringing shadow DOM back to the light

CSS and Theming<br>Variables, selectors, and hosts

Platform design patterns

Inputs and outputs<br>Attributes, properties, events, and methods

Component microformats<br>DOM-specific languages

Visibility and observation<br>Out of sight, out of mind

Frameworks and integration<br>DOM-specific languages

Association and control<br>"for" the win

Case studies

Custom element base class

Autocomplete input

WebGL shader preview

Media controller

Podcast client

2020 primary election results