[Malleys]

<div class="wrapper"></div>

<script>

class RootElement {
	constructor(tagName = "div") {
		this.element = document.createElement(tagName);
	}
	append(element = document.body) {
		element.appendCild(this.element);
	}
}

class Box extends RootElement {
	constructor(color, size = 150, tagName) {
		super(tagName);
		this.color = color;
		this.size = size;
		
		this.create();
	}
	create() {
		this.element.style.background = this.color;
		this.element.style.width = this.element.style.height = `${this.size}px`;
		this.element.append();
		return this;
	}
}

const yellowBox = new Box("yellow", 150, "div");
const greenBox = new Box("green", 100, "div");
document.querySelector(".wrapper").append(yellowBox.element, greenBox.element);
	
</script>

А вообще лучше наследовать от HTMLElement

UPD

<div class="wrapper"></div>

<script>

class RootElement extends HTMLDivElement {
	// то, что вы хотели, уже есть в HTMLDivElement
	// может вы захотите здесь объявить свои методы! 
}

class Box extends RootElement {
	constructor(color, size = 150) {
		super();
		this.color = color;
		this.size = size;
		
		this.style.background = this.color;
		this.style.width = `${this.size}px`;
		this.style.height = `${this.size}px`;
	}
}
customElements.define("custom-box", Box, { extends: "div" });

const yellowBox = new Box("yellow", 150);
const greenBox = new Box("green", 100);
document.querySelector(".wrapper").append(yellowBox, greenBox);
	
</script>