WebDev Bites: ImageViewer Component Demo

resize-able image viewer

About Components Introduction Demo Design Interface
Figure 1. Prototype Viewer This is an image viewer. Clicking on the image makes it larger. Clicking on the title makes it smaller.
This is the first in a sequence of several pages that explore the functioning and design of a W3C web component that manages resize-able images. The next page explains the design of the component. The final page shows how an application uses the viewer and lists its public interface.

Component Parts

The primary parts of a web component are:
  1. Class derived from HTMLElement
    Each application of the component's tag creates an instance of this class when the code is translated at load time.
  2. ShadowDOM, a tree of encapsulated HTML elements
    Attached to the component instance it defines the style, structure, and event handling provided by the component.
    It is defined entirely in JavaScript code and attacted to the component element.
  3. Event listeners
    associates user events with parts of the component and dispatches invocations to the JavaScript execution engine.
  4. Helper functons
    Optional tools to make the component code easier to maintain.
  5. Hyphenated Tag name associated with the component class.
    For this component the tag name image-viewer is associated with the class ImageViewer.