Implementing routing

Until now, we have been manually changing the code to see different pages of our single-page web app. Also, we have not talked about the header component yet. In this section, we will take a look at the header component, update the URLs based on the link, and make sure our page view changes based on the link clicked. 

So, let's take a look at the <custom-header> component:

constructor() {

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

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

  this.render();
}

The constructor() method is straightforward. Let's take a look at the render() method:

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

getTemplate() {
  return `
    <ul class="custom-header__ul">
      <li class="custom-header__li">
        <a href=...