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 counter = document.createElement("span")
        counter.setAttribute("class", "counter")

        const topshelf = counter.appendChild(document.createElement("div"));
        topshelf.setAttribute("class", "top-shelf horiz-side");
        const bottomshelf = counter.appendChild(document.createElement("div"));
        bottomshelf.setAttribute("class", "bottom-shelf horiz-side");
        const leftshelf = counter.appendChild(document.createElement("div"));
        leftshelf.setAttribute("class", "left-shelf vert-side");
        const rightshelf = counter.appendChild(document.createElement("div"));
        rightshelf.setAttribute("class", "right-shelf vert-side");
        const back = counter.appendChild(document.createElement("div"));
        back.setAttribute("class", "back-shelf face");
        const front = counter.appendChild(document.createElement("div"));
        front.setAttribute("class", "front-shelf face");


        wrapper.appendChild(counter);
        shadow.appendChild(wrapper);
        shadow.appendChild(style);

    }
}

customElements.define("toy-shelf", ToyShelf);
customElements.define("shop-counter", ShopCounter);