├── .gitignore
├── netlify.toml
├── static
    ├── javaskipped-a.png
    └── javaskipped-b.png
├── _components
    ├── visually-hidden.css
    ├── image-compare-defined.webc
    ├── image-compare-hidden.webc
    ├── image-compare-disabled.webc
    ├── image-compare-enabled.webc
    ├── image-compare-shadowdom.webc
    └── image-compare-nojs.webc
├── eleventy.config.js
├── package.json
├── LICENSE
├── _includes
    └── layout.webc
├── README.md
└── index.webc


/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | node_modules
3 | package-lock.json


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "_site"
3 |   command = "npm run build"
4 | 


--------------------------------------------------------------------------------
/static/javaskipped-a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/11ty/demo-webc-image-compare/main/static/javaskipped-a.png


--------------------------------------------------------------------------------
/static/javaskipped-b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/11ty/demo-webc-image-compare/main/static/javaskipped-b.png


--------------------------------------------------------------------------------
/_components/visually-hidden.css:
--------------------------------------------------------------------------------
1 | .visually-hidden {
2 | 	overflow: hidden;
3 | 	position: absolute;
4 | 	white-space: nowrap;
5 | 	width: 1px;
6 | 	height: 1px;
7 | }


--------------------------------------------------------------------------------
/eleventy.config.js:
--------------------------------------------------------------------------------
 1 | const pluginWebc = require("@11ty/eleventy-plugin-webc");
 2 | const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 3 | 
 4 | module.exports = function(eleventyConfig) {
 5 | 	eleventyConfig.ignores.add("README.md");
 6 | 
 7 | 	eleventyConfig.addPlugin(syntaxHighlight);
 8 | 	eleventyConfig.addPlugin(pluginWebc, {
 9 | 		components: [
10 | 			"./_components/**/*.webc",
11 | 			"npm:@11ty/is-land/*.webc",
12 | 			"npm:@11ty/eleventy-plugin-syntaxhighlight/*.webc",
13 | 		],
14 | 	});
15 | 
16 | 	eleventyConfig.setServerPassthroughCopyBehavior("copy");
17 | 	eleventyConfig.addPassthroughCopy({
18 | 		"static/*": "/",
19 | 		"node_modules/@11ty/is-land/is-land.js": "/is-land.js"
20 | 	});
21 | 
22 | 	eleventyConfig.setServerOptions({
23 | 		domdiff: false
24 | 	});
25 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@11ty/demo-webc-image-compare",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "build": "npx @11ty/eleventy",
 7 |     "start": "npx @11ty/eleventy --serve --incremental"
 8 |   },
 9 |   "engines": {
10 |     "node": ">=14"
11 |   },
12 |   "funding": {
13 |     "type": "opencollective",
14 |     "url": "https://opencollective.com/11ty"
15 |   },
16 |   "author": {
17 |     "name": "Zach Leatherman",
18 |     "email": "zachleatherman@gmail.com",
19 |     "url": "https://zachleat.com/"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git://github.com/11ty/demo-webc-image-compare.git"
24 |   },
25 |   "bugs": "https://github.com/11ty/demo-webc-image-compare/issues",
26 |   "license": "MIT",
27 |   "dependencies": {
28 |     "@11ty/eleventy": "^2.0.0",
29 |     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
30 |     "@11ty/eleventy-plugin-webc": "^0.11.0",
31 |     "@11ty/is-land": "^4.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Zach Leatherman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/_includes/layout.webc:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 		<meta name="description" content="Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components">
 7 | 		<title>Eleventy WebC Progressive Enhancement Recipes</title>
 8 | 		<style @raw="getBundle('css')" webc:keep></style>
 9 | 		<style>
10 | 		is-land {
11 | 			display: block;
12 | 			padding: 1em;
13 | 			border-radius: .5em;
14 | 			border: 2px solid lightblue;
15 | 			overflow: hidden;
16 | 		}
17 | 		is-land h3:first-child {
18 | 			margin-top: 0;
19 | 		}
20 | 
21 | 		.columns {
22 | 			display: flex;
23 | 			flex-wrap: wrap;
24 | 			gap: 1em;
25 | 		}
26 | 		.columns > * {
27 | 			flex-basis: 20em;
28 | 		}
29 | 
30 | 		pre {
31 | 			font-size: 1.125em; /* 18px /16 */
32 | 			border-radius: .5em;
33 | 			border: 2px solid lightblue;
34 | 			margin: 1em 0;
35 | 			padding: 1em;
36 | 			-moz-tab-size: 2;
37 | 			-o-tab-size: 2;
38 | 			tab-size: 2;
39 | 			line-height: 1.2;
40 | 			font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
41 | 			overflow: auto;
42 | 			background-color: #f4f4f4;
43 | 		}
44 | 		</style>
45 | 		<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
46 | 	</head>
47 | 	<body>
48 | 		<div @raw="content" webc:nokeep></div>
49 | 	</body>
50 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components
 2 | 
 3 | A bunch of examples of progressively enhanced server-rendered image comparison web components using WebC.
 4 | 
 5 | This component expects two images to be nested inside and will produce a input type range to let the user compare the two images by dragging the range slider.
 6 | 
 7 | * [Live demo on Netlify](https://demo-webc-image-compare.netlify.app/)
 8 | * [Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/demo-webc-image-compare)
 9 | * [Learn more about WebC](https://www.11ty.dev/docs/languages/webc/)
10 | * Originally a demo for a talk given at the [Eleventy Meetup: Adding Components to WebC with Eleventy](https://www.zachleat.com/web/webc-in-eleventy/)
11 | 
12 | ## Examples
13 | 
14 | 1. [Always Enabled](https://demo-webc-image-compare.netlify.app/#enabled): form control is interactive pre-JS and synchronizes post-JS.
15 | 1. [Disabled until JavaScript](https://demo-webc-image-compare.netlify.app/#disabled): uses JS to toggle the range input from disabled to enabled.
16 | 1. [Hidden via `:not(:defined)` CSS](https://demo-webc-image-compare.netlify.app/#hidden-css)
17 | 1. [Hidden via JS `<template>`](https://demo-webc-image-compare.netlify.app/#hidden-tmpl)
18 | 1. [Declarative Shadow DOM](https://demo-webc-image-compare.netlify.app/#dsd)
19 | 1. [`:has()` and Radios](https://demo-webc-image-compare.netlify.app/#has-radios)
20 | 1. [Bonus: `opacity` Slider](https://demo-webc-image-compare.netlify.app/#opacity)


--------------------------------------------------------------------------------
/_components/image-compare-defined.webc:
--------------------------------------------------------------------------------
 1 | <template webc:root :id="uid" aria-label="Compare two images">
 2 | 	<div class="slider">
 3 | 		<label :for="uid + '-slider'" class="visually-hidden">
 4 | 			How much of the image do you want to be hidden?
 5 | 		</label>
 6 | 		<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
 7 | 	</div>
 8 | 	<slot>Don’t forget the images!</slot>
 9 | </template>
10 | 
11 | <link rel="stylesheet" href="visually-hidden.css">
12 | 
13 | <style webc:scoped>
14 | :host {
15 | 	display: grid;
16 | 	max-width: 20em;
17 | }
18 | :host:not(:defined) .slider {
19 | 	display: none;
20 | }
21 | :host input[type='range'] {
22 | 	width: 100%;
23 | }
24 | :host .slider,
25 | :host img {
26 | 	display: block;
27 | 	width: 100%;
28 | 	height: auto;
29 | 	object-fit: cover;
30 | 	grid-area: 2/1;
31 | }
32 | :host .slider {
33 | 	z-index: 1;
34 | 	height: 100%;
35 | 	display: flex;
36 | 	align-items: center;
37 | }
38 | :host img:first-of-type {
39 | 	clip-path: inset(0 0 0 var(--position));
40 | }
41 | </style>
42 | 
43 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
44 | 
45 | <script>
46 | customElements.define("image-compare-defined", class extends HTMLElement {
47 | 	connectedCallback() {
48 | 		this.range = this.querySelector(":scope input[type='range']");
49 | 		this.range.removeAttribute("disabled");
50 | 
51 | 		this.range.addEventListener("input", (e) => {
52 | 			requestAnimationFrame(() => {
53 | 				this.style.setProperty("--position", `${e.target.value}%`);
54 | 			});
55 | 		})
56 | 	}
57 | })
58 | </script>


--------------------------------------------------------------------------------
/_components/image-compare-hidden.webc:
--------------------------------------------------------------------------------
 1 | <template webc:root :id="uid" aria-label="Compare two images">
 2 | 	<template>
 3 | 		<div class="slider">
 4 | 			<label :for="uid + '-slider'" class="visually-hidden">
 5 | 				How much of the image do you want to be hidden?
 6 | 			</label>
 7 | 			<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
 8 | 		</div>
 9 | 	</template>
10 | 	<slot>Don’t forget the images!</slot>
11 | </template>
12 | 
13 | <link rel="stylesheet" href="visually-hidden.css">
14 | 
15 | <style webc:scoped>
16 | :host {
17 | 	display: grid;
18 | 	max-width: 20em;
19 | }
20 | :host input[type='range'] {
21 | 	width: 100%;
22 | }
23 | :host .slider,
24 | :host img {
25 | 	display: block;
26 | 	width: 100%;
27 | 	height: auto;
28 | 	object-fit: cover;
29 | 	grid-area: 2/1;
30 | }
31 | :host .slider {
32 | 	z-index: 1;
33 | 	height: 100%;
34 | 	display: flex;
35 | 	align-items: center;
36 | }
37 | :host img:first-of-type {
38 | 	clip-path: inset(0 0 0 var(--position));
39 | }
40 | </style>
41 | 
42 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
43 | 
44 | <script>
45 | customElements.define("image-compare-hidden", class extends HTMLElement {
46 | 	connectedCallback() {
47 | 		let tmpl = this.querySelector(":scope template");
48 | 		tmpl.replaceWith(tmpl.content);
49 | 
50 | 		this.range = this.querySelector(":scope input[type='range']");
51 | 		this.range.removeAttribute("disabled");
52 | 
53 | 		this.range.addEventListener("input", (e) => {
54 | 			requestAnimationFrame(() => {
55 | 				this.style.setProperty("--position", `${e.target.value}%`);
56 | 			});
57 | 		})
58 | 	}
59 | })
60 | </script>


--------------------------------------------------------------------------------
/_components/image-compare-disabled.webc:
--------------------------------------------------------------------------------
 1 | <template webc:root :id="uid" aria-label="Compare two images">
 2 | 	<div class="slider">
 3 | 		<label :for="uid + '-slider'" class="visually-hidden">
 4 | 			How much of the image do you want to be hidden?
 5 | 		</label>
 6 | 		<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'" disabled>
 7 | 	</div>
 8 | 	<slot>Don’t forget the images!</slot>
 9 | </template>
10 | 
11 | <link rel="stylesheet" href="visually-hidden.css">
12 | 
13 | <!-- note that this is the same CSS as image-compare-disabled so it gets de-duplicated/shared for free -->
14 | 
15 | <style webc:scoped>
16 | :host {
17 | 	display: grid;
18 | 	max-width: 20em;
19 | }
20 | :host [disabled] {
21 | 	cursor: not-allowed;
22 | }
23 | :host input[type='range'] {
24 | 	width: 100%;
25 | }
26 | :host .slider,
27 | :host img {
28 | 	display: block;
29 | 	width: 100%;
30 | 	height: auto;
31 | 	object-fit: cover;
32 | 	grid-area: 2/1;
33 | }
34 | :host .slider {
35 | 	z-index: 1;
36 | 	height: 100%;
37 | 	display: flex;
38 | 	align-items: center;
39 | }
40 | :host img:first-of-type {
41 | 	clip-path: inset(0 0 0 var(--position));
42 | }
43 | </style>
44 | 
45 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
46 | 
47 | <script>
48 | customElements.define("image-compare-disabled", class extends HTMLElement {
49 | 	connectedCallback() {
50 | 		this.range = this.querySelector(":scope input[type='range']");
51 | 		this.range.removeAttribute("disabled");
52 | 
53 | 		this.range.addEventListener("input", (e) => {
54 | 			requestAnimationFrame(() => {
55 | 				this.style.setProperty("--position", `${e.target.value}%`);
56 | 			});
57 | 		})
58 | 	}
59 | })
60 | </script>


--------------------------------------------------------------------------------
/_components/image-compare-enabled.webc:
--------------------------------------------------------------------------------
 1 | <template webc:root :id="uid" aria-label="Compare two images">
 2 | 	<div class="slider">
 3 | 		<label :for="uid + '-slider'" class="visually-hidden">
 4 | 			How much of the image do you want to be hidden?
 5 | 		</label>
 6 | 		<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
 7 | 	</div>
 8 | 	<slot>Don’t forget the images!</slot>
 9 | </template>
10 | 
11 | <link rel="stylesheet" href="visually-hidden.css">
12 | 
13 | <!-- note that this is the same CSS as image-compare-disabled so it gets de-duplicated/shared for free -->
14 | <style webc:scoped>
15 | :host {
16 | 	display: grid;
17 | 	max-width: 20em;
18 | }
19 | :host [disabled] {
20 | 	cursor: not-allowed;
21 | }
22 | :host input[type='range'] {
23 | 	width: 100%;
24 | }
25 | :host .slider,
26 | :host img {
27 | 	display: block;
28 | 	width: 100%;
29 | 	height: auto;
30 | 	object-fit: cover;
31 | 	grid-area: 2/1;
32 | }
33 | :host .slider {
34 | 	z-index: 1;
35 | 	height: 100%;
36 | 	display: flex;
37 | 	align-items: center;
38 | }
39 | :host img:first-of-type {
40 | 	clip-path: inset(0 0 0 var(--position));
41 | }
42 | </style>
43 | 
44 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
45 | 
46 | <script>
47 | customElements.define("image-compare-enabled", class extends HTMLElement {
48 | 	connectedCallback() {
49 | 		this.range = this.querySelector(":scope input[type='range']");
50 | 		this.range.addEventListener("input", (e) => this.oninput(e.target.value));
51 | 
52 | 		// Synchronize the value if it changed before JS
53 | 		this.oninput(this.range.value);
54 | 	}
55 | 
56 | 	oninput(value) {
57 | 		requestAnimationFrame(() => {
58 | 			this.style.setProperty("--position", `${value}%`);
59 | 		});
60 | 	}
61 | })
62 | </script>


--------------------------------------------------------------------------------
/_components/image-compare-shadowdom.webc:
--------------------------------------------------------------------------------
 1 | <template webc:root :id="uid" aria-label="Compare two images">
 2 | 	<template shadowrootmode="open">
 3 | 		<style webc:keep>
 4 | 		input[type='range'] {
 5 | 			width: 100%;
 6 | 		}
 7 | 		label {
 8 | 			position: absolute;
 9 | 			overflow: hidden;
10 | 			white-space: nowrap;
11 | 			height: 1px;
12 | 			width: 1px;
13 | 		}
14 | 		.slider {
15 | 			display: block;
16 | 			width: 100%;
17 | 			height: auto;
18 | 			object-fit: cover;
19 | 			grid-area: 2/1;
20 | 			z-index: 1;
21 | 			height: 100%;
22 | 			display: flex;
23 | 			align-items: center;
24 | 		}
25 | 		</style>
26 | 
27 | 		<div class="slider">
28 | 			<label :for="uid + '-slider'">How much of the image do you want to be hidden?</label>
29 | 			<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
30 | 		</div>
31 | 
32 | 		<slot webc:keep></slot>
33 | 	</template>
34 | 
35 | 	<slot>Don’t forget the images!</slot>
36 | </template>
37 | 
38 | <style webc:scoped>
39 | :host {
40 | 	display: grid;
41 | 	max-width: 20em;
42 | }
43 | :host img {
44 | 	display: block;
45 | 	width: 100%;
46 | 	height: auto;
47 | 	object-fit: cover;
48 | 	grid-area: 2/1;
49 | }
50 | :host img:first-of-type {
51 | 	clip-path: inset(0 0 0 var(--position));
52 | }
53 | </style>
54 | 
55 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
56 | 
57 | <script>
58 | customElements.define("image-compare-shadowdom", class extends HTMLElement {
59 | 	connectedCallback() {
60 | 		if(this.hasAttribute("disabled")) {
61 | 			return;
62 | 		}
63 | 
64 | 		// Polyfill Declarative Shadow Root
65 | 		let root = this.shadowRoot;
66 | 		if(!this.shadowRoot) {
67 | 			let tmpl = this.querySelector(":scope > template[shadowrootmode]");
68 | 			root = this.attachShadow({ mode: "open" });
69 | 			root.appendChild(tmpl.content.cloneNode(true));
70 | 		}
71 | 
72 | 		this.range = root.querySelector("input[type='range']");
73 | 		this.range.addEventListener("input", (e) => this.oninput(e.target.value));
74 | 
75 | 		// Synchronize the value if it changed before JS
76 | 		this.oninput(this.range.value);
77 | 	}
78 | 
79 | 	oninput(value) {
80 | 		requestAnimationFrame(() => {
81 | 			this.style.setProperty("--position", `${value}%`);
82 | 		});
83 | 	}
84 | })
85 | </script>


--------------------------------------------------------------------------------
/_components/image-compare-nojs.webc:
--------------------------------------------------------------------------------
  1 | <template webc:root :id="uid" aria-label="Compare two images">
  2 | 	<template>
  3 | 		<div class="slider">
  4 | 			<label :for="uid + '-slider'" class="visually-hidden">
  5 | 				How much of the image do you want to be hidden?
  6 | 			</label>
  7 | 			<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
  8 | 		</div>
  9 | 	</template>
 10 | 	<slot>Don’t forget the images!</slot>
 11 | 	<fieldset>
 12 | 		<legend class="visually-hidden">How much of the image do you want to be hidden?</legend>
 13 | 		<script webc:type="render" webc:is="template">
 14 | 		function() {
 15 | 			let radios = [];
 16 | 			let name = this.name || `${this.uid}-slider`;
 17 | 			let incrementBy = 10;
 18 | 			let selectedIndex = Math.floor(this.value / incrementBy) * incrementBy;
 19 | 
 20 | 			for(let j = 0, k = 100; j<=k; j+=incrementBy) {
 21 | 				let id = `${this.uid}_${j}`;
 22 | 				radios.push(`<label for="${id}">
 23 | <input type="radio" name="${name}" id="${id}" value="${j}" aria-controls="${this.uid}"${selectedIndex === j ? " checked" : ""}>
 24 | <span class="visually-hidden">${j}%</span>
 25 | </label>`);
 26 | 			}
 27 | 			return radios.join("");
 28 | 		}
 29 | 		</script>
 30 | 	</fieldset>
 31 | </template>
 32 | 
 33 | <link rel="stylesheet" href="visually-hidden.css">
 34 | 
 35 | <style webc:scoped>
 36 | :host {
 37 | 	display: grid;
 38 | 	max-width: 20em;
 39 | }
 40 | :host:not(:defined) label {
 41 | 	display: inline-flex;
 42 | 	align-items: center;
 43 | 	white-space: nowrap;
 44 | }
 45 | :host label {
 46 | 	text-align: center;
 47 | }
 48 | :host input[type='range'] {
 49 | 	width: 100%;
 50 | }
 51 | :host fieldset,
 52 | :host .slider,
 53 | :host img {
 54 | 	display: block;
 55 | 	width: 100%;
 56 | 	height: auto;
 57 | 	object-fit: cover;
 58 | 	grid-area: 2/1;
 59 | }
 60 | :host fieldset,
 61 | :host .slider {
 62 | 	z-index: 1;
 63 | 	height: 100%;
 64 | 	display: flex;
 65 | 	align-items: center;
 66 | }
 67 | :host img:first-of-type {
 68 | 	clip-path: inset(0 0 0 var(--position));
 69 | }
 70 | :host fieldset {
 71 | 	display: none;
 72 | 	width: 100%;
 73 | 	justify-content: space-between;
 74 | 	padding: 0;
 75 | 	border: none;
 76 | }
 77 | /* Only show the radios is :has is supported */
 78 | @supports selector(:has(*)) {
 79 | 	:host fieldset {
 80 | 		display: flex;
 81 | 	}
 82 | }
 83 | </style>
 84 | 
 85 | <style @html="`#${uid} { --position: ${value}%; }`"></style>
 86 | 
 87 | <script webc:type="render" webc:is="style" webc:scoped>
 88 | function() {
 89 | 	let incrementBy = 10;
 90 | 	let styles = [];
 91 | 	for(let j = 0, k = 100; j<=k; j+=incrementBy) {
 92 | 		let id = `${this.uid}_${j}`;
 93 | 		styles.push(`:host:has(#${id}:checked) {
 94 | 	--position: ${j}%;
 95 | }`);
 96 | 	}
 97 | 	return styles.join("");
 98 | }
 99 | </script>
100 | 
101 | <script>
102 | customElements.define("image-compare-nojs", class extends HTMLElement {
103 | 	connectedCallback() {
104 | 		let {value} = this.querySelector(`:scope [type="radio"]:checked`);
105 | 		let fieldset = this.querySelector(":scope fieldset");
106 | 		let tmpl = this.querySelector(":scope template");
107 | 		fieldset.replaceWith(tmpl.content);
108 | 		tmpl.remove();
109 | 
110 | 		this.range = this.querySelector(":scope input[type='range']");
111 | 		this.range.value = value;
112 | 		this.oninput(value);
113 | 		this.range.addEventListener("input", (e) => this.oninput(e.target.value));
114 | 	}
115 | 
116 | 	oninput(value) {
117 | 		requestAnimationFrame(() => {
118 | 			this.style.setProperty("--position", `${value}%`);
119 | 		});
120 | 	}
121 | })
122 | </script>


--------------------------------------------------------------------------------
/index.webc:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: layout.webc
  3 | ---
  4 | <h1>Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components</h1>
  5 | 
  6 | <p>Return to the <a href="https://github.com/11ty/demo-webc-image-compare">GitHub repository</a>.</p>
  7 | 
  8 | <p><a href="https://www.11ty.dev/docs/languages/webc/">Learn more about WebC</a>.</p>
  9 | 
 10 | <p>The examples below are in order of implementation complexity from least to most. All are using <a href="https://www.11ty.dev/docs/plugins/partial-hydration/"><code>is-land</code></a>, specifically <code>&lt;is-land on:visible&gt;</code>. The pre-JS experience is emulated using <code>&lt;is-land on:media="(max-width: 0px)"&gt;</code>.</p>
 11 | 
 12 | <h2>Summary</h2>
 13 | 
 14 | <ul>
 15 | 	<li>If you want to show both images pre-JS, this can be solved with an entirely clientside Image Comparison component but it will negatively impact your Content Layout Shift score. This use case is not shown below.</li>
 16 | 	<li>Do you want to show either the left or right image pre-JS? Use <code>@value="0"</code> or <code>@value="100"</code> respectively.</li>
 17 | 	<li>Do you want the form control to be interactive pre-JS? Go to the <a href="#enabled">Always Enabled</a> approach.</li>
 18 | 	<li>If you want an interactive form control pre-JS and have it be functional too? See the <a href="#has-radios"><code>:has()</code> and Radios</a> approach.</li>
 19 | 	<li>Does this form input need to be a successful form control and submit to the server? The <a href="#dsd">ShadowDOM</a> example is the only one that doesn’t work with forms. This *could* be fixed with JS but is it worth it?</li>
 20 | </ul>
 21 | 
 22 | <h2>Table of Contents</h2>
 23 | 
 24 | <ol>
 25 | 	<li><a href="#enabled">Always Enabled</a></li>
 26 | 	<li><a href="#disabled">Disabled until JavaScript</a></li>
 27 | 	<li><a href="#hidden-css">Hidden via <code>:not(:defined)</code> CSS</a></li>
 28 | 	<li><a href="#hidden-tmpl">Hidden via JS <code>&lt;template&gt;</code></a></li>
 29 | 	<li><a href="#dsd">Declarative Shadow DOM</a></li>
 30 | 	<li><a href="#has-radios"><code>:has()</code> and Radios</a></li>
 31 | 	<li><a href="#opacity">Bonus: <code>opacity</code> Slider</a></li>
 32 | </ol>
 33 | 
 34 | <h2 id="enabled">Always Enabled</h2>
 35 | 
 36 | <ul>
 37 | 	<li><strong>Complexity Level: Low</strong></li>
 38 | 	<li>The range control is always enabled and synchronized to the display when JS initializes.</li>
 39 | 	<li>This has the potential for an uncanny valley in which the control is movable but the view is not updated!</li>
 40 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-enabled.webc">WebC source code</a></li>
 41 | </ul>
 42 | 
 43 | <syntax-highlight language="html">
 44 | <!-- WebC Component HTML -->
 45 | <image-compare-enabled @name="range-enabled" @value="50">
 46 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
 47 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
 48 | </image-compare-enabled>
 49 | </syntax-highlight>
 50 | 
 51 | <div class="columns" webc:bucket="compare-enabled">
 52 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
 53 | 	<style webc:keep @raw="getBundle('css', 'compare-enabled')"></style>
 54 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-enabled')" fetchpriority="low"> -->
 55 | 
 56 | 	<is-land on:media="(max-width: 0px)">
 57 | 		<form method="get">
 58 | 			<h3>Before JavaScript <button type="submit">Form Submit</button></h3>
 59 | 			<image-compare-enabled @name="range-enabled" @value="50">
 60 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
 61 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
 62 | 			</image-compare-enabled>
 63 | 		</form>
 64 | 	</is-land>
 65 | 
 66 | 	<is-land on:visible>
 67 | 		<template data-island="once">
 68 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-enabled')"></script>
 69 | 		</template>
 70 | 
 71 | 		<form method="get">
 72 | 			<h3>After JavaScript <button type="submit">Form Submit</button></h3>
 73 | 			<image-compare-enabled @name="range-enabled" @value="50">
 74 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
 75 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
 76 | 			</image-compare-enabled>
 77 | 		</form>
 78 | 	</is-land>
 79 | </div>
 80 | 
 81 | <h2 id="disabled">Disabled until JavaScript</h2>
 82 | 
 83 | <ul>
 84 | 	<li><strong>Complexity Level: Low</strong></li>
 85 | 	<li>This version uses JS to toggle the range input from disabled to enabled.</li>
 86 | 	<li>Disabling the control avoids the uncanny valley (in comparison to keeping it enabled) by communicating to the user that the control is not yet initialized.</li>
 87 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-disabled.webc">WebC source code</a></li>
 88 | </ul>
 89 | 
 90 | <syntax-highlight language="html">
 91 | <!-- WebC Component HTML -->
 92 | <image-compare-disabled @name="range-disabled" @value="50">
 93 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
 94 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
 95 | </image-compare-disabled>
 96 | </syntax-highlight>
 97 | 
 98 | <div class="columns" webc:bucket="compare-disabled">
 99 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
100 | 	<style webc:keep @raw="getBundle('css', 'compare-disabled')"></style>
101 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-disabled')" fetchpriority="low"> -->
102 | 
103 | 	<is-land on:media="(max-width: 0px)">
104 | 		<form method="get">
105 | 			<h3>Before JavaScript <button type="submit">Form Submit</button></h3>
106 | 			<image-compare-disabled @name="range-disabled" @value="50">
107 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
108 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
109 | 			</image-compare-disabled>
110 | 		</form>
111 | 	</is-land>
112 | 
113 | 	<is-land on:visible>
114 | 		<template data-island="once">
115 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-disabled')"></script>
116 | 		</template>
117 | 
118 | 		<form method="get">
119 | 			<h3>After JavaScript <button type="submit">Form Submit</button></h3>
120 | 			<image-compare-disabled @name="range-disabled" @value="50">
121 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
122 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
123 | 			</image-compare-disabled>
124 | 		</form>
125 | 	</is-land>
126 | </div>
127 | 
128 | <h2 id="hidden-css">Hidden via CSS</h2>
129 | 
130 | <ul>
131 | 	<li><strong>Complexity Level: Low</strong></li>
132 | 	<li>This version uses CSS <code>:not(:defined)</code> to hide the range input before JS.</li>
133 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-defined.webc">WebC source code</a></li>
134 | </ul>
135 | 
136 | <syntax-highlight language="html">
137 | <!-- WebC Component HTML -->
138 | <image-compare-defined @name="range-hidden" @value="50">
139 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
140 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
141 | </image-compare-defined>
142 | </syntax-highlight>
143 | 
144 | <div class="columns" webc:bucket="compare-defined">
145 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
146 | 	<style webc:keep @raw="getBundle('css', 'compare-defined')"></style>
147 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-defined')" fetchpriority="low"> -->
148 | 
149 | 	<is-land on:media="(max-width: 0px)">
150 | 		<form method="get">
151 | 			<h3>Before JavaScript <button type="submit">Form Submit</button></h3>
152 | 			<image-compare-defined @name="range-hidden" @value="50">
153 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
154 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
155 | 			</image-compare-defined>
156 | 		</form>
157 | 	</is-land>
158 | 	<is-land on:visible>
159 | 		<template data-island="once">
160 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-defined')"></script>
161 | 		</template>
162 | 
163 | 		<form method="get">
164 | 			<h3>After JavaScript <button type="submit">Form Submit</button></h3>
165 | 			<image-compare-defined @name="range-hidden" @value="50">
166 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
167 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
168 | 			</image-compare-defined>
169 | 		</form>
170 | 	</is-land>
171 | </div>
172 | 
173 | <h2 id="hidden-tmpl">Hidden via JS Template</h2>
174 | 
175 | <ul>
176 | 	<li><strong>Complexity Level: Low</strong></li>
177 | 	<li>This version uses JS to swap in <code>&lt;template&gt;</code> content holding the range input.</li>
178 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-hidden.webc">WebC source code</a></li>
179 | </ul>
180 | 
181 | <syntax-highlight language="html">
182 | <!-- WebC Component HTML -->
183 | <image-compare-hidden @name="range-hiddentmpl" @value="50">
184 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
185 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
186 | </image-compare-hidden>
187 | </syntax-highlight>
188 | 
189 | <div class="columns" webc:bucket="compare-hidden">
190 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
191 | 	<style webc:keep @raw="getBundle('css', 'compare-hidden')"></style>
192 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-hidden')" fetchpriority="low"> -->
193 | 
194 | 	<is-land on:media="(max-width: 0px)">
195 | 		<form method="get">
196 | 			<h3>Before JavaScript <button type="submit">Form Submit</button></h3>
197 | 			<image-compare-hidden @name="range-hiddentmpl" @value="50">
198 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
199 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
200 | 			</image-compare-hidden>
201 | 		</form>
202 | 	</is-land>
203 | 	<is-land on:visible>
204 | 		<template data-island="once">
205 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-hidden')"></script>
206 | 		</template>
207 | 
208 | 		<form method="get">
209 | 			<h3>After JavaScript <button type="submit">Form Submit</button></h3>
210 | 			<image-compare-hidden @name="range-hiddentmpl" @value="50">
211 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
212 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
213 | 			</image-compare-hidden>
214 | 		</form>
215 | 	</is-land>
216 | </div>
217 | 
218 | <h2 id="dsd">Declarative Shadow DOM</h2>
219 | 
220 | <ul>
221 | 	<li><strong>Complexity Level: Moderate</strong></li>
222 | 	<li>This version uses Declarative Shadow DOM for the range input. Before JS, the range input is always enabled and synchronized to the display when JS runs.</li>
223 | 	<li>When Declarative Shadow DOM is not supported, the polyfill is applied inline (it’s a few lines of code). Before JS, the range input is hidden.</li>
224 | 	<li><em>Benefit</em>: we can move some of the styles into Shadow DOM to scope those styles for free!</li>
225 | 	<li><em>Drawback</em>: This version does not have a successful form control because it uses Shadow DOM. This can be fixed with JS (but requires JS).</li>
226 | 	<li><em>Drawback</em>: Is there a way to de-duplicate the declarative shadow dom template without JavaScript? Does every instance of the component need the same nested markup?</li>
227 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-shadowdom.webc">WebC source code</a></li>
228 | </ul>
229 | 
230 | <syntax-highlight language="html">
231 | <!-- WebC Component HTML -->
232 | <image-compare-shadowdom @name="range-shadowdom" @value="50">
233 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
234 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
235 | </image-compare-shadowdom>
236 | </syntax-highlight>
237 | 
238 | <div class="columns" webc:bucket="compare-shadowdom">
239 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
240 | 	<style webc:keep @raw="getBundle('css', 'compare-shadowdom')"></style>
241 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-shadowdom')" fetchpriority="low"> -->
242 | 
243 | 	<is-land on:visible>
244 | 		<form method="get">
245 | 			<h3>Before JavaScript <button type="submit">Form Submit**</button></h3>
246 | 			<!-- We use a one-off disabled attribute here to simulate pre-JS, is-land component renaming was messing with DSD -->
247 | 			<image-compare-shadowdom disabled @name="range-shadowdom" @value="50">
248 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
249 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
250 | 			</image-compare-shadowdom>
251 | 			**Form submit is not successful.
252 | 		</form>
253 | 	</is-land>
254 | 
255 | 	<is-land on:visible>
256 | 		<template data-island="once">
257 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-shadowdom')"></script>
258 | 		</template>
259 | 		<form method="get">
260 | 			<h3>After JavaScript <button type="submit">Form Submit**</button></h3>
261 | 			<image-compare-shadowdom @name="range-shadowdom" @value="50">
262 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
263 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
264 | 			</image-compare-shadowdom>
265 | 			**Form submit is not successful.
266 | 		</form>
267 | 	</is-land>
268 | </div>
269 | 
270 | 
271 | <h2 id="has-radios"><code>:has()</code> and Radios</h2>
272 | 
273 | <ul>
274 | 	<li><strong>Complexity Level: Moderate</strong></li>
275 | 	<li>This version uses <code>:has</code> and radios for a functional No-JS experience (and synchronizes the value pre-JS and post-JS). Of course, the number of radios shown can be customized.</li>
276 | 	<li>If <code>:has()</code> is not supported (at time of writing, Firefox), the inputs are hidden (though you could modify this behavior to be Always Enabled and synchronized).</li>
277 | 	<li><a href="https://github.com/11ty/demo-webc-image-compare/blob/main/_components/image-compare-nojs.webc">WebC source code</a></li>
278 | </ul>
279 | 
280 | <syntax-highlight language="html">
281 | <!-- WebC Component HTML -->
282 | <image-compare-nojs @name="range-radios" @value="50">
283 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
284 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
285 | </image-compare-nojs>
286 | </syntax-highlight>
287 | 
288 | <div class="columns" webc:bucket="compare-nojs">
289 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
290 | 	<style webc:keep @raw="getBundle('css', 'compare-nojs')"></style>
291 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-nojs')" fetchpriority="low"> -->
292 | 
293 | 	<is-land on:media="(max-width: 0px)">
294 | 		<form method="get">
295 | 			<h3>Before JavaScript <button type="submit">Form Submit</button></h3>
296 | 			<image-compare-nojs @name="range-radios" @value="50">
297 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
298 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
299 | 			</image-compare-nojs>
300 | 		</form>
301 | 	</is-land>
302 | 	
303 | 	<is-land on:visible>
304 | 		<template data-island="once">
305 | 			<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-nojs')"></script>
306 | 		</template>
307 | 		<form method="get">
308 | 			<h3>After JavaScript <button type="submit">Form Submit</button></h3>
309 | 			<image-compare-nojs @name="range-radios" @value="50">
310 | 				<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
311 | 				<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
312 | 			</image-compare-nojs>
313 | 		</form>
314 | 	</is-land>
315 | </div>
316 | 
317 | <h2 id="opacity">Bonus: Opacity Slider</h2>
318 | 
319 | <p>For fun you can change <code>clip-path: inset(0 0 0 var(--position));</code> to <code>opacity: var(--position);</code> on any of these components to have the slider vary opacity instead of clip amount.</p>
320 | 
321 | <syntax-highlight language="html">
322 | <!-- WebC Component HTML -->
323 | <image-compare-defined @name="range-opacity" @value="50">
324 | 	<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy" style="clip-path: none; opacity: var(--position);">
325 | 	<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
326 | </image-compare-defined>
327 | </syntax-highlight>
328 | 
329 | <is-land on:visible webc:bucket="compare-defined">
330 | 	<!-- Here the do not want to lazy load the CSS or put a JS requirement on the CSS -->
331 | 	<style webc:keep @raw="getBundle('css', 'compare-defined')"></style>
332 | 	<!-- <link rel="stylesheet" webc:keep :href="getBundleFileUrl('css', 'compare-defined')" fetchpriority="low"> -->
333 | 
334 | 	<template data-island="once">
335 | 		<script type="module" webc:keep :src="getBundleFileUrl('js', 'compare-defined')"></script>
336 | 	</template>
337 | 
338 | 	<form method="get">
339 | 		<h3>After JavaScript <button type="submit">Form Submit</button></h3>
340 | 		<image-compare-defined @name="range-opacity" @value="50">
341 | 			<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy" style="clip-path: none; opacity: var(--position);">
342 | 			<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
343 | 		</image-compare-defined>
344 | 	</form>
345 | </is-land>


--------------------------------------------------------------------------------