# 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)