https://physicsguy.com/star-trek/components/sliding-bars/sliding-bars.js

1// /your-project/components/sliding-bars/sliding-bars.js
2
3// Start of the IIFE
4(function () {
5    "use strict";
6
7    const TEMPLATE_URL = new URL(
8        "./sliding-bars.html",
9        import.meta.url
10    ).pathname;
11
12    const templatePromise = fetch(TEMPLATE_URL)
13        .then(response => {
14            if (!response.ok) {
15                throw new Error(`Failed to load template: ${response.status}`);
16            }
17            return response.text();
18        })
19        .then(htmlString => {
20            const template = document.createElement("template");
21            template.innerHTML = htmlString.trim();
22            // Remove all dev-only elements
23            template.content.querySelectorAll('[data-dev-only="true"]')
24                .forEach(el => el.remove());
25            return template;
26        })
27        .catch(err => {
28            console.error("Error loading sliding-bars template:", err);
29        });
30
31    class SlidingBars extends HTMLElement {
32        constructor() {
33            super();
34            this.attachShadow({ mode: "open" });
35        }
36
37        connectedCallback() {
38            templatePromise.then(template => {
39                if (template) {
40                    const clone = template.content.cloneNode(true);
41                    this.shadowRoot.appendChild(clone);
42                }
43            });
44        }
45
46        // Optional: observe attribute changes if you want to support dynamic updates
47        static get observedAttributes() {
48            return ["color-style"];
49        }
50
51        attributeChangedCallback(name, oldValue, newValue) {
52            if (name === "color-style" && oldValue !== newValue) {
53                // The color change is handled purely by CSS via :host([color-style="..."])
54                // No additional JS needed unless you add more complex logic later
55            }
56        }
57    }
58
59    customElements.define("sliding-bars", SlidingBars);
60})(); // End of the IIFE