Source: alpha/dynamic-list.js


let template = document.createElement('template');
template.innerHTML = /*html*/ `
    <div>List items:</div>
    <ul></ul>
`

let instanceCount = 0
const instance = {}

// Create a GLOBAL var for this component
// window.dataList = {
//     count: 0,
//     instances: {},

    

//     setData: (elementId, elementData) => {
//         console.log('>> setData this >>', window.dataList.instances[elementId])
//         // Get ref to element
//         let el = document.getElementById(elementId)

//         // Set the data

//     },
// }

export default class DataList extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open', delegatesFocus: true })
            .append(template.content.cloneNode(true))

        

        this._list = this.shadowRoot.querySelector('ul')

        this._entries = {}
    }

    // Getter/setter for the `data` public property - maps to this._entries
    set data(val) {
        this._entries = val

        this._list.innerHTML = ''
        // Dynamically build the content of the ul/ol
        Object.keys(this._entries).forEach( (key, i) => {
            this._list.insertAdjacentHTML('beforeend', `<li id="${key}">${key} :: ${this._entries[key]}</li>`)
        })
    }
    get data() {
        return this._entries
    }
    entry(key, val) {
        // this._list.innerHTML = ''
        this._entries[key] = val
        this.data = this._entries

        let sr = this.shadowRoot.getElementById(key)
        console.log('>> li key >>', sr)

        
        // Dynamically build the content of the ul/ol
        // Object.keys(this._entries).forEach( (key, i) => {
        //     this._list.insertAdjacentHTML('beforeend', `<li id="${key}">${key} :: ${this._entries[key]}</li>`)
        // })
    }

    static get instances() {
        return instanceCount
    }

    getInstance(instanceId) {
        return instance[instanceId]
    }

    static get observedAttributes() { return [
        'listvar', 'type',
    ]}

    attributeChangedCallback(name, oldVal, newVal) {

        if ( oldVal === newVal ) return

        if ( name === 'listvar' && window[newVal] ) {
            if ( window[newVal] ) {

                this.data = window[newVal]
                // window.dataList.instances[this.id] = window[newVal]
                // console.log('>> listvar change >>', this.id, this._entries, window.dataList.instances[this.id])
                //window[newVal] = new Proxy()

            } else {
                console.error(`[DataList] window.${newVal} does not exist, ignoring.`)
            }

            return
        }

        this[name] = newVal

    } // --- end of attributeChangedCallback --- //

    connectedCallback() {
        // Keep count of the number of instances
        instanceCount++

        // If no element id, create an ID that should be unique across all instances
        if (!this.id) {
            let myname = this.getAttribute('name')
            if (myname) this.id = myname.replaceAll(' ', '_')
            else this.id = `dataList${instanceCount}`
        }

        // Keep track of each instance
        instance[this.id] = this

        // Notify Event
        
    }

    disconnectedCallback() {
        // Keep count of the number of instances
        instanceCount--

        // Keep track of each instance
        delete instance[this.id]
    }
}

/** Self register the class to global
 * Enables new data lists to be dynamically added via JS
 * and lets the static methods be called
 */
window.DataList = DataList

// Export the class as default
// export default DataList

// Self-register the HTML tag
customElements.define('data-list', DataList)