Getting Started with Web Components

The <search-container> Web Component

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(); ...