diff --git a/docs/examples/connection-radius/SnappableConnectionLine.vue b/docs/examples/connection-radius/SnappableConnectionLine.vue
index 553a7641..d8dddc07 100644
--- a/docs/examples/connection-radius/SnappableConnectionLine.vue
+++ b/docs/examples/connection-radius/SnappableConnectionLine.vue
@@ -99,7 +99,7 @@ watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
   }
 
   if (closestHandle) {
-    const el = document.querySelector(`[data-handleid='${closestHandle.id}']`)
+    const el = document.querySelector(`[data-nodeid='${closestNode.node.id}']`)
 
     const prevStyle = el.style.backgroundColor
     el.style.backgroundColor = canSnap.value ? SNAP_HIGHLIGHT_COLOR : HIGHLIGHT_COLOR
diff --git a/examples/vite/src/SnapHandle/SnappableConnectionLine.vue b/examples/vite/src/SnapHandle/SnappableConnectionLine.vue
index 90e816db..f48ed1b8 100644
--- a/examples/vite/src/SnapHandle/SnappableConnectionLine.vue
+++ b/examples/vite/src/SnapHandle/SnappableConnectionLine.vue
@@ -75,7 +75,7 @@ watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
   })
 
   if (closestHandle) {
-    const el = document.querySelector(`[data-handleid='${closestHandle.id}']`) as HTMLElement
+    const el = document.querySelector(`[data-nodeid='${closestNode.node.id}']`) as HTMLElement
 
     const prevStyle = el.style.backgroundColor
     el.style.backgroundColor = canSnap.value ? SNAP_HIGHLIGHT_COLOR : HIGHLIGHT_COLOR