From 4c1b06423052923d759ecdb331f57cb0f59d18de Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Tue, 10 Jun 2025 14:12:28 +0400
Subject: [PATCH] feat(core): add dom attributes option for nodes (#1861)

feat: Possibility to customize nodes HTML attributes
---
 packages/core/src/components/Nodes/NodeWrapper.ts | 3 +++
 packages/core/src/store/state.ts                  | 2 ++
 packages/core/src/types/flow.ts                   | 2 ++
 packages/core/src/types/node.ts                   | 1 +
 4 files changed, 8 insertions(+)

diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index 654ba955..daef1096 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -61,6 +61,7 @@ const NodeWrapper = defineComponent({
       elementsSelectable,
       nodesConnectable,
       nodesFocusable,
+      nodesAttrs,
       hooks,
     } = useVueFlow()
 
@@ -286,6 +287,8 @@ const NodeWrapper = defineComponent({
           'role': isFocusable.value ? 'button' : undefined,
           'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
           'aria-label': node.ariaLabel,
+          ...nodesAttrs?.value,
+          ...node.attrs,
           'onMouseenter': onMouseEnter,
           'onMousemove': onMouseMove,
           'onMouseleave': onMouseLeave,
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 2198b946..410ab25a 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -114,6 +114,8 @@ export function useState(): State {
 
     disableKeyboardA11y: false,
     ariaLiveMessage: '',
+
+    nodesAttrs: {},
   }
 }
 
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index 4ea8134a..5c6a0661 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -229,6 +229,8 @@ export interface FlowProps {
   autoPanOnConnect?: boolean
   autoPanOnNodeDrag?: boolean
   autoPanSpeed?: number
+
+  nodesAttrs?: Record<string, any>
 }
 
 /**
diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts
index 130a19ca..56ee9d66 100644
--- a/packages/core/src/types/node.ts
+++ b/packages/core/src/types/node.ts
@@ -109,6 +109,7 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   events?: Partial<NodeEventsHandler<CustomEvents>>
   zIndex?: number
   ariaLabel?: string
+  attrs?: Record<string, any>
 }
 
 export interface GraphNode<