Akordeon prawie działa

assets/js/akordeon.js

@@ -2,23 +2,73 @@ class Akordeon extends HTMLElement {
     constructor() {
         super();
         this._internals = this.attachInternals();
+        this.otwarte = this.getAttribute("otwarte") == "true";
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.shadow.onslotchange = ev => {
+            console.log(ev);
+        };
     }
     
-    get collapsed() {
-        return this._internals.states.has("hidden");
+    get otwarte() {
+        return this._internals.states.has("otwarte");
     }
 
-    set collapsed(flag) {
+    set otwarte(flag) {
         if (flag) {
-            // Existence of identifier corresponds to "true"
-            this._internals.states.add("hidden");
+            this._internals.states.add("otwarte");
         } else {
-            // Absence of identifier corresponds to "false"
-            this._internals.states.delete("hidden");
+            this._internals.states.delete("otwarte");
         }
     }
 
-    connecterCallback() {
+    connectedCallback() {
+        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;
+            }
+
+            ::part(button)(:state(otwarte)) {
+                border-bottom-color: var(--colorSurface2);
+                scale: 1.005;
+            }
+
+            slot {
+                display: inline;
+                padding: .5rem;
+            }
+        `;
+        this.shadow.appendChild(styl);
+
+        const przycisk = document.createElement("button");
+        przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
+        przycisk.onclick = () => {
+            this.otwarte = !this.otwarte;
+        };
+        this.shadow.appendChild(przycisk);
+
+        this.contents = document.createElement("slot");
+        this.shadow.appendChild(this.contents);
     }
 
     attributeChangedCallback(atrybut, poprzednio, obecnie) {
@@ -26,4 +76,4 @@ class Akordeon extends HTMLElement {
     }
 }
 
-customElements.define("akordeon", Akordeon);
+customElements.define("akordeon-comp", Akordeon);