Skip to content

[Vapor] ⁨:style={...}⁩ attributes on SVG elements render as ⁨[object Object]⁩ #14382

@dsine-de

Description

@dsine-de

Vue version

v3.6.0-beta.5

Link to minimal reproduction

https://play.vuejs.org/#eNqNUj1PwzAQ/SuRly4lLSowhFIJqg4wAAJGS8hNjsStYxv7kgZV+e+ck34NqGK7vI+756ds2b21cV0BS9gUobRKIMy4jqJpKaTuJpozWUeJxx8Fd5xtlyJd585UOpsbZVwSDcR3JQYtZ7PpiKR7l6/z/7pI2l8d7c5ORydp6NOnTlqMPGBlo1pY44KrA3eCcIfGEHUbVm1khkUSXY7HtrkNQAEyL/CItOFKb2NDhj41+kvm8cobTW10OzhLTWmlAvdiURrtOUv67YETSpnNU4ehq2C4x9MC0vUf+Mo3AePs1YEHVwNnBw6FywF7evH+DA3NB7I0WaVIfYZ8A29UFTL2sgfqmWKf6Lq0jyU1h1LnH37RIGi/f1QIGpRtp+eMfon5macf407iq85HfVKLnzW4sJMKnMQ38fhiCSjia9b+AmIly14=

Steps to reproduce

See output HTML of playground link

What is expected?

In non-vapor mode, the style is correctly interpolated as <svg style="background-color: aqua;"></svg>

What is actually happening?

In vapor mode, the compiled SVG shows as <svg style="[object Object]"></svg>

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 21.21 GB / 31.87 GB
  Binaries:
    Node: 25.4.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 144.0.7559.110
    Edge: Chromium (140.0.3485.54)
    Firefox: 147.0 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    vue: ^3.6.0-beta.5 => 3.6.0-beta.5

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions