image-compare-shadowdom.webc

<template webc:root :id="uid" aria-label="Compare two images">
	<template shadowrootmode="open">
		<style webc:keep>
		input[type='range'] {
			width: 100%;
		}
		label {
			position: absolute;
			overflow: hidden;
			white-space: nowrap;
			height: 1px;
			width: 1px;
		}
		.slider {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
			grid-area: 2/1;
			z-index: 1;
			height: 100%;
			display: flex;
			align-items: center;
		}
		</style>

		<div class="slider">
			<label :for="uid + '-slider'">How much of the image do you want to be hidden?</label>
			<input type="range" :name="name" :value="value" :aria-controls="uid" :id="uid + '-slider'">
		</div>

		<slot webc:keep></slot>
	</template>

	<slot>Don’t forget the images!</slot>
</template>

<style webc:scoped>
:host {
	display: grid;
	max-width: 20em;
}
:host img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	grid-area: 2/1;
}
:host img:first-of-type {
	clip-path: inset(0 0 0 var(--position));
}
</style>

<style @html="`#${uid} { --position: ${value}%; }`"></style>

<script>
customElements.define("image-compare-shadowdom", class extends HTMLElement {
	connectedCallback() {
		if(this.hasAttribute("disabled")) {
			return;
		}

		// Polyfill Declarative Shadow Root
		let root = this.shadowRoot;
		if(!this.shadowRoot) {
			let tmpl = this.querySelector(":scope > template[shadowrootmode]");
			root = this.attachShadow({ mode: "open" });
			root.appendChild(tmpl.content.cloneNode(true));
		}

		this.range = root.querySelector("input[type='range']");
		this.range.addEventListener("input", (e) => this.oninput(e.target.value));

		// Synchronize the value if it changed before JS
		this.oninput(this.range.value);
	}

	oninput(value) {
		requestAnimationFrame(() => {
			this.style.setProperty("--position", `${value}%`);
		});
	}
})
</script>