Version

3.0.11

Reproduction link

https://codepen.io/zsozeee/pen/ZEeYpOV

Steps to reproduce

In our app we use a huge UI - web component library, where some components need :key attribute to pass. In the previous Vue version, we used :key.prop="''ourvalue'" to pass the value, but after upgrading to Vue 3, this is not working anymore (nor :key, :key.prop, attr:key, etc.). As far as i understand this is a reserved word (along with ref), but somehow can we force to pass key to component?

What is expected?

pass key attribute to component

What is actually happening?

key is a reserved word, can't pass to components as an attribute

Meanwhile i found, using :keY instead of :key is working, but it doesn't feel a good solution, just a hack (as i see the isReservedProps is by default not lowercase the attribute).

What about data-key or key-prop ?

What about data-key or key-prop ?

Unfortunately, we can't modify the external webcomponent lib attributes, also these elements are set to custom elements in Vue.

I'd think you can write a custom directive to set that key attribute as a workaround.

<template>
  <div v-key="keyValue">
    Check out this element's attributes
  </div>
</template>

<script>
export default {
  data: () => ({
    keyValue: 'A'
  }),
  directives: {
    key: {
      mounted(el, binding) {
        el.key = binding.value
      },
      updated(el, binding) {
         if (el.key !== binding.value) {
          el.key = binding.value
        }
      },
    }
  }
}
</script>

The directive can of course also be registered globally with app.directive('key', { .... }.

key is a reserved word, and workarounds have been provided, so I think this can be closed