v-html render some random issue

[a272121742]

Version

3.2.31

Reproduction link

codesandbox.io
stackblitz.com

Steps to reproduce

<template>
  <pre  data-type="js"><code v-html="'&lt;span&gt;show-it &lt;/span&gt;'"></code></pre>
  <div class>
    <span class>1</span><span class>2</span>
  </div>
</template>

this is the base code. now we can't see predefined content of show-it
but, if i do some thing, with lite coding, it just be shown. for example:

1. add some non-native attrs into the pre tag, eg: add attr name of a or modify data-type to the _data-type;
2. or remove last div tag ;
3. or remove some class attrs into the last div tag or span tag;

below code, only add a . （english dot）after predefined content show-it， and save a single vue file, it will shown

<template>
  <pre  data-type="js"><code v-html="'&lt;span&gt;show-it. &lt;/span&gt;'"></code></pre>
  <div class>
    <span class></span><span class></span>
  </div>
</template>

look like this https://stackblitz.com/edit/vue3-v-html-render-error

our team test some times, bug can not find where is Error Spelling. so commit this issue, hope the official reply, thanks

What is expected?

we hopy this code will shown show-it

<template>
  <pre  data-type="js"><code v-html="'&lt;span&gt;show-it &lt;/span&gt;'"></code></pre>
</template>

What is actually happening?

text show-it sometimes will not shown

---

https://codesandbox.io/s/eager-paper-prv33s
https://stackblitz.com/edit/vue3-v-html-render-error

[clxho]

+1

[lidlanca]

a workaround that does not alter the output html
wrap string expression in ()

<template>
  <pre  data-type="js"><code v-html="('&lt;span&gt;show-it &lt;/span&gt;')"></code></pre>
</template>

This will force it not to get statically hoisted.

data-* attribute, only "expedited" the static hoisting but does not seem to be part of this issue.
SFC playground static hoisting loses v-html

output:

const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<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><pre><code></code>\n</pre>", 17)
const _hoisted_18 = [
  _hoisted_1
]

import { ref } from 'vue'


const __sfc__ = {
  setup(__props) {

  
return (_ctx, _cache) => {
  return (_openBlock(), _createElementBlock("div", null, _hoisted_18))
}
}

}