navBar.js

class NavBar extends HTMLElement {
  constructor() {
    super();
    
    this.render = this.render.bind(this);
    this.render();
    this.optionButtons = this.shadowRoot.querySelectorAll('.option_button');
    this.optionButtons.forEach(optionButton =>
      optionButton.addEventListener('click', this.handleClick)
    );
  }
  handleClick(e) {
    const selected = e.target.textContent;
    const container = document.querySelector('#display-field');
    container.setAttribute('selected', selected);
  }
  options() {
    let options = data;
    return Object.keys(options).map(option => { 
      return `
      <li value="${option}" class="nav_option">
      <button class="option_button" onclick="this.handleClick">${option}</button>
      </li>`;
    }).join('');
  }
  render() {
    const shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open'});
    shadowRoot.innerHTML = `
    <ol id="${this.id}" class="nav_bar">
    ${this.options()}
    </ol>
    `;
  }
}
customElements.define('nav-bar', NavBar);