Functional components

Now that we know what the <my-app> component looks like and what it needs to work, let's start writing the components that we discussed in the beginning of this chapter.

The <gif-cover> Web Component

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