The <header-image> web component

Let's say that we have a web component called <header-image> whose purpose is to show an image, and, on hover, it should be able to show a text that shows a small description of the image. The definition of this web component would look something like this:

export default class HeaderImage extends HTMLElement {
  constructor() {

    // We are not even going to touch this.
    super();

    // lets create our shadow root
    this.shadowObj = this.attachShadow({mode: 'open'});

    // Then lets render the template
    this.render();
  }

  static get observedAttributes() {
    return ['src', 'alttext'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == 'src') {
      this.src = newValue;
      this.render();
    }
    if (name == 'alttext') {
      this.alt = newValue;
  ...