Developing Web Components

Part II. Building Our UI

The Dialog Widget

In Part II, we will continue constructing the dialog widget introduced in Part I. If you skipped the first part of the book and would like to learn about the design and implementation details of the dialog widget, please refer back to Chapter 2. Subsequent chapters in Part I contain sections that apply the concepts they cover to the dialog widget as well. These sections are located toward the ends of the chapters and can be referenced as needed for understanding code in the dialog widget not introduced in Part II.

Part II introduces concepts and patterns that are typically abstracted away from day-to-day frontend development by libraries such as Dojo, jQuery UI, Kendo UI, and Twitter Bootstrap. These concepts and patterns are used to implement UI widgets that you probably work with on a daily basis as a frontend engineer. After reading this part of the book, you will have a solid understanding of how elements are positioned and how to manipulate element positions using JavaScript.

Note

If you skipped Chapter 2, you might find yourself asking, “Why are we building a widget? I thought this was a web components book!” That’s a valid question. The answer is that this book is more than just a rehashing of the Web Components specification. It is designed to provide a better understanding of the DOM by exploring the details underlying today’s widget interfaces. Knowledge of these details is required to build moderately complex web components, ...