JSFiddle - React, Tailwind, and code Playground

Object Element Test - Isolates nested js & css while preserving SEO - Better than iFrames

by skibulk

HTML

<object id="sandbox" type="text/html">
	<style>
		div {
			background: red;
		}
	</style>
	<div id="sandboxContent">Hello World</div>
</object>

CSS

p {
	background: blue !important;
}

object {
	display: block;
	width: 100%;
	height: auto;
}

JavaScript

// Challenge: Object Auto Height
// To Do: add object type dynamically - No JS fallback

var sandbox = document.getElementById("sandbox");

sandboxDoc =
	sandbox.contentWindow.document ||
	sandbox.contentDocument.document;
	
sandboxDoc.open();
sandboxDoc.write(sandbox.innerHTML);
sandboxDoc.close();

// To Do: use append child instead
// var sandboxContent = document.getElementById("sandboxContent");
// console.log(sandboxContent);