I have this custom element. (Tell me if there is something wrong with this construction as I am new to custom elements)
class Navbar extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<nav id='navbar'>
<i class="fas fa-home" id='home-i'></i>
<hr class="line">
<i class="fas fa-arrow-alt-circle-left" id='back-i'></i>
<i class="fas fa-brain"></i>
<i class="fas fa-lightbulb" id='quiz-i'></i>
<i class="fas fa-sign-out-alt" id='exit-i'></i>
</nav>
`
}
}
customElements.define('left-navbar', Navbar)
And I want to access one of the icons to add some button functionality, which involves calling .querySelector.
const homeBtn = document.querySelector('left-navbar').root.querySelector('#home-i');
homeBtn.addEventListener('click', () => {
window.location.href = 'index.html';
changePageTitle(0);
})
However, upon run time I get an error stating Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector'). Since document.querySelector('left-navbar').root is null. I am confused as to what I am supposed to put in as the parameter for the first .querySelector.
Also, here is the HTML part.
<body>
<main>
<!-- Heading -->
<h1 id='reading-heading'>Chapter ###</h1>
<!-- Navigation Bar -->
<left-navbar></left-navbar>