Changing the style of the selected custom nodes

[SciManJD]

I created several custom nodes and when I click to them, they are selected, but this is not visible. When I click to a standard node, its style is changing. I want to do the same for my new custom nodes. Probably it is quite easy, but right now I cannot imaging how to do this. Can I get some help, please?

[bcakmakoglu]

Here's an example of styling a selected custom node.

You could also use css to style the wrapper of your custom node

.vue-flow__node-custom.selected {
	/* your styles */
}

[bcakmakoglu]

No worries I just can't write too in-depth from my phone 🤣

[SciManJD]

Short additional question. All works fine when I want to get the 'selected' property inside the custom node. But now I tried to change the wrapper class. So according to your notes, I added a new class in the file that VueFlow component is included:

<template>
    <vue-flow> 
        <template #node-custom="customNodeProps">
            <vue-flow-custom v-bind="customNodeProps" @input="handleInputChange"/>
        </template>
    </vue-flow>
</template>

<style scoped>
   .vue-flow__node-${custom}.selected {
        outline: none;
        border: 1px solid var(--vf-node-color);
        box-shadow: 0 0 0 .5px var(--vf-box-shadow);
   }
</style>

But I can't compile this... Probably this is not the syntax that you meant, but this is how I understood it... Help, please...

[bcakmakoglu]

the ${var} syntax is a js syntax not css (it was just to used to demonstrate what the class name should look like)

So the class name should look like this:

.vue-flow__node-custom.selected { /* ... */ }

[SciManJD]

This was the first thing that I tried, but it didn't work. I know that ${var} is not a css syntax, but I doubt in my knowledge, that's why I tried it. If I use .vue-flow__node-custom.selected, I can build, but there is no change when I click on the node. What else could I miss?

[SciManJD]

I found the problem. My class was in scoped-section of the styles. But it seems that it must be global. All works fine...