Step 4

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);
  }
}

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