Skip to content

Fallthrough attributes not applied if comment in root of child template and child component has certain structure #13344

Open
@alex-snezhko

Description

@alex-snezhko

Vue version

3.5.14

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8tu2zAQ/JUtz7F0aE+uW6ANAiRF2xSNjzyIFtcSU4oU+FAdBP73LClIloAkN+3M7HBfembf+r4YIrIt2/naqT6AxxD7r9yorrcuwHWrtISjsx1wVpQ5TBmcccNNWcIGHsKTVqaBQQk4Cq1D62xsWhAhOHWIAT0YG0D0vVYoIVios6mzhFZSDRUoA3V0Dk2A2pqjaqITQdnphTvvI4JUnjxQOA/quM0UEHlvEOwRQotg0Ad6IXuSyIzVp3JBeXDY2QHlnLinjLlGMKLLPvZiN/l4KliYhpyxaAqolKxmhLqpDlq0FVg3vQDUh3Kon1ZP3e5//aTuui51+WZtu3LcA22AgoBdr0VAigB24y48jRu/cFZbbd2WMuVnzqAkya5c6NkVC34cZvHoraEVPyeXlNj1SqO779OIPWdbyEziaH32/4+MBRfxasLrFut/r+CP/pQwzv449OgGuouZC8I1GEb65uE3nuh7Jjsroyb1O+Rf9FbHfAZZ9j0aSWUvdLnau3yodIB7f3MKaPzUVCo0Kc9ZzxmN+vqd1i/lfiw+5TxuzjTFeU/pJ1kv5MNmA2SZN7rZjBjdDChJ+xGcZWSJHWZsidYLdInLFb5kaHArBuAWaRYrcUnqpe0qXkaX7+lrfUjnFyfgVNM=

Steps to reproduce

SFC playground example demonstrates bug behavior.

The issue disappears with any of these modifications:

  • One of the nested divs in the child component receiving the fallthrough attr is removed
  • The attribute of one of the divs is changed to an unknown HTML attribute or removed
  • The comment in the child is removed

What is expected?

The style attribute applied by the parent component should be applied to the root div of the child component

What is actually happening?

The attribute is not applied

System Info

System:
    OS: Linux 6.14 Fedora Linux 42 (Workstation Edition)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 3.55 GB / 15.55 GB
    Container: Yes
    Shell: 4.0.1 - /usr/bin/fish
  Binaries:
    Node: 22.15.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - /usr/bin/npm
    pnpm: 10.9.0 - /usr/bin/pnpm

Any additional comments?

Note: this is similar to #9591 but I believe this is a different issue.

I did some digging and this issue appears to trigger whenever the child component becomes large enough to be stringified by the compiler into a static VNode (as opposed to nested element VNodes) according to these thresholds https://github.com/vuejs/core/blob/main/packages/compiler-dom/src/transforms/stringifyStatic.ts#L39, hence the problem disappears if you remove any of the divs in the example or mess with its attribute.

To help highlight the problem, observe the difference in the compiled JS from the SFC playground example after removing one of the id attributes from a div: the hoisted prop does not exist in JS in the problematic case.

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: compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions