Since the <search-container> component is going to use the <gif-cover> and <search-bar> components, the outline of our component will look something like this:

import SearchBar from '../search-bar';
import GifCover from '../gif-cover';

export default class SearchContainer extends HTMLElement {
    ...
    ...
    ...
}

We are simply importing the classes of the Web Components that are going to be used in this component. This is pretty much the exact same thing that we have used in our index.html files.

Let's take a look at the constructor() method:

constructor() {

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

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

  this.registerOtherComponents();
  this.render();
}

Here, we have a registerOtherComponents() method that we are calling before the render() method. This is also the first time we are registering a custom element inside another custom element:

registerOtherComponents() {
  if (typeof customElements.get('search-bar') === 'undefined') {
    customElements.define('search-bar', SearchBar);
  }

  if (typeof customElements.get('gif-cover') === 'undefined') {
    customElements.define('gif-cover', GifCover);
  }
}

Here, we are first checking if the component has already been registered or not. If it has not been registered yet, then it registers it. Usually, a browser spits out an error message if it tries to register a custom element twice. This check is to fix that problem. 

Once we are done registering the Web Components, it's time to render:

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

getTemplate() {
  return `
    <div class="search-container__container">
      <search-bar></search-bar>
      <div class="search-container__images">
        <p>Try Searching for a tag in the search bar</p>
      </div>
    </div>
    ${this.getStyle()}
  `;
}

Here, we are rendering the <search-bar> component, but we do not see the <gif-cover> component. This is because the <gif-cover> components are to be shown only when data is retrieved from the <search-bar> component, and that is done when the <search-bar> component dispatches a search-complete event. Let's take a look at the connectedCallback() callback to add this event handler:

connectedCallback() {
  this.shadowObj.querySelector('search-bar')
    .addEventListener('search-complete', (e) => {
      this.handleSearchData(e.detail.data);
    });
}

Here, we are looking for the <search-bar> element and adding an event listener. When that event occurs, it is going to trigger the handleSearchData() method and pass the associated data into it:

handleSearchData(data) {
  data = data.map((val, index) => {
    return `
      <gif-cover url=${val.images.downsized_medium.url}></gif-cover>
    `;
  }).join('');
  this.shadowObj.querySelector('.search-container__images')
    .innerHTML = data;
}

Just like the student list example in the previous chapters, here we are creating an HTML collection of <gif-cover> Web Components with the URL obtained from the data array, and then appending this HTML to the search-container__images div. This will also make sure to replace the <gif-cover> with new data when the user searches for something else. 

Also, the getStyles() method is important. This is what it looks like:

getStyle() {
  return `
    <style>
      :host {
        display: block;
      }
      .search-container__container {
        display: block;
        padding: 10px;
      }
      .search-container__images {
        display: flex;
        padding: 10px;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
      }
      gif-cover {
        flex-basis: 10%;
        padding: 5px;
      }
    </style>
  `;
}

Now that we have our <search-container> Web Component all set, let's add it to the <my-app> component, as shown here:

getTemplate() {
  return `
    <search-container></search-container>
    ${this.getStyle()}
  `;
}

Also, don't forget to register the component, as shown in the following:

if (typeof customElements.get('search-container') === 'undefined') {
  customElements.define('search-container', SearchContainer);
}

This way, we can make sure that SearchContainer is initialized only once.

Feel free to run the code and see if you are able to see a search bar; clicking on the search button will return some results.

Let's take a look at the <show-trending> component.