As discussed earlier, the purpose of this web component is to show a GIF. And, from the screenshots, we can see that it is one of the most reusable components of the project. So, let's start writing its code:

export default class GifCover extends HTMLElement {
  constructor() {

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

    // lets get the url from attribute
    this.url = this.getAttribute('url');

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

    this.render();
  }

  ...
}

In the constructor(), we are using this.url to grab the URL from the attribute. We will be using this URL as a source for the image, as shown in the following code:

render() {
  this.shadowObj.innerHTML = this.getTemplate();
}

getTemplate() {
  return `
    <div>
      <img class="gif-cover__image"
        src="${this.url}" />
    </div>
    ${this.getStyle()}
  `;
}

We will also need styles for this component; we can achieve this by adding the following:

getStyle() {
  return `
    <style>
      :host {
        display: block;
      }
      .gif-cover__image {
        height: 150px;
      }
    </style>
  `;
}

As you can see, the only limitation that we are putting on this component is the image height. You can definitely remove it if you don't like it.

Once our <gif-cover> web component is done, we can move on to another web component.