57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
class ToyShelf extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
|
|
|
|
const wrapper = document.createElement("span");
|
|
wrapper.setAttribute("class", "wrapper");
|
|
const shelf = document.createElement("span")
|
|
shelf.setAttribute("class", "shelf")
|
|
|
|
const topshelf = shelf.appendChild(document.createElement("div"));
|
|
topshelf.setAttribute("class", "top-shelf face");
|
|
const leftshelf = shelf.appendChild(document.createElement("div"));
|
|
leftshelf.setAttribute("class", "left-shelf small-face");
|
|
const rightshelf = shelf.appendChild(document.createElement("div"));
|
|
rightshelf.setAttribute("class", "right-shelf small-face");
|
|
const back = shelf.appendChild(document.createElement("div"));
|
|
back.setAttribute("class", "back-shelf face");
|
|
const bottomshelf = shelf.appendChild(document.createElement("div"));
|
|
bottomshelf.setAttribute("class", "bottom-shelf face");
|
|
const front = shelf.appendChild(document.createElement("div"));
|
|
front.setAttribute("class", "front-shelf face");
|
|
|
|
let style = document.createElement("link");
|
|
style.setAttribute("rel", "stylesheet");
|
|
style.setAttribute("href", "css/shelf.css")
|
|
|
|
wrapper.appendChild(shelf);
|
|
shadow.appendChild(wrapper);
|
|
shadow.appendChild(style);
|
|
|
|
}
|
|
}
|
|
|
|
class ShopCounter extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
|
|
|
|
let style = document.createElement("link");
|
|
style.setAttribute("rel", "stylesheet");
|
|
style.setAttribute("href", "css/counter.css")
|
|
|
|
const wrapper = document.createElement("span");
|
|
wrapper.setAttribute("class", "wrapper");
|
|
const shelf = document.createElement("span")
|
|
shelf.setAttribute("class", "counter")
|
|
|
|
shadow.appendChild(wrapper);
|
|
shadow.appendChild(style);
|
|
|
|
}
|
|
}
|
|
|
|
customElements.define("toy-shelf", ToyShelf);
|
|
customElements.define("shop-counter", ShopCounter); |