v-pre stripping attributes starting with "on-"

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

MIT License

46.37k stars 8.14k forks source link

Visit the SFC Playground link and view the Elements panel with the developer tools. Inspect the rendered output.

I'm using the v-pre directive on an element with attributes, for example:

<div test on-test is-on-test v-pre>{{ msg }}</div>

I'd expect the rendered output to be:

<div test on-test is-on-test>{{ msg }}</div>

The rendered output is:

<div test is-on-test>{{ msg }}</div>

Note the absence of the on-test attribute.

No response

This also affects child elements of the element using v-pre.

I asked about this in the #vue-3-advanced discord channel on 5/25/2023 and they thought this was a bug as well.

There are various other cases that need to be considered too. For example, how should this be rendered?

<input
  v-pre
  indeterminate
  type="checkbox"
  :a="b"
  ^c="d"
  .e="f"
>

Currently, it'll render as:

<input type="checkbox" :a="b" c="d">

The type and :a attributes are rendered correctly. The ^c has the ^ stripped off. The other attributes are being set as properties.

I would assume that all attributes in the template are expected to be rendered as-is, even the indeterminate.

Ideally, I think any solution should be purely within the compiler, without needing explicit support at runtime.

I can think of two approaches that might gives us what we want:

Prefix the VNode prop names with ^ in the compiler, so they all get set as attributes.
Use createStaticVNode to create the node.

The first approach is probably easier to implement.

vuejs / core