fix(vue): marquee content

Author: segunadebayo

packages/vue/CHANGELOG.md

@@ -19,6 +19,8 @@
 - **Combobox**:
   - Fixed focus stealing in controlled open mode
   - Removed problematic `aria-hidden` behavior to allow interaction with other page elements
+- **Marquee**: Fixed `Marquee.Content` not receiving `data-v-*` attribute for scoped styles when using `v-for` at the
+  root level.
 
 ## [5.27.1] - 2025-11-02
 

packages/vue/src/components/marquee/examples/scoped-styles.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Marquee } from '@ark-ui/vue/marquee'
+
+const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape']
+</script>
+
+<template>
+  <Marquee.Root :auto-fill="true">
+    <Marquee.Viewport>
+      <Marquee.Content class="marquee-content">
+        <Marquee.Item v-for="item in items" :key="item" style="padding: 0 2rem">
+          {{ item }}
+        </Marquee.Item>
+      </Marquee.Content>
+    </Marquee.Viewport>
+  </Marquee.Root>
+</template>
+
+<style scoped>
+/* This should work with scoped styles - the data-v-* attribute should be on each content element */
+.marquee-content {
+  background: blue;
+  color: white;
+  padding: 0.5rem;
+}
+
+.marquee-content:hover {
+  background: darkblue;
+}
+</style>

packages/vue/src/components/marquee/marquee-content.vue

@@ -12,20 +12,31 @@ export interface MarqueeContentProps
 </script>
 
 <script setup lang="ts">
+import { useAttrs } from 'vue'
 import { ark } from '../factory'
 import { useForwardExpose } from '../../utils/use-forward-expose'
+import { useScopeId } from '../../utils/use-scope-id'
 import { useMarqueeContext } from './use-marquee-context'
 
+defineOptions({ inheritAttrs: false })
 defineProps<MarqueeContentProps>()
+
 const marquee = useMarqueeContext()
+const attrs = useAttrs()
+const scopeId = useScopeId()
+
 useForwardExpose()
 </script>
 
 <template>
   <ark.div
     v-for="(_, index) in Array.from({ length: marquee.contentCount })"
     :key="index"
-    v-bind="marquee.getContentProps({ index })"
+    v-bind="{
+      ...attrs,
+      ...(scopeId ? { [scopeId]: '' } : {}),
+      ...marquee.getContentProps({ index }),
+    }"
     :as-child="asChild"
   >
     <slot />

packages/vue/src/components/marquee/marquee.stories.ts

@@ -6,6 +6,7 @@ import FiniteLoopsExample from './examples/finite-loops.vue'
 import PauseOnInteractionExample from './examples/pause-on-interaction.vue'
 import ProgrammaticControlExample from './examples/programmatic-control.vue'
 import ReverseExample from './examples/reverse.vue'
+import ScopedStylesExample from './examples/scoped-styles.vue'
 import SpeedExample from './examples/speed.vue'
 import VerticalExample from './examples/vertical.vue'
 import WithEdgesExample from './examples/with-edges.vue'
@@ -58,6 +59,13 @@ export const Reverse = {
   }),
 }
 
+export const ScopedStyles = {
+  render: () => ({
+    components: { Component: ScopedStylesExample },
+    template: '<Component />',
+  }),
+}
+
 export const Speed = {
   render: () => ({
     components: { Component: SpeedExample },

packages/vue/src/utils/use-scope-id.ts

@@ -0,0 +1,51 @@
+import { hasProp, isString } from '@zag-js/utils'
+import { getCurrentInstance, type ComponentInternalInstance } from 'vue'
+
+function hasVnodeScopeId(
+  vnode: ComponentInternalInstance['vnode'],
+): vnode is ComponentInternalInstance['vnode'] & { scopeId: string } {
+  if (vnode === null || typeof vnode !== 'object') return false
+  const vnodeObj = vnode as unknown as Record<string, unknown>
+  return hasProp(vnodeObj, 'scopeId') && isString(vnodeObj.scopeId)
+}
+
+function hasTypeScopeId(
+  type: ComponentInternalInstance['type'],
+): type is ComponentInternalInstance['type'] & { __scopeId: string } {
+  if (type === null || typeof type !== 'object') return false
+  const typeObj = type as unknown as Record<string, unknown>
+  return hasProp(typeObj, '__scopeId') && isString(typeObj.__scopeId)
+}
+
+/**
+ * Get scope ID from a component instance.
+ */
+function getScopeIdFromInstance(instance: ComponentInternalInstance): string | undefined {
+  // Check vnode.scopeId first (Vue 3 stores it here)
+  if (hasVnodeScopeId(instance.vnode)) return instance.vnode.scopeId
+  // If not found, check type.__scopeId
+  if (hasTypeScopeId(instance.type)) return instance.type.__scopeId
+}
+
+/**
+ * Access scope ID for scoped styles from parent component.
+ * We need to traverse up the component tree to find a parent with scoped styles.
+ */
+export function useScopeId(): string | undefined {
+  const instance = getCurrentInstance()
+  if (!instance) return
+
+  // Check current instance first
+  let scopeId = getScopeIdFromInstance(instance)
+
+  // If still not found, check parent components
+  if (!scopeId && instance.parent) {
+    let parent: ComponentInternalInstance | null = instance.parent
+    while (parent && !scopeId) {
+      scopeId = getScopeIdFromInstance(parent)
+      parent = parent.parent
+    }
+  }
+
+  return scopeId
+}