Vue version

3.2.25

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-mb3qni?file=src/App.vue

Steps to reproduce

npm run dev

What is expected?

atrr"muted" shoud be in video element

What is actually happening?

System Info

No response

Any additional comments?

No response

Vue prefers setting things as element properties if that property exists on the element:

// pseudocode

if ('muted' in el) {
  el.muted = true
} else {
  el.setAttribute('muted', '')
}

Now, if you set i.e width on a video element, the browser will also reflect that as an attribute. But it does not do so for muted, for reasons I am not aware of.

video.width = 640
video.muted = true
console.log(video)
// => <video width="640">

I don't think we should start adding exceptions for these browser behaviors. instead, you can force Vue to set it as an attribute with the .attr modifier:

<video
      width="640"
      height="360"
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      controls
      v-bind:muted.attr="''"
    ></video>