Skip to content

SSR bug with v-show + inheritAttrs: false + v-bind="$attrs" #12503

Open
@oom-

Description

@oom-

Vue version

latest (v3.5.13)

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNrVVk1v2zgQ/StcYQFngdDuJu1htW6A7iKH7kdb7AbtISoKWRrZbGlSICnZhuH/3iEpSrSjJE1vvdjSvJnhm+E8UvvkVV1P2waSNJnrQrHaEA2mqclVJti6lsqQvYLqQCol1yRL0DVLfu+x16JuzAdmVq+MUWzRGNDBczobAe1So/HvlKzHQp19NOpGyiWHkxBv7P0zUUihDSlWUHyBkrwkWMtZlXMNvyDsQQNb81ZAB04mx8jNRh4h85lvE/ZnbmBd89wAPhMyL1lLCp5r/TJLavo8S5wZgZguzxfA0eENbAgIo3ZZQlq6lqWzdjzRNgvBcdaKw5bYH1pI3ucPK/TtCmZCvsAOw/6GHdaXJYO9pXolNwj91K8Yg4FO15kYDPz/sf9pjGAnClhJXoJC3DEiMg4OJcV8h8kYIY2tHyX9KOeTwKdxNnFwvw0z3Ae/zd3TfBbtfnKeGI0zU7Hl9LOWAtW0t87IVa5rxkG9rQ3DmcqSlDjEYjnncvOXsxnVwHmwu/pG7J/11tqy5J0CDarF3vaYydUSjIev/3+DTYhA7E3D0fsB8D/QkjeWo3f7oxEl0o78HNvXToBMLG/09daA0KEoS9R6Hpy/Oyf+fKD0ge7l9LmLy8QBu3gi4tNTCVvtldnmvLGKLaFiAv61e39m1enfnQrObidu4ycfB+B6zYwFmrrEjUvdzLy3qbxTpO0H1e10yBDXtEARgyLL/EjxbuGr/d6PHjkc5jNvivE+nQJchrVAmOBIkt6TnhSN0lLRWjJrjPXP/OTuagjyWEiclUgWrmFoCWtqRaXgO1KDzRRrEwsdBBLcN/Q3sqIvyGJJNyukRhZSoWi6P7rA5PTy2TOXjlayaHQqG+OqEXgIxHaF00Mv7lj6FEri6EFJq4Zz5+VdO9GneYW1p0blQtvNodvB8cRnlNuJSyjHv+Js4UwbejuZfOxM+cLpIngYWdPbi3obYA4VukcGzNgveERjqfLdHWv3clSyN61wv/3Tpn9yRTMrJopiPK4nWnc4va6GY8seXMMI3neI3XNj3/k44LlY2rMWRY2Bj4iu0//ZHud7BYoZm1ynxF3D5GAdH5P1k4QZLkinmotvF6UXUUjlN2hUQy1dMFGi4efcVtLL59Gu9h8z39HQczKJbivf3x+paWnE/skd/NSCslcN9u1y+mL662Vy+ArqKJrw

Steps to reproduce

In the code:
Using v-show on an component with defineOptions({ inheritAttrs: false }); and v-bind="$attrs" is resulting in display:none; applied on the root div of the subcomponent (good behavior)+ the binded $attrs div if the initial v-show value is false (not good behavior).

<script setup>const display = ref(false);</script>
<div>
    <div v-show="!display">
        <div>Normal component OK</div>
    </div>
    <div v-show="display"> <!--- Here is display:none --->
        <div>
            <div v-bind="$attrs"></div> <!--- Here the display: none of v-show is set as well but should stay on the root level --->
        </div>
    </div>
</div>

In the playground:

  • Chech the box

image

What is expected?

The InputWithAttributes component should be displayed

What is actually happening?

The InputWithAttributes component is not displayed.
The display: none; is applied on root div + child div with v-bind:$attrs
image
image

System Info

Vue SFC Playground envinfo

Any additional comments?

I think the issue could be linked with:

  • On SSR, vue core estimate that the v-show add the display: none; style and figures out that the input has a v-bind="$attrs" attribute, so it clone the style attribute and add it to the input html element as well.
  • On Client side, the Vue app doesn't understand that the display: none; is related to the same v-show condition than the root div, and fail to toogle it on checked.

Please check: nuxt/nuxt#30156 (comment) for more details.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions