JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div></div>

CSS

div {
	position: sticky;
	background: red;
}

div:first-child {
	position: sticky;
}

i {
	color: blue;
}

JavaScript

function duplicateNode(node) {
	let newElement = document.createElement(node.tagName);
	let nodeProps = window.getComputedStyle(node);
	let baseProps = window.getComputedStyle(newElement);
	let newProps = {};

	//Remove styles with default value
	document.body.appendChild(newElement);
	for (let prop of [...nodeProps]) {
		console.log(prop);
		if (nodeProps[prop] != baseProps[prop]) {
			newProps[prop] = nodeProps[prop];
		}
	}
	document.body.removeChild(newElement);

	newElement.innerHTML = node.innerHTML;
	newElement.style.cssText = Object.keys(newProps)
		.reduce((p, c) => p + `${c}:${newProps[c]}`, "");

	return newElement;
}

console.clear();
let el = document.querySelector("div");
let clone = duplicateNode(el);
console.log(clone);