What is an iframe srcdoc attribute?

by Admiral Potato

HTML

<div
	class="container"
	style="height: 100%;"
>
	<div style="height: 20%; background-color: #ffe;">
		<form
			id="content-form"
			class="editor"
		>
			<div>
				<label>
					<span>Name</span>
					<input
						name="name"
						value=""
					/>
				</label>		
			</div>
			<div>
				<label>
					<span>Color</span>
					<select name="color" value="">
						<option></option>
						<option>#f00</option>
						<option>#0f0</option>
						<option>#00f</option>
					</select>
				</label>		
			</div>
			<div>
				<label>
					<span>Background</span>
					<select name="background">
						<option></option>
						<option>space</option>
						<option>ponies</option>
						<option>kittens</option>
					</select>
				</label>		
			</div>
			<div>
				<input type="submit" />			
			</div>
		</form>
	</div>
	<div style="height: 80%; background-color: #fee;">
		<iframe
			id="content-frame"
			width="100%"
			height="100%"
			style="border: none;"
			srcdoc="<h1>I feel so empty inside until you submit the form</h1>"
		></iframe>
	</div>
</div>

CSS

html, body {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

body {
	font-family: monospace;
	font-size: 16px;
	color: #333;
}

JavaScript

var form = document.getElementById('content-form');
var frame = document.getElementById('content-frame');

var backgrounds = {
	space: 'https://images.unsplash.com/photo-1502134249126-9f3755a50d78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80',
	ponies: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e3490199-0334-4ea5-89b4-d05970093cda/d4j9n4k-cd027684-5a65-47a1-80fe-c11575cb942a.png/v1/fill/w_1192,h_670,q_70,strp/my_little_pony_fim_six_mane_wallpaper_by_bluedragonhans_d4j9n4k-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcL2UzNDkwMTk5LTAzMzQtNGVhNS04OWI0LWQwNTk3MDA5M2NkYVwvZDRqOW40ay1jZDAyNzY4NC01YTY1LTQ3YTEtODBmZS1jMTE1NzVjYjk0MmEucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.ldaFpCLZRjvQ02N2XiyVzpiiHUhsSLH8qq5Edyq-sts',
	kittens: 'https://3diphonewallpaper.com/wp-content/uploads/2017/10/Cute-Two-Kittens-Wallpaper-iPhone.jpg'
}

var renderPage = (values) => {
	var name = values.name || 'UNKNOWN';
	var color = values.color || '#fff';
	var background = backgrounds[
		values.background || 'space'
	]
	frame.setAttribute(
		'srcdoc',
		/* html */`
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/darkly/bootstrap.min.css" />
<style>
	body {
		background-color: #000;
		background-image: url("${background}");
		color: ${color}
	}
</style>
</head>
<body>
	<h1>WELCOME, ${name}, WE HAVE BEEN WAITING AN ETERNITY FOR YOUR RETURN.</h1>
	<p>NOW, LET US PARTAKE OF THE CAKE BEFORE WE RETURN THIS UNIVERSE TO THE VOID FROM WHICH WE SPAWNED IT.</p>
</body>
</html>
		`
	)
};

var handleSubmit = (event) => {
	event.preventDefault();
	var data = new FormData(event.target);
	var value =...