class CoordsElement extends HTMLElement {
    #shadow;

    get lon(){
        return parseFloat(this.getAttribute("lon"))
    }

    set lon(value){
        this.setAttribute("lon", value)
    }

    get lat(){
        return parseFloat(this.getAttribute("lat"))
    }

    set lat(value){
        this.setAttribute("lat", value)
    }
    
    connectedCallback(){
        this.#shadow = this.attachShadow({mode: "open"})
        this.updateContent()
    }

    updateContent(){
        this.#shadow?.replaceChildren(
            this.formatCoordComponent(this.lat),
            ", ",
            this.formatCoordComponent(this.lon)
        )
    }

    formatCoordComponent(coord){
        let [whole, frac] = coord.toString()
            .split(".");

        console.log(coord, whole, frac)

        return `${whole || "0"}.${(frac || "00").substring(0, 7)}`
    }

    static observedAttributes = ["lat", "lon"]

    attributeChangedCallback(name, oldVal, newVal){
        this.updateContent()
    }
}

customElements.define("camp-coords", CoordsElement)