<textarea placeholder='type here' id='foo'></textarea>

@mixin root() {
	@at-root :root {
		@content;
	}	
}

@mixin element($target) {
	@include root() {
		--element-target: #{$target};
		--element-value: unset;
	}
	background: var(--element-value);
}

body {
	@include element(#foo);
}

;(() => {
	try {
		const computedStyle = getComputedStyle(document.documentElement);
		const fxSnapshotTarget = computedStyle.getPropertyValue('--element-target');
		const fxSnapshotTargetNode = document.querySelector(fxSnapshotTarget)
		
		async function onChange(){
			const canvas = await html2canvas(fxSnapshotTargetNode);
			const snapshotValue = `url('${canvas.toDataURL()}')`;
			document.body.style.setProperty('--element-value', snapshotValue);	
		}
		fxSnapshotTargetNode.addEventListener('keyup', onChange)
		onChange();
		
		new ResizeObserver(entries => {
			onChange();
		}).observe(fxSnapshotTargetNode);
		
	}
	catch (err) {
		console.error('oops, something went wrong!', err);
	}
})();