Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components

Return to the GitHub repository.

Learn more about WebC.

The examples below are in order of implementation complexity from least to most. All are using is-land, specifically <is-land on:visible>. The pre-JS experience is emulated using <is-land on:media="(max-width: 0px)">.

Summary

Table of Contents

  1. Always Enabled
  2. Disabled until JavaScript
  3. Hidden via :not(:defined) CSS
  4. Hidden via JS <template>
  5. Declarative Shadow DOM
  6. :has() and Radios
  7. Bonus: opacity Slider

Always Enabled

<!-- WebC Component HTML -->
<image-compare-enabled @name="range-enabled" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-enabled>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right

After JavaScript

JavaSkipped logo left JavaSkipped logo right

Disabled until JavaScript

<!-- WebC Component HTML -->
<image-compare-disabled @name="range-disabled" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-disabled>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right

After JavaScript

JavaSkipped logo left JavaSkipped logo right

Hidden via CSS

<!-- WebC Component HTML -->
<image-compare-defined @name="range-hidden" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-defined>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right

After JavaScript

JavaSkipped logo left JavaSkipped logo right

Hidden via JS Template

<!-- WebC Component HTML -->
<image-compare-hidden @name="range-hiddentmpl" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-hidden>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right

After JavaScript

JavaSkipped logo left JavaSkipped logo right

Declarative Shadow DOM

<!-- WebC Component HTML -->
<image-compare-shadowdom @name="range-shadowdom" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-shadowdom>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right **Form submit is not successful.

After JavaScript

JavaSkipped logo left JavaSkipped logo right **Form submit is not successful.

:has() and Radios

<!-- WebC Component HTML -->
<image-compare-nojs @name="range-radios" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-nojs>

Before JavaScript

JavaSkipped logo left JavaSkipped logo right
How much of the image do you want to be hidden?

After JavaScript

JavaSkipped logo left JavaSkipped logo right
How much of the image do you want to be hidden?

Bonus: Opacity Slider

For fun you can change clip-path: inset(0 0 0 var(--position)); to opacity: var(--position); on any of these components to have the slider vary opacity instead of clip amount.

<!-- WebC Component HTML -->
<image-compare-defined @name="range-opacity" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy" style="clip-path: none; opacity: var(--position);">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-defined>

After JavaScript

JavaSkipped logo left JavaSkipped logo right