attributes that are not defined as props are not converted from camelCase to kebap-case

[Fuzzyma]

I came across this today and wonder if this is really intended.
Every attribute name that is not defined as prop is just converted to lowercase when applied to the component.
So things like ariaControls become ariacontrols instead of aria-controls

However this does not happen, if the attrubute falls through and hits another component that does define it as prop. I guess this happens because setAttribute ultimately just lowercases the attribute when it hits an html element but otherwise just passes it though as i.

So here are some examples:

<!-- Leads to an attrubute datatestid instead of data-testid -->
<button dataTestid="foo" />

However, when we define it as prop it obviosuly is passed correctly because vue converts forth and back:

defineProps<{dataTestid: string}>()

<!-- is correctly passed as prop -->
<CompWithProp dataTestid="works"

So, just dont write dataTestid on html then you might ask...

Well, all this wouldnt be a problem if it woulnt convert all things passed to a slot to camelCase:

Menu.vue

<template>
   <div>
     <slot name="trigger" aria-controls="some-menu" data-testid="menu-trigger">
       <button aria-controls="some-menu" data-testid="menu-trigger">Trigger</button>
    </slot>
    <!-- Menu goes here -->
  </div>
</template>

<template>
  <Menu>
    <template #trigger="scope">
      <button v-bind="scope">Broken</button>
    </template>
  </Menu>
</template>

Every thing you pass to <slot> is converted to camelCase. So scope only contains dataTestid and ariaControls. But when I now v-bind it to the button, it breaks the html attributes.

I suspect not a lot of people come across this since attributes with hyphens are rare and mostly aria or data.
So my big question is: is this intended? It feels very wrong to me at least.

And if it is intended, why? And could there be an exception for data and aria attributes?

[sunnypatell]

@Fuzzyma this is a real bug in how <slot> attributes interact with v-bind on HTML elements.

the root cause is in packages/compiler-core/src/transforms/transformSlotOutlet.ts. when processing <slot> attributes, Vue's compiler explicitly camelizes every attribute name:

p.name = camelize(p.name)

so data-testid becomes dataTestid and aria-controls becomes ariaControls in the scope object.

the problem is in the runtime: packages/runtime-dom/src/modules/attrs.ts calls el.setAttribute(key, value) with the camelized key as-is. the DOM lowercases it to datatestid instead of converting back to data-testid.

Vue has a hyphenate() utility in packages/shared/src/general.ts but it's never called in the patchAttr path.

workaround for now: destructure the scope and bind explicitly:

<template #trigger="scope">
  <button :data-testid="scope.dataTestid" :aria-controls="scope.ariaControls">
    Trigger
  </button>
</template>

or use a helper: v-bind="Object.fromEntries(Object.entries(scope).map(([k,v]) => [k.replace(/\B([A-Z])/g, '-$1').toLowerCase(), v]))". ugly but works.

this should probably be filed as a bug. the compiler camelizes but the runtime never hyphenates back for HTML attributes.