WebDev Bites: ViewComparator Component Interface

two-panel viewer with draggable splitter, bottom resizer, and right-panel offset

About Introduction Demo Design Interface 
function add(a, b) {
  return a + b;
}

console.log(add(3, 4));
def add(a, b):
    return a + b

print(add(3, 4))
 ViewComparator is a W3C web component that displays two side-by-side panels separated by a draggable vertical splitter and a draggable bottom resizer. It adds a set of offset controls on the right panel so that content can be shifted vertically for line-by-line code alignment. It exposes attributes for sizing, colors, split ratio, font size, and optional Prism syntax highlighting. Drag the vertical bar to redistribute width between panels; total width stays fixed. Drag the strip at the bottom edge to change height. Click either panel to shift the split by one step-px increment. Use the ▲ / 0 / ▼ buttons in the top-right corner of the right panel, or Alt+Arrow / Esc keyboard shortcuts, to shift right-panel content for alignment.

1.0 - Use in Application

Place this in your page wherever you want a resizable two-panel comparison view: 
  <view-comparator width="min(60rem, 100%)" height="20rem"
    left-ratio="0.5" highlight="prism">
    <pre slot="left"><code class="language-cpp">
      // C++ code
    </code></pre>
    <pre slot="right"><code class="language-rust">
      // Rust code
    </code></pre>
  </view-comparator>
The required script and stylesheet are: 

      <link rel="stylesheet" href="Components/ViewComparatorComponent/css/ViewComparator.css">
      <script src="Components/ViewComparatorComponent/js/ViewComparator.js" defer></script>
For Prism syntax highlighting, also load Prism before the component script: 

      <link rel="stylesheet" href="../css/prism.css">
      <script src="../js/prism.js"></script>

2.0 - ViewComparator Interface

Interface surface What it does Example
width (attribute) Total component width. Accepts any CSS length or min() expression. 
<view-comparator width="min(60rem, 100%)"></view-comparator>
height (attribute) Initial panel height (px or rem). Draggable after render; attribute is not consulted again after the first drag. 
<view-comparator height="20rem"></view-comparator>
left-ratio (attribute) Initial fraction of total width given to the left panel. Default: 0.5. Re-applied on page resize. 
<view-comparator left-ratio="0.4"></view-comparator>
bar-width (attribute) Thickness of both the vertical splitter and the bottom resizer. Default: 6px. 
<view-comparator bar-width="8px"></view-comparator>
bar-color (attribute) Color of both the splitter and the resizer. Default: #888. 
<view-comparator bar-color="#666"></view-comparator>
bg-color (attribute) Background color of both panels. Accepts any CSS color value or custom property. 
<view-comparator bg-color="var(--light)"></view-comparator>
color (attribute) Text color of both panels. 
<view-comparator color="var(--dark)"></view-comparator>
overflow-x (attribute) Horizontal overflow policy for both panels. Default: auto. 
<view-comparator overflow-x="scroll"></view-comparator>
code-padding (attribute) Padding applied inside each panel's slotted <pre>. Default: 0.75rem 1rem. The top component is used as the base for right-panel offset calculations. 
<view-comparator code-padding="0.5rem 0.75rem"></view-comparator>
font-size (attribute) Font size applied to slotted <pre> and nested <code> elements in both panels. Omit to use the default from the shadow DOM stylesheet. 
<view-comparator font-size="0.85rem"></view-comparator>
highlight (attribute) Set to "prism" to enable Prism.js syntax highlighting on slotted <code> elements. 
<view-comparator highlight="prism"></view-comparator>
step-px (attribute) Pixels transferred between panels per click. Default: 40. 
<view-comparator step-px="60"></view-comparator>
offset-step-px (attribute) Pixels added to the right panel's top padding per offset button click or keyboard step. Default: 40. Not in observedAttributes; read on each activation. 
<view-comparator offset-step-px="20"></view-comparator>
min-panel-px (attribute) Minimum width in pixels for either panel when dragging or clicking. Default: 120. 
<view-comparator min-panel-px="160"></view-comparator>
min-height-px (attribute) Minimum container height in pixels when dragging the bottom resizer. Default: 80. 
<view-comparator min-height-px="120"></view-comparator>
Slot: left Content for the left panel. Use a bare <pre> for plain text, or <pre><code class="language-*"> for Prism mode. 
<view-comparator>
  <pre slot="left">Left content</pre>
</view-comparator>
Slot: right Content for the right panel. Same structure as the left slot. Receives the vertical offset applied by the offset controls. 
<view-comparator>
  <pre slot="right">Right content</pre>
</view-comparator>
Drag splitter (behavior) Mouse-drag the vertical bar left or right to redistribute width between panels. Total component width stays fixed. 
// drag splitter → left and right panels exchange width
Drag resizer (behavior) Mouse-drag the horizontal strip at the bottom edge to change the height of both panels together. 
// drag resizer → component height grows or shrinks
Click left panel (behavior) Transfers step-px pixels from the right panel to the left panel, clamped to min-panel-px. 
// click left panel → left panel grows by step-px
Click right panel (behavior) Transfers step-px pixels from the left panel to the right panel, clamped to min-panel-px. 
// click right panel → right panel grows by step-px
▲ button (behavior) Reduces right-panel top padding by offset-step-px, visually shifting content up for line alignment. Clamped to zero. 
// ▲ click → right content shifts up one step
▼ button (behavior) Increases right-panel top padding by offset-step-px, visually shifting content down for line alignment. 
// ▼ click → right content shifts down one step
0 button (behavior) Resets right-panel top padding to zero, restoring default alignment. 
// 0 click → right content offset cleared
Alt+↓ / Alt+↑ / Esc (keyboard) When the right panel has keyboard focus: Alt+↓ shifts content down, Alt+↑ shifts content up, Esc resets offset. Equivalent to the ▲/▼/0 buttons. 
// focus right panel, then Alt+↓ / Alt+↑ / Esc
CSS parts: container, panel-left, panel-right, splitter, resizer, offset-controls, offset-up, offset-reset, offset-down All structural shadow DOM elements are exposed via part for external styling with ::part(). 
view-comparator::part(splitter) {
  background: navy;
}
Events No custom events are dispatched. All state changes (width, height, offset) happen internally via inline style. 
// no custom events in current build