Getting Started with Web Components

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 ...