Estoy construyendo un componente de navegación usando elementos personalizados html como este:
HTML
<app-navbar></app-navbar> <template> <style> ul { display: flex; list-style: none; gap: 20px; } a { padding: 10px; text-decoration: none; } .active { color: white; background-color: red; } </style> <nav> <ul> <li><a href="/page-one.html">Nav item 1</a></li> <li><a href="/page-two.html">Nav item 2</a></li> <li><a href="/page-three.html">Nav item 3</a></li> </ul> </nav>JS
class AppNavBar extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); const template = document.querySelector('template'); this.shadowRoot.appendChild(template.content.cloneNode(true)) } } window.customElements.define("app-navbar", AppNavBar) Y ahora necesito pasar la clase activa al elemento de navegación respectivo. Por ejemplo, al hacer clic en el <a href="/page-two.html">Nav item 2</a> , quiero que ese elemento tenga la clase .active, etc.
Actualizar
Algo como:
página-uno.html
<app-navbar page-one-nav-item="active"></app-navbar>
página-dos.html
<app-navbar page-two-nav-item="active"></app-navbar>
página-tres.html
<app-navbar page-three-nav-item="active"></app-navbar>
¿Es posible lograr esto con elementos personalizados html?
Gracias.
Si desea hacerlo con un componente web, envuelva el <a> en un componente web:
<nav-a href="/page-one.html">Nav item 1</nav-a>
console.log(location); customElements.define("nav-a", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let href = this.getAttribute("href"); let klass = (location.href.includes(href)) ? "active" : ""; this.innerHTML = `<a class="${klass}" href="${href}">${this.innerHTML}</a>`; }); } });