Dynamicly rendered <path> gets a class but not the classes attributes

[Eskamedin]

[COMPLETE COMPONENT CODE AT THE END]

Hey, im relatively new to Vue.js and im facing a problem:
This is the template of my component:

<template>
    <nav @mouseenter="computeHexaOutside" class="small-nav position-absolute border border-danger">
        <svg viewBox="0 0 1000 30" class="nav-svg pe-none border border-info">
        </svg>
    </nav>
</template>

That looks like this: (red border is nav, blue border is svg)

As you can see there is an empty SVG. As soon as the component gets rendered i use the mounted Hook to render a Element for this SVG:

mounted() {
            let navSVG = document.querySelector(".small-nav svg.nav-svg");
            navSVG.append(this.createNavPath());
            this.computeHexaInside();
    },
    methods: {
        createNavPath() {
            let p = document.createElementNS("http://www.w3.org/2000/svg", "path");
            p.setAttribute("stroke", "white");
            p.setAttribute("stroke-width", "1");
            p.setAttribute("fill", "none");
            p.classList.add("pe-none");
            p.classList.add("nav-hexagon");

            return p;
        },

Now this path can have two "states": 1. It looks like a hexagon (initial state) and 2. Its streched hexagon alongside the x-achis to fill the complete SVG. The aim is, wheneevetr someone hovers over the nav, i want the hexagon to be strechted and un-stretched if mouse leaves the nav.

Here are the methods for strecthing and unstretching (its just recomputing the d-Attribute):

computeHexaInside() {
           let svg = document.querySelector(".small-nav svg.nav-svg");
           let path = svg.querySelector("path.nav-hexagon");
           let data = svg.getBoundingClientRect();
           let sw = data.width;
           let sh = data.height;
           let xlen = sw * .085
           let xoff = xlen * .3;
           let ypad = sh * .1;
           let start = sw - (xlen + xoff + 5)
           let d =
           `[new d-String]`;
           path.setAttribute("d", d);
       },
       computeHexaOutside() {
           let svg = document.querySelector(".small-nav svg.nav-svg");
           let path = svg.querySelector("path.nav-hexagon");
           let data = svg.getBoundingClientRect();
           let sw = data.width;
           let sh = data.height;
           let xlen = sw - 40;
           let ypad = sh * .1;
           let start = 20;
           let d =
           `[new d-String]`;
           path.setAttribute("d", d);
       }

And it all works fine BUT it does NOT happen smoothly. Allthough i defined int he <style> part of the component transition: all .3s the strecthing does not happen smoothly:

    path.nav-hexagon {
        transition: all .3s ease;
    }

After debugging for a while i realized that allthough my has the class "nav-hexagon" like you see here.... (ignore the d-none, it was just trying sth out)

...the attributes of this nav-hexagon class are not applied from the browser:

And after (again) researching for hours i have no idea what causes this and how to fix it. Someone got an idea?

Here is the code of the complete component:

<template>
    <nav @mouseenter="computeHexaOutside" class="small-nav position-absolute border border-danger">
        <svg viewBox="0 0 1000 30" class="nav-svg pe-none border border-info">
        </svg>
    </nav>
</template>

<script>
export default {
    mounted() {
            let navSVG = document.querySelector(".small-nav svg.nav-svg");
            navSVG.append(this.createNavPath());
            this.computeHexaInside();
    },
    methods: {
        createNavPath() {
            let p = document.createElementNS("http://www.w3.org/2000/svg", "path");
            p.setAttribute("stroke", "white");
            p.setAttribute("stroke-width", "1");
            p.setAttribute("fill", "none");
            p.classList.add("pe-none");
            p.classList.add("nav-hexagon");

            return p;
        },
        computeHexaInside() {
            let svg = document.querySelector(".small-nav svg.nav-svg");
            let path = svg.querySelector("path.nav-hexagon");
            let data = svg.getBoundingClientRect();
            let sw = data.width;
            let sh = data.height;
            let xlen = sw * .085
            let xoff = xlen * .3;
            let ypad = sh * .1;
            let start = sw - (xlen + xoff + 5)
            let d =
            `M${start} ${ypad}
            L${start + xlen} ${ypad}
            L${start + xlen + xoff} ${sh * .5}
            L${start + xlen} ${sh - ypad}
            L${start} ${sh - ypad}
            L${start - xoff} ${sh * .5}
            L${start} ${ypad}`;
            path.setAttribute("d", d);
        },
        computeHexaOutside() {
            let svg = document.querySelector(".small-nav svg.nav-svg");
            let path = svg.querySelector("path.nav-hexagon");
            let data = svg.getBoundingClientRect();
            let sw = data.width;
            let sh = data.height;
            let xlen = sw - 40;
            // let xoff = xlen * .3;
            let ypad = sh * .1;
            let start = 20;
            let d =
            `M${start} ${ypad}
            L${start + xlen} ${ypad}
            L${sw - 5} ${sh * .5}
            L${start + xlen} ${sh - ypad}
            L${start} ${sh - ypad}
            L${5} ${sh * .5}
            L${start} ${ypad}`;
            path.setAttribute("d", d);
        }
    }
}
</script>


<style scoped>
    nav.small-nav {
        top: 5px;
        right: 5px;
        width: calc(100% - 10px);
        height: 50px;
        transition: all .3s;
    }
    nav.small-nav svg{
        width: 100%;
        height: 100%;
    }
    path.nav-hexagon {
        transition: all .3s ease;
    }
</style>

[LinusBorg]

you are using scoped styles, which only apply to elements that have the special data-v-* attribute added by Vue during rendering.

And your manually inserted element is lacking that attribute.

the :deep pseudoselector can help here. It allows you to define a CSS rule where a part of the selector matches elements lacking the scope attribute.

Docs: https://vuejs.org/api/sfc-css-features.html#deep-selectors

<style scoped>
    nav.small-nav {
        top: 5px;
        right: 5px;
        width: calc(100% - 10px);
        height: 50px;
        transition: all .3s;
    }
    nav.small-nav svg{
        width: 100%;
        height: 100%;
    }
    nav.small-nav :deep(path.nav-hexagon) {
        transition: all .3s ease;
    }
</style>

However, this is also not really necessary for the given example. you could still render the path element directly in you template and just apply the dynamically calculated path with v-bind.

<template>
    <nav @mouseenter="computeHexaOutside" class="small-nav position-absolute border border-danger">
        <svg ref="svg" viewBox="0 0 1000 30" class="nav-svg pe-none border border-info">
        <path 
          stroke="white"
          stroke-width="1"
          fill="none"
          class="pe-none nav-hexagon"
          :d="d"
        >
        </path>
        </svg>
    </nav>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    async mounted() {
      await this.$nextTick()
      this.computeHexaInside();
    },
    data: () =>({
      d: ''
    }), 
    methods: {
        computeHexaInside() {
            const svg = this.$refs.svg
            let data = svg.getBoundingClientRect();
            let sw = data.width;
            let sh = data.height;
            let xlen = sw * .085
            let xoff = xlen * .3;
            let ypad = sh * .1;
            let start = sw - (xlen + xoff + 5)
            let d =
            `M${start} ${ypad}
            L${start + xlen} ${ypad}
            L${start + xlen + xoff} ${sh * .5}
            L${start + xlen} ${sh - ypad}
            L${start} ${sh - ypad}
            L${start - xoff} ${sh * .5}
            L${start} ${ypad}`;
            this.d = d
        },
        computeHexaOutside() {
            const svg = /* @type SVGElement */ this.$refs.svg
            let data = svg.getBoundingClientRect();
            let sw = data.width;
            let sh = data.height;
            let xlen = sw - 40;
            // let xoff = xlen * .3;
            let ypad = sh * .1;
            let start = 20;
            let d =
            `M${start} ${ypad}
            L${start + xlen} ${ypad}
            L${sw - 5} ${sh * .5}
            L${start + xlen} ${sh - ypad}
            L${start} ${sh - ypad}
            L${5} ${sh * .5}
            L${start} ${ypad}`;
            this.d = d
        }
    }
})
</script>


<style scoped>
    nav.small-nav {
        top: 5px;
        right: 5px;
        width: calc(100% - 10px);
        height: 50px;
        transition: all .3s;
    }
    nav.small-nav svg{
        width: 100%;
        height: 100%;
    }
    path.nav-hexagon {
        transition: all .3s ease;
    }
</style>

[Eskamedin]

Thank you very much, that information helped me solve the problem. I need to keep in mind about the scopes