Conditional styling on class in Svelte

Question

I'm trying to use Svelte to do some conditional styling and highlighting to equations. While I've been successful at applying a global static style to a class, I cannot figure out how to do this when an event occurs (like one instance of the class is hovered over).

Do I need to create a stored value (i.e. some boolean that gets set to true when a class is hovered over) to use conditional styling? Or can I write a function as in the example below that will target all instances of the class? I'm a bit unclear why targeting a class in styling requires the :global(classname) format.

App.svelte

<script>
    // import Component
    import Katex from "./Katex.svelte"
    
    
    
    // math equations
    const math1 = "a\\htmlClass{test}{x}^2+bx+c=0";
    const math2 = "x=-\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}";
    const math3 = "V=\\frac{1}{3}\\pi r^2 h";
    
    // set up array and index for reactivity and initialize
    const mathArray = [math1, math2, math3];
    let index = 0;
    $: math = mathArray[index];
    
    // changeMath function for button click
    function changeMath() {
        // increase index
        index = (index+1)%3;
    }
    
    function hoverByClass(classname,colorover,colorout="transparent")
    {
        var elms=document.getElementsByClassName(classname);
        console.log(elms);
        for(var i=0;i<elms.length;i++)
        {
            elms[i].onmouseover = function()
            {
                for(var k=0;k<elms.length;k++)
                {
                    elms[k].style.backgroundColor=colorover;
                }
            };
            elms[i].onmouseout = function()
            {
                for(var k=0;k<elms.length;k++)
                {
                    elms[k].style.backgroundColor=colorout;
                }
            };
        }   
    }   
hoverByClass("test","pink");
</script>

<h1>KaTeX svelte component demo</h1>

<h2>Inline math</h2>
Our math equation: <Katex {math}/> and it is inline.

<h2>Displayed math</h2>
Our math equation: <Katex {math} displayMode/> and it is displayed.

<h2>Reactivity</h2>
<button on:click={changeMath}>
    Displaying equation {index}
</button>

<h2>Static math expression within HTML</h2>
<Katex math={"V=\\pi\\textrm{ m}^3"}/>
<style>
    :global(.test) {
    color: red
    }
</style>

Katex.svelte

<script>
    import katex from "katex";
    export let math;
    export let displayMode = false;
    
    const options = {
        displayMode: displayMode,
        throwOnError: false,
        trust: true
    }
    
    $: katexString = katex.renderToString(math, options);
</script>

<svelte:head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
</svelte:head>

{@html katexString}

Answer 1

If I understand it correctly you have a DOM structure with arbitrary nested elements and you would want to highlight parts of the structure that share the same class.

So you would have a structure like this:

<div>
  <p>This is some text <span class="a">highlight</span></p>
  <span class="a">Another highlight</span>
  <ul>
   <li>Some listitem</li>
   <li class="a">Some listitem</li>
   <li class="b">Some listitem</li>
   <li class="b">Some listitem</li>
  </ul>
</div>

And if you select an element with class="a" all elements should be highlighted regardles where they are in the document. This arbitrary placement makes using the sibling selector in css not possible.

There is no easy solution to this, but I will give you my attempt:

This is the full code with some explanation

<script>
    import { onMount } from 'svelte'

    let hash = {}
    let wrapper
    
    onMount(() => {
        [...wrapper.querySelectorAll('[class]')].forEach(el => {
            if (hash[el.className]) return
            else hash[el.className] = [...wrapper.querySelectorAll(`[class="${el.className}"]`)]
        })
                
        Object.values(hash).forEach(nodes => {
            nodes.forEach(node => {
                node.addEventListener('mouseover', () => nodes.forEach(n => n.classList.add('hovered')))
                node.addEventListener('mouseout', () => nodes.forEach(n => n.classList.remove('hovered')))
            })
        })
    })
</script>

<div bind:this={wrapper}>
    <p>
        Blablabla <span class="a">AAA</span>
    </p>
    <span class="a">BBBB</span>
    <ul>
        <li>BBB</li>
        <li class="a b">BBB</li>
        <li class="b">BBB</li>
        <li class="b">BBB</li>
    </ul>
</div>

<style>
    div :global(.hovered) {
        background-color: red;
    }
</style>

The first thing I did was use bind:this to get the wrapping element (in your case you would put this around the {@html katexString}, this will make that the highlight is only applied to this specific subtree.

Doing a querySelector is a complex operation, so we will gather all the related nodes in a sort of hashtable during onMount (this kind of assumes the content will never change, but since it's rendered with @html I believe it's safe to do so).

As you can see in onMount, I am using the wrapper element to restrict the selector to this section of the page, which is a lot faster than checking the entire document and is probably what you want anyway.

I wasn't entirely sure what you want to do, but for simplicity I am just grabbing every descendant that has a class and make a hash section for each class. If you only want certain classes you could write out a bunch of selectors here instead:

hash['selector-1'] = wrapper.querySelectorAll('.selector-1');
hash['selector-2'] = wrapper.querySelectorAll('.selector-2')];
hash['selector-3'] = wrapper.querySelectorAll('.selector-3');

Once this hashtable is created, we can loop over each selector, and attach two event listeners to all of the elements for that selector. One mouseover event that will then again apply a new class to each of it's mates. And a mouseout that removes this class again.

This still means you have to add hovered class. Since the class is not used in the markup it will be removed by Svelte unless you use :global() as you found out yourself. It is indeed not that good to have global classes because you might have unintended effect elsewhere in your code, but you can however scope it as I did in the code above.

The line

div > :global(.hovered) { background-color: red; }

will be processed into

div.svelte-12345 .hovered { background-color: red; }

So the red background will only be applied to .hovered elements that are inside this specific div, without leaking all over the codebase.

Demo on REPL

Here is the same adapted to use your code and to use a document-wide querySelector instead (you could probably still restrict if wanted by having the bind one level higher and pass this node into the component) Other demo on REPL