Fallthrough attributes not applied if comment in root of child template and child component has certain structure #13344
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
scope: compiler
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:
div
s in the child component receiving the fallthrough attr is removeddiv
s is changed to an unknown HTML attribute or removedWhat is expected?
The
style
attribute applied by the parent component should be applied to the rootdiv
of the child componentWhat is actually happening?
The attribute is not applied
System Info
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.The text was updated successfully, but these errors were encountered: