DOM properties breaks in stringified nodes

[gzzhanghao]

Version

v3.0.0-beta.9

Reproduction link

vue-next-template-explorer

Steps to reproduce

Set DOM properties in stringified nodes.

What is expected?

Set properties correctly.

What is actually happening?

Properties are treated as attribute.

[underfin]

I don't get the problem with you.Can you explain it detaily with this?I find nothing with problem after check the link you provider.

import { createVNode as _createVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><input type=\"checkbox\" indeterminate><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>")

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1
  ]))
}

[gzzhanghao]

@underfin The indeterminate property on the input element should be a DOM property, but it was set as an attribute here.

See: https://stackoverflow.com/q/9366087

[underfin]

Got it.The bahavior what <input type="checkbox" indeterminate/> is not support with browser.
You can use binding <input type="checkbox" :indeterminate="" /> to reslove this.

[posva]

@gzzhanghao Please give more details next time you open an issue: be precise about what is expected and missing like the attribute name. without the second comment, it is very difficult to understand.

You are setting an HTML attribute, so it makes sense it is set as an attribute. Props are set as props when using v-bind so as @underfin suggested, use v-bind

[yyx990803]

In Vue 3 the idea is Vue auto detects prop vs. attributes. I think there should be some intuition from the compiler to avoid stringifying nodes with prop-only bindings, even static.

[underfin]

it is better if it is possible stringfy other div node.

[gzzhanghao]

@underfin @posva Sorry for the confusion. But the real problem here is that stringified node behaves differently with non-stringified one. It may cause confusion in development since the optimization happens automatically - things can break without any relevant update.

A possible solution is adding .prop modifier back, so we can inform the compiler that the node is not stringifiable.

BTW, :indeterminate="" compiles to invalid javascript:

_createBlock("input", { indeterminate:  }, null, 8 /* PROPS */, ["indeterminate"])

While :indeterminate works (with empty strings), it throws a compilation error:

// Vue template compilation error: v-bind is missing expression.(31)

_createBlock("input", { indeterminate: "" }, null, 8 /* PROPS */, ["indeterminate"])

[yyx990803]

If binding as a prop it should be <input :indeterminate="true">

[gzzhanghao]

@yyx990803 Correct, but I think <input indeterminate> should work as well (just like <CustomComponent indeterminate />).

Meanwhile, I wonder if we should handle custom properties here, so we can put raw data objects on elements (source locations, for example).