MaszToZadanieDomowe.com/assets/js/akordeon.js

class Akordeon extends HTMLElement {
    constructor() {
        super();

        this._internals = this.attachInternals();

        this.shadow = this.attachShadow({ mode: "open" });

        this.przycisk = document.createElement("button");
        this.przycisk.onclick = () => {
            this.otwarte = !this.otwarte;
        };

        this.contents = document.createElement("slot");
    }
    
    get otwarte() {
        return this._internals.states.has("otwarte");
    }

    set otwarte(flag) {
        if (flag) {
            this._internals.states.add("otwarte");
            this.przycisk.className = "otwarte";
            this.contents.className = "otwarte";
        } else {
            this._internals.states.delete("otwarte");
            this.przycisk.className = "";
            this.contents.className = "";
        }
    }

    connectedCallback() {
        this.przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
        this.otwarte = this.getAttribute("otwarte") == "true";

        const styl = document.createElement("style");
        styl.textContent = `
            @import url('/assets/css/baza.css');

            :host {
                border-radius: 1rem;

                display: inline-flex;
                flex-direction: column;
                width: 100%;
            }

            :host(:state(otwarte)) {
                background-color: var(--colorSurface0);
                border: .2rem solid var(--colorOverlay1);
                border-top-color: transparent;
            }

            button {
                border: .2rem solid var(--colorOverlay2);
                position: relative;
                margin: 0%;
                text-align: left;
            }

            button.otwarte {
                border-bottom-color: var(--colorSurface2);
                scale: 1.006;
            }

            slot {
                display: none;
            }

            slot.otwarte {
                display: inline;
                padding: .5rem;
            }
        `;
        this.shadow.appendChild(styl);
        this.shadow.appendChild(this.przycisk);
        this.shadow.appendChild(this.contents);
    }
}

customElements.define("akordeon-comp", Akordeon);