<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>
|