ViewImage Component Demo

Figure 1. Sample Image

This is a view-image component. Clicking on the image panel makes it wider by one step. Clicking on the title makes it narrower by one step.

This is the first in a sequence of pages that explore the design of a W3C web component that manages resizable 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.

The primary parts of a web component are:

Class derived from HTMLElement
Each application of the component's tag creates an instance of this class when the code is parsed at load time.
Shadow DOM, a tree of encapsulated HTML elements
Attached to the component instance it defines the style, structure, and event handling provided by the component.
ViewImage separates its shadow DOM into two module-level template strings: VI_STYLE for the CSS and VI_TEMPLATE for the HTML structure, keeping layout concerns cleanly separate from class logic.
Event listeners
Associates user events with parts of the component and dispatches invocations to the JavaScript execution engine.
Helper functions
Optional tools to make the component code easier to maintain. ViewImage uses _applyBoxColors(), _applyImage(), _applySizing(), and _bumpWidth(dir).
Hyphenated tag name associated with the component class.
For this component the tag name view-image is associated with the class ViewImage.

WebDev Bites: ViewImage Component Demo