What problem does this feature solve?

I want to be able to use .attr and .prop modifiers in render functions. This is needed for some Webcomponents.

What does the proposed API look like?

Currently there is no documented way of setting any modifiers to props when using the h function inside the setup return function.

Nevertheless, it seems like when using ^ before the prop name like { '^width': 'basic' } it will work as the .attr modifier in templates.

As the template compiler compiled it like this, the question would be, if this can be used and should maybe also be documented?

Example Template

<my-web-component :width.attr="'basic'">

Example Render Function

export default defineComponent({
  setup() {
    return () => 
      h(
        'my-web-component',
        { '^width': 'basic' }
      )
  }
});

yes, these prefixes can be used for that purpose.

We are happy to improve our docs on this, it would be great it if you could open an issue in the docs repository and give the docs team a hint where you would have expected to find more information about this.

So far we only briefly mention the shortcuts here, and don't specifically mention them as the way to go in render functions.

@LinusBorg thanks for the reply, I will add that to the docs repo!