Step 5

component.js

class CandidateImage extends HTMLElement {
  connectedCallback() {
    this.shadow = this.attachShadow({ mode: 'open' });
    
    // Create an image
    const image = new Image();
    
    // Find the right image for the provided name
    if (this.getAttribute('name') === 'pete') {
      image.src = 'https://cdn-candidates.com/pete.jpg';
    } else if (this.getAttribute('name') === 'bernie') {
      image.src = 'https://cdn-candidates.com/bernie.jpg';
    }

    // We can use appendChild just like we do the normal document
    this.shadow.appendChild(image);
    
    // If the status is `winner` then add some text
    if (this.getAttribute('status') === 'winner') {
      this.addWinnerText(); 
    }
    
    // Add our styles
    this.createStyles();
  }
  
  /**
   * Adds text to our image indicating a winner
   */
  addWinnerText() {
    const winnerSpan = document.createElement('span');
    winnerSpan.classList.add('winner');
    winnerSpan.innerText = 'Winner!!!';
    this.shadow.appendChild(winnerSpan);
  }
  
  /**
   * Create the styles for our candidates
   * We do this as a normal string rather than using @import
   * since it is not supported in all browsers
   * 
   * (same for new CSSStyleSheet, which is only supported in Chrome)
   */
  createStyles() {
    const styleTemplate = `
    <style>
    .winner {
      position: absolute;
      color: white;
      font-size: 30px;
      top: 10px;
      left: 160px;
      height: 30px;
      font-weight: 800;
      text-transform: uppercase;
    }
    </style>`;
    this.shadow.innerHTML = styleTemplate;
  }
};

/**
 * Register our custom element
 */
window.addEventListener('DOMContentLoaded', () => {
  customElements.define('candidate-image', CandidateImage);
});