Description
Vue version
3.5.14
Link to minimal reproduction
Steps to reproduce
SFC playground example demonstrates bug behavior.
The issue disappears with any of these modifications:
- One of the nested
div
s in the child component receiving the fallthrough attr is removed - The attribute of one of the
div
s 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.