display.js

class Display extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
    <div id="display" class="display">${this.setSelected()}</div>
    `;
    this.display = this.shadowRoot.querySelector('#display');
  }
  
  static get observedAttributes() {
    return ['selected'];
  }
  attributeChangedCallback() {
    this.display.innerHTML = this.setSelected();
  }
  
  setSelected() {
    const key = this.getAttribute('selected');
    const dataLength = data.options[key] ? data.options[key].length : 0;
    const randomNumber = Math.floor(Math.random() * Math.floor(dataLength));
    const selected = data.options[key] ? data.options[key][randomNumber] : '';
    return selected ? selected : 'Choose an author';
  }
}