WebDev Bites: ViewImage Component Interface

resizable image viewer with shadow DOM encapsulation

About Introduction Demo Design Interface
Figure 1. Sample Image ViewImage is a lightweight W3C web component that displays an image inside a shadow DOM. It exposes attributes for source, sizing, and colors, and uses a default slot for caption text. Clicking the image panel widens the component by one step-px increment. Clicking the title narrows it by one step. Width is clamped to min-width.

1.0 - Use in Application

W3C web components are used like any standard HTML element. Place this in your page wherever you want a resizable image: 
  <view-image
    src="pictures/photo.jpg"
    alt="description"
    width="320px"
    bg-color="var(--light)"
    title-bg-color="#ccc"
  >
    Figure 1. Caption text goes here
  </view-image>
The only additional requirement is to include the component script: 

      <script src="Components/ViewImageComponent/js/ViewImage.js" defer></script>

2.0 - ViewImage Interface

Interface surface What it does Example
src (attribute) URL of the image to display. 
<view-image src="imgs/photo.jpg"></view-image>
alt (attribute) Alt text for the internal <img> element. 
<view-image src="imgs/chart.png" alt="Q3 chart"></view-image>
width (attribute) Initial width of the view box (any CSS length: px, rem, %). Overridden by click-to-resize after the first click. 
<view-image src="imgs/map.png" width="480px"></view-image>
bg-color (attribute) Background color of the view box. Accepts any CSS color value or custom property. 
<view-image src="imgs/x.png" bg-color="var(--light)"></view-image>
title-bg-color (attribute) Background color for the title/caption bar. 
<view-image src="imgs/x.png" title-bg-color="#ccc"></view-image>
step-px (attribute) Pixels added or removed per click. Default: 40. 
<view-image src="imgs/x.png" step-px="60"></view-image>
min-width (attribute) Minimum view width in pixels when shrinking. Default: 120. 
<view-image src="imgs/x.png" min-width="200"></view-image>
Slot: (default) Caption text rendered in the title bar above the image. 
<view-image src="imgs/x.png">
  Figure 1. Floor Plan
</view-image>
Click image (behavior) Widens the view by step-px per click, measured from the width at first click. 
// user clicks image panel → width grows by step-px
Click title (behavior) Narrows the view by step-px per click, clamped to min-width. 
// user clicks title bar → width shrinks by step-px
CSS parts: view, title Exposed via part attribute for external styling with ::part(). 
view-image::part(title) {
  font-style: italic;
}
Events No custom events are dispatched. Width changes happen internally via inline style. 
// no custom events in current build