Developing Web Components

Chapter 2. Creating a Solid Foundation

Jason Strimpel

Before learning about and developing web components, there are a few things that you should consider. Some of these considerations are not unique to web components, but rather are important aspects of software design and frontend engineering in general.

Voltron—The Component Base Class

In this chapter we will be constructing a base class widget, Voltron. This widget will be used to construct a dialog widget that will be iteratively built throughout this book as new concepts are introduced. The purpose of this base widget is to provide a standard that can be leveraged for the construction of a DOM library, irrespective of the interface—JavaScript widget, pure web component, Polymer, etc.

The Importance of a DOM Abstraction Layer

In theory, the DOM and its API provide a good interface for working with an HTML document. However, in practice it can be a very frustrating interface. This is especially true across browsers. In his book Learning JavaScript Design Patterns (O’Reilly), Addy Osmani describes how jQuery abstracts away the details of element selection, specifically selecting elements by class name. It accomplishes this by providing a convenient facade, its query selector API. Selecting an element by class name can be done in one of three ways, and the method selected is dependent upon what the browser running jQuery supports. jQuery hides these details and automatically selects the most efficient method. In addition ...