pragma-views2/baremetal/components/conditional-container/conditional-container.js

class ConditionalContainer extends HTMLElement {
    get visible() {
        return this._visible;
    }

    set visible(newValue) {
        this._visible = newValue == true;

        if (this._visible == false) {
            this.setAttribute("aria-hidden", true);
        } else {
            this.removeAttribute("aria-hidden");
        }

        this.setAttribute("visible", newValue);
    }

    static get observedAttributes() {
        return ['visible'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name == "visible") {
            const isVisible = newValue == "true" || newValue == true;
            if (this.visible != isVisible) {
                this.visible = isVisible;
            }
        }
    }

    connectedCallback() {
        this.visible = this.getAttribute("visible") == "true";
    }
}

customElements.define("conditional-container", ConditionalContainer);