update(edges): useAttrs on edges to use style

* remove class and style props, pass them as attrs

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Edges/CustomEdge.vue

@@ -31,6 +31,11 @@ const edgePath = computed(() =>
 )
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>

examples/Edges/CustomEdge2.vue

@@ -16,7 +16,9 @@ interface CustomEdgeProps extends EdgeProps {
   targetPosition: Position
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
+  data?: {
+    text: string
+  }
 }
 
 const props = defineProps<CustomEdgeProps>()
@@ -41,6 +43,11 @@ const center = computed(() =>
   }),
 )
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText

examples/Edges/EdgesExample.vue

@@ -40,7 +40,7 @@ const initialElements: Elements = [
     source: '5',
     target: '6',
     label: {
-      component: CustomLabel,
+      component: markRaw(CustomLabel),
       props: {
         text: 'custom label text',
       },