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

Get Getting Started with Web Components now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.