„addEventListener“ funktioniert nicht für HTML-Webkomponenten ⇐ JavaScript

[Guest]

Ich habe eine Webkomponente wie unten erstellt.
Webtest.js

Code: Select all

class Webtest extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `

.special {
color: green; /* Active link styling */
font-weight: bold;
}


[url=/mypath/index.html]textA[/url]
[url=/mypath/subfolderA/subfolderA.html]textB[/url]
[url=/mypath/subfolderB/subfolderB.html]textC[/url]
[url=/mypath/subfolderC/subfolderC.html]textD[/url]
`;

const links = this.shadowRoot.querySelectorAll("#testId");

links.forEach(link => {
link.addEventListener('click', () => {
this.shadowRoot.querySelector('.special')?.classList.remove('special');
link.classList.add('special');
});
});
}
}
customElements.define('webtest-component', Webtest);

index.html

Code: Select all

Ich habe 4 Hyperlinks oben auf der Seite wie diesen.
Geben Sie hier die Bildbeschreibung ein
Ich möchte den zuletzt angeklickten Text hervorheben Link (einer von textA, textB, textC, textD) durch Einfügen einer speziellen Klasse für den zuletzt angeklickten Link. Aber es funktioniert nicht.
Was ich versucht habe:
Verwenden Sie „addEventListener“, um den Klickeffekt zu erhalten.
Klickeffekt:

• Entfernen Sie die „spezielle“ Klasse aus der zuletzt angeklickten Klasse.
• Fügen Sie die „spezielle“ Klasse zur zuletzt angeklickten hinzu.
  < li>Da die „spezielle“ Klasse im Stilabschnitt definiert ist, sollte dies der Fall sein hervorgehoben.

Erwartetes Ergebnis:
Nach dem Klicken auf jeden Text sollte jeder Text grün und fett hervorgehoben werden.
Vielen Dank für Ihre Hilfe!

Laut der Hilfe von Nick und Bravo ist Folgendes passiert. (Vielen Dank!)
Nachdem Sie auf die Seite geklickt haben, wird die Klasse ordnungsgemäß aktualisiert, aber die Seite wird auf eine andere Seite umgeleitet und aktualisiert.
Also die Die vom JS aktualisierte Klasse dauert nur einen Moment, bevor die Seite aktualisiert wird.
Ich möchte zu jeder Seite navigieren UND den Text des zuletzt angeklickten Links hervorheben.
Ich möchte mein Format beibehalten so wie es ist.
Irgendwelche Vorschläge wären wirklich Vielen Dank!
Wenn Sie der Meinung sind, dass dies nicht möglich ist, teilen Sie es bitte auch mit!
Vielen Dank.