«addEventListener» не работает для веб-компонента HTML ⇐ Html

[Anonymous]

Я создал веб-компонент, как показано ниже.
Webtest.js

Код: Выделить всё

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

Код: Выделить всё

У меня есть 4 гиперссылки в верхней части страницы, подобные этой.
введите здесь описание изображения
Я хочу выделить текст последнего нажатия ссылку (один из textA, textB, textC, textD), вставив специальный класс в ссылку, по которой последний раз нажимали. Но это не работает.
Что я пробовал:
Используйте «addEventListener», чтобы получить эффект щелчка.
Эффект щелчка:

• Удалить «специальный» класс из последнего выбранного класса.
• Добавить «специальный» класс в последний выбранный класс.
  < li>Поскольку в разделе стилей определен «специальный» класс, он должен быть выделено.

Ожидаемый результат:
После нажатия на каждый текст каждый текст должен быть выделен зеленым цветом и выделен жирным шрифтом.
Спасибо за помощь!

С помощью Ника и Браво, вот что происходит. (Большое спасибо!)
После нажатия на страницу класс корректно обновляется, но страница перенаправляется на другую страницу и обновляется.
Таким образом, обновленный класс с помощью JS существует только на мгновение, прежде чем страница обновится.
Я хочу перейти на каждую страницу И выделить текст последней нажатой ссылки.
Я хочу сохранить свой формат как есть.
Любые предложения будут действительно Признателен!
Если вы считаете, что это невозможно, поделитесь с нами!
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -component