Version

3.2.21

Steps to reproduce

Render <div v-html="'<br />'" /> on client and server

1. On client

Vue.createApp({
  template: `<div v-html="'<br />'" />`,
  mounted () { console.log(this.$el.outerHTML) }
}).mount('body')

Output is <div><br></div>

2. On server

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
    template: `<div v-html="'<br />'" />`
})

renderToString(app).then(html => console.log(html))

Output is <div><br /></div>

3. Compare outputs

What is expected?

Outputs are the same

What is actually happening?

Outputs are different

Vue's SSR renderer doesn't validate the HTML that you provide through v-html, so that's kinda expected - <br />is invalid HTML.

We could theoretically parse and validate the HTML in the renderer, but I am doubtful that would worth it.

I ran into this issue when displaying data from TinyMCE Other WYSIWYG editors may also inset <br /> as line break

https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@element_format/

hi~ I use v-html in SSR to render HTML content from TinyMCE，but I want to Lazy loading the img。like

the TinyMCE code
<img  v-lazy='imgSrc' />

Can I parse this directive in v-html to implement this directive ？

@LinusBorg