Step 3

component.js

class CandidateImage extends HTMLElement {
  connectedCallback() {
    this.shadow = this.attachShadow({ mode: 'open' });
    
    // Create an image
    const image = new Image();
    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);
});