connectedCallback

/**
   * connectedCalled - WebComponents LifeCycle method
   */
  connectedCallback() : void {
    console.log("UnicodeGlpyhSelector::connectCallback")
    /* 
      The task at hand: On connection to the DOM, wire up the individual menus for this component 
      with the event handlers that will handle them.
      There are 4 components, and likewise 4 functions to handle events respectively for
        The Glyph category 
        The Glyph range display/selector
        The Glyph size
        The Glyph color 
      */
        
    /** Here's one way: Start at the top, and handle each case manually **/
    const glyphCategoryItems = this.shadowRoot.querySelectorAll('.unicode-selector-menu-item')    
    glyphCategoryItems.forEach((element : HTMLElement) => {                  
      element.addEventListener('click', this.onCategorySelect)
    }, this)

    const glyphCells = this.shadowRoot.querySelectorAll('.glyph-cells div')
    glyphCells.forEach((element : HTMLElement) => {      
      element.addEventListener('click', this.onGlyphSelect)
    }, this) 

    const sizeItems = this.shadowRoot.querySelectorAll('.glyph-size-menu li')
    sizeItems.forEach((element : HTMLElement) => {      
      element.addEventListener('click', this.onSizeSelect)
    }, this)

    const colorCells = this.shadowRoot.querySelectorAll('.color-cell')    
    colorCells.forEach((element : HTMLElement) => {      
      element.addEventListener('click', this.onColorSelect)
    }, this)    

    /** Here's another way: Encapsulate the above problem as a series of 'configurable' tasks, and then try something 
    more sohpisticated like this: **/
    type AssignmentSpec = Array<unknown>
    const assignmentSpec : AssignmentSpec = [
      { event : 'click', selector : '.unicode-selector-menu-item', handler : this.onCategorySelect },
      { event : 'click', selector : '.glyph-cells div', handler : this.onGlyphSelect },
      { event : 'click', selector : '.glyph-size-menu li', handler : this.onSizeSelect },
      { event : 'click', selector : '.color-cell', handler : this.onColorSelect }
    ]

    assignmentSpec.map((assignment : Record<string, unknown>) : void => {
      const elements = this.shadowRoot.querySelectorAll(assignment.selector as string)
      elements.forEach((element: HTMLElement) => {        
        element.addEventListener(assignment.event as string, assignment.handler as (e:MouseEvent) => void)
      })
    })
    

    // Which way is best, and why?
  }