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.
Functional components
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({mode...