Svelte reactive statement with a variable fron onMount

Question

I'm trying to style the currently active tab of my web project with the class "active". To target my tab elements I am using

    onMount(() => {
    const links = document.querySelectorAll(".topnav a");
});

I am then using a reactive statement to style the appropriate element like this

    $: {
    links.forEach((link) => {
        if (link.getAttribute("id") === $page.url.pathname) {
            link.classList.add("active");
        } else {
            link.classList.remove("active");
        }
    });
}

However, I have no way of sharing the links variable to my reactive statement. I also tried putting document.querySelectorAll inside my reactive statement (not using onMount at all), which worked flawlessly until i reloaded the page. What is the conventional approach to this?

Answer 1

You need to declare the variable outside of onMount so it is in scope of the reactive statement. E.g.

let links = null;

onMount(() => {
    links = ...;
);

$: if (links != null) {
    links.forEach((link) => {
});

(As Bob Fanger noted, querying the DOM is not recommended and usually not necessary at all.)