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