Fallthrough attributes aren't rendered for renderless components defined with <script setup>, but they are when defined with the explicit Composition API
Vue version
3.3.7
Link to minimal reproduction
Steps to reproduce
- Create a renderless component within a script setup block, returning what you would return in a component defined via the explicit Composition API - a function returning h() content.
- Render that component, and provide a non-prop attribute to it (e.g. attr="value")
What is expected?
Using the Element tab in your browser's dev tools, the markup related to the renderless component should have the fallthrough attribute being rendered (attr="value")
What is actually happening?
The fallthrough attribute is lost and not rendered. (It is visible in useAttrs() with the child component however?!)
System Info
System:
OS: macOS 13.5.1
CPU: (8) arm64 Apple M1 Pro
Memory: 69.55 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
Browsers:
Chrome: 118.0.5993.117
Safari: 16.6
Any additional comments?
Found while migrating from explicit Composition API to script setup on a renderless component. In a Cypress test a renderless component was used with a fallthrough attribute of data-test-id with a certain value - and the Cypress test did not find that attribute causing the suite / regression test to fail.
I've found that if you define the renderless component returning a 'naked' call to h() instead of a function returning that then the fallthrough attributes are applied - https://play.vuejs.org/#eNqNU9tu2kAQ/ZWRVckgwEZK++JAlLbKQyq1jZo++iFgD3hT70V7cags/3tn1wQMaaI82XM/c2ZPG31WKmkcRlm0MIVmyoJB69RVLhhXUltoQeMGOthoySGm1PjyEPsqudoHktQbvpWP56KQwliwuLOw9B1GceG0RmFBaakymMfjkFejBUYpc7Jo8q2wqJtVPRqNYXkFbS4A2GRCQQjNEoo5hMkSHk77fWhZ90Bp3RQ+zee+9yLtF6JVyLDIVb2ySBZA4XGvsZZPYCrp6hKYKGpXIrQtoek6n7QIWZmfuswj/8kjqBj9r/8i/abUapEe+kbTqGdlxlcqeTRSEKcBf74PmDzK+o28j5jydh5V1iqTpWlRCiorsWaNTgTaVCieXlNaqp2wjOOslPz6IrlIPqYlM3boTtDw2VrLJ4OamuTRdDAmJWeDekZslahRv3fsWdlw9FnoxXg/nUjsiBRr6Cls2PaMEk8uq1H/VJbRUzmhZlXTZb4Fn9UOD7sUFRZ//uN/NLt+pzuNAdlgf7vSW6TL+fDN/Y9wxUOQy9LV+zO8EvyFRtbOY+zTvjhREuxBXkB7Gy7MxPa3udlZFOZ5KQ80sBHywz28UF5b/QiX2B6w+Cyut3Ranaj0KEIvEEMSK3HDBN55axQG+jedwb3VhJvGjI8l/WG/I1VVo7hkTTyFlqQVWiW+bnwJb0ls0XeYcXyhk+4f3BuCng==
However that loses reactivity (as expected), and doesn't match how a renderless component would be defined in the Composition API, which is a transformation of script setup.
Can we also ask that the exact method for defining renderless components using script setup is documented, as the methods used above were only documented on sites like StackOverflow (https://stackoverflow.com/a/70151867).
I think this is WAI, the explicit use of h will take over the rendering.
if you want to "fallthrough" you can pass the arg to h
const renderMe = (props) => h('div', props, 'Hi from Comp');
Thanks @pikax ! RE:
Can we also ask that the exact method for defining renderless components using script setup is documented, as the methods used above were only documented on sites like StackOverflow (https://stackoverflow.com/a/70151867).
Would there be any issue documenting this somewhere in the Vue docs(at the very least, how to use renderless components in the context of