SSR hydration do not update the component

[lovetingyuan]

<template>
  <iframe :src="iframeSrc" frameborder="0"></iframe>
</template>

<script lang="ts" setup>
const props = defineProps<{
  title: string
  src: string
  port: number
}>()

let iframeSrc = ''

if (typeof location === 'object') {
 // SSR will not run here, so the static content of iframe src is an empty string
 // but in client side, iframeSrc will be assigned to a non-empty string(see below),
 // and the iframe src should be updated to the value of iframeSrc, but it does not happen in browser, the src of iframe is still empty.
  if (import.meta.env.DEV) {
    iframeSrc = `http://localhost:${props.port}/`
  } else {
    iframeSrc = new URL(`${import.meta.env.BASE_URL}/index.html`, location.href.split('?')[0]).toString()
  }
}

</script>

<style scoped>
iframe {
  width: 100%;
  height: 100%;
  margin: 24px 0;
}
</style>

Why is iframe src not updated in browser?

[lovetingyuan]

<template>
  <iframe :src="iframeSrc" frameborder="0"></iframe>
  <span :title="iframeSrc">iframeSrc: {{iframeSrc}}</span>
</template>

<script lang="ts" setup>
const props = defineProps<{
  title: string
  src: string
  port: number
}>()

let iframeSrc = ''

if (typeof location === 'object') {
 // SSR will not run here, so the static content of iframe src is an empty string
 // but in client side, iframeSrc will be assigned to a non-empty string(see below),
 // and the iframe src should be updated to the value of iframeSrc, but it does not happen in browser, the src of iframe is still empty.
  if (import.meta.env.DEV) {
    iframeSrc = `http://localhost:${props.port}/`
  } else {
    iframeSrc = new URL(`${import.meta.env.BASE_URL}/index.html`, location.href.split('?')[0]).toString()
  }
}

</script>

<style scoped>
iframe {
  width: 100%;
  height: 100%;
  margin: 24px 0;
}
</style>

I bind a dynamic text on span tag, so vue will give the warning: Hydration completed but contains mismatches.

<template>
  <iframe :src="iframeSrc" frameborder="0"></iframe>
  <span :title="iframeSrc">iframeSrc:</span>
</template>

<script lang="ts" setup>
const props = defineProps<{
  title: string
  src: string
  port: number
}>()

let iframeSrc = ''

if (typeof location === 'object') {
 // SSR will not run here, so the static content of iframe src is an empty string
 // but in client side, iframeSrc will be assigned to a non-empty string(see below),
 // and the iframe src should be updated to the value of iframeSrc, but it does not happen in browser, the src of iframe is still empty.
  if (import.meta.env.DEV) {
    iframeSrc = `http://localhost:${props.port}/`
  } else {
    iframeSrc = new URL(`${import.meta.env.BASE_URL}/index.html`, location.href.split('?')[0]).toString()
  }
}

</script>

<style scoped>
iframe {
  width: 100%;
  height: 100%;
  margin: 24px 0;
}
</style>

But if I remove the dynamic binding ({{iframeSrc}})on span tag, there is no any warning. But the title attribute of span is still not matched, why this example can bypass the hydration consistency check? Does ssr hydration not check dom attributes? no way...