Tengo este elemento personalizado. (Dime si hay algún problema con esta construcción ya que soy nuevo en los elementos personalizados)
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) Y quiero acceder a uno de los íconos para agregar alguna funcionalidad de botón, lo que implica llamar a .querySelector .
const homeBtn = document.querySelector('left-navbar').root.querySelector('#home-i'); homeBtn.addEventListener('click', () => { window.location.href = 'index.html'; changePageTitle(0); }) Sin embargo, en el tiempo de ejecución aparece un error que indica Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector') . Dado document.querySelector('left-navbar').root es nulo. Estoy confundido en cuanto a lo que se supone que debo poner como parámetro para el primer .querySelector .
Además, aquí está la parte HTML.
<body> <main> <!-- Heading --> <h1 id='reading-heading'>Chapter ###</h1> <!-- Navigation Bar --> <left-navbar></left-navbar>